NavigationViewの使い方
2021年03月09日
![](/images/category//swiftui.png)
UIKitではUINavigationViewController
とpush()
を使って画面遷移を行っていたものをSwiftUIでは NavigationView
・NavigationLink
を使って表現します
基本的な使い方
NavigationViewを使いたいViewのコンポーネント全体を NavigationView
で囲みます
// before
struct ContentView: View {
var body: some View {
Text("to next view")
}
}
// after
struct ContentView: View {
var body: some View {
NavigationView {
Text("to next view")
}
}
}
遷移先の画面を用意します
// NextView.swift
struct NextView: View {
var body: some View {
Text("this is NextView")
}
}
タップした際に遷移を行うオブジェクトを NavigationLink
で囲み、 destination:
に遷移先の画面を指定します
// ContentView.swift
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: NextView()) {
Text("to next view")
}
}
}
}
![NavigationViewを使って画面遷移出来るようにする](/article-images/how-to-navigation/01.gif)
それぞれの名称
NavigationViewには大きく2つ指定出来るものがあります
- NavigationBarTitle
- NavigationBarItems
- leading・・左側に配置するアイテム
- trailing・・右側に配置するアイテム
![NavigationBarTitleとNavigationBarItemsについて](/article-images/how-to-navigation/02.png)
NavigationBarTitle
navigationBarTitle
NavigationBarItems
共通の注意点ですが、 NavigationView
でラップしているコンポーネントに対して指定する必要があります。
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: NextView()) {
Text("to next view")
}
.navigationBarTitle("navigation bar title")
}
}
}
![NavigationBarTitleを指定し表示する](/article-images/how-to-navigation/03.png)
NavigationBarItems
navigationBarItems
の leading
・trailing
にはViewを継承したコンポーネントを渡す事が出来ます。
また横並びに表示させたい場合は HStack
を使う事で表現出来ます。
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: NextView()) {
Text("to next view")
}
.navigationBarItems(
leading: Text("編集"),
trailing: HStack {
Button(action: { print("tap square.and.arrow.up") }) {
Image(systemName: "square.and.arrow.up")
}
Button(action: { print("tap plus.circle.fill") }) {
Image(systemName: "plus.circle.fill")
}
}
)
}
}
}
![navigationBarItemsを指定する](/article-images/how-to-navigation/04.png)
NavigationBarItem
をタップした際に画面遷移を行う場合もNavigationLink
を使用します。
// EditView.swift
import SwiftUI
struct EditView: View {
var body: some View {
Text("this is EditView")
}
}
// ContentView.swit
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: NextView()) {
Text("to next view")
}
.navigationBarItems(
leading: NavigationLink(destination: EditView()) {
Text("Edit")
},
trailing: HStack {
Button(action: { print("tap square.and.arrow.up") }) {
Image(systemName: "square.and.arrow.up")
}
Button(action: { print("tap plus.circle.fill") }) {
Image(systemName: "plus.circle.fill")
}
}
)
}
}
}
![navigationBarItemsから画面遷移する](/article-images/how-to-navigation/05.gif)
組み合わせて表示する
navigationBarTitle
NavigationBarItems
どちらも使用すると以下のようになります。
struct ContentView: View {
var body: some View {
NavigationView {
NavigationLink(destination: NextView()) {
Text("to next view")
}
.navigationBarTitle("navigation bar title")
.navigationBarItems(
leading: NavigationLink(destination: EditView()) {
Text("Edit")
},
trailing: HStack {
Button(action: { print("tap square.and.arrow.up") }) {
Image(systemName: "square.and.arrow.up")
}
Button(action: { print("tap plus.circle.fill") }) {
Image(systemName: "plus.circle.fill")
}
}
)
}
}
}
![NavigationLinkとnavigationBarItemsを組み合わせ表示・遷移する](/article-images/how-to-navigation/06.png)