【SwiftUI】NavigationView,NavigationLinkを利用した画面遷移

今回はSwiftUIのNavigationView,NavigationLinkを利用した画面遷移 についてとりあげます。

以下の内容について記載します。

1. 画面遷移時のソースコードケースについて
2. NavigationbarのTitleについて
3. 画面上部の余白について
4. 二つ以上前の画面に戻ることについて
5. コードで戻るの挙動

---

1 画面遷移のソースコートコードケース

ケース１. NavigationViewのText

	struct ContentView: View {
	var body: some View {
	NavigationView {
	NavigationLink(destination:
	SecondView(displayText: "Next Screen")) {
	Text("Move to SubView")
	}
	}
	}
	}
	struct SecondView: View {
	let displayText: String
	var body: some View {
	VStack {
	Text(displayText)
	}
	}
	}

view raw 画面遷移1: Text hosted with ❤ by GitHub

---

ケース2. NavigationViewのButton表現と条件一致した場合の遷移

以下はボタン押下後に、isActiveフラグがtrueになります。NavigationViewのisActiveと一致するので、次の画面に遷移する挙動となります。

	struct ContentView: View {
	@State var isActive: Bool = false
	var body: some View {
	NavigationView {
	VStack{
	NavigationLink(destination:
	SecondView(displayText: "Next Screen"),
	isActive: $isActive) {
	EmptyView()
	}
	Button(action: {
	self.isActive.toggle()
	}) {
	Text("Move to SubView")
	}
	}
	}
	}
	}
	struct SecondView: View {
	let displayText: String
	var body: some View {
	VStack {
	Text(displayText)
	}
	}
	}

view raw 画面遷移2: ボタンと条件一致での遷移 hosted with ❤ by GitHub

・動画

上記1、２の動画です。挙動としては上記のコードだと変わらないです。

---

ケース3. NavigationViewのHStackでimageとText表現について

	struct ContentView: View {
	var body: some View {
	NavigationView {
	NavigationLink(destination:
	SecondView(displayText: "Next Screen")) {
	HStack(spacing: 2) {
	Image("twitter_icon")
	.renderingMode(.original)
	.resizable()
	.scaledToFill()
	.padding(.all, 5.0)
	.frame(width: 60, height: 60)
	.border(Color.clear, width: 2)
	Text("Move to SubView").font(.title).foregroundColor(Color.purple).border(Color.clear, width: 2)
	}.padding(5).border(Color.blue, width: 2)
	}
	}
	}
	}
	struct SecondView: View {
	let displayText: String
	var body: some View {
	VStack {
	Text(displayText)
	}
	}
	}

view raw 画面遷移3: 画像とテキスト hosted with ❤ by GitHub

・スクリーンショット

※Twitterアイコンは表示のためのサンプル画像として利用していております。

---

2.NavigationbarのTitleについて

.navigationBarTitleDisplayMode(表示モード)を用いて、タイトルの表示を変更ができます。表示モードについては以下の種類があります。

navigationBarTitleDisplayMode(.inline)

小さなタイトル文字

navigationBarTitleDisplayMode(.large)

大きなタイトルで表示。スクロールすると小さなタイトルになる

navigationBarTitleDisplayMode(.auto)

前のナビゲーション項目の表示モードを継承

・NavigationBarのカスタマイズをする場合 NavigationBarのカスタマイズは下記の@titaniumさんが記載しております。 変更の場合は、ご参照ください。 https://qiita.com/titanium/items/690b15c4471f4cd22516

---

3.画面上部の余白について

.navigationBarTitleDisplayModeが設定されていない場合に発生することがあります。遷移先の画面でタイトルが不要の場合、.navigationBarTitleDisplayMode(.inline)や.navigationBarHidden(true)で表示の設定してみましょう。

---

4.二つ以上前の画面に戻ることについて

二つ以上の画面遷移をして、最初の画面に戻るにはどうしたら良いかですが、yururiworkさんのサイトの記事が わかりやすくまとまっております。以下のコードは、yururiworkさんのサイトのコードを引用させていただきました。

・yururiworkさんのサイト

https://www.yururiwork.net/【swiftui】environmentobjectを使って先頭のviewに戻る方法【画面遷移/

	import SwiftUI
	@main
	struct SampleUIProjectApp: App {
	var body: some Scene {
	WindowGroup {
	ContentView().environmentObject(EnvironmentData())
	}
	}
	}

view raw 画面遷移-複数画面で最初の画面に戻る：App hosted with ❤ by GitHub

	import SwiftUI
	class EnvironmentData: ObservableObject {
	@Published var isNavigationActive: Binding<Bool> = Binding<Bool>.constant(false)
	}

view raw 画面遷移-複数画面で最初の画面に戻る：EnvironmentData hosted with ❤ by GitHub

	import SwiftUI
	struct ContentView: View {
	@State var isActive: Bool = false
	@EnvironmentObject var envData: EnvironmentData
	var body: some View {
	NavigationView {
	VStack {
	NavigationLink(destination: SecondView(), isActive: $isActive) {
	EmptyView()
	}
	Button("Forward to Second View.") {
	isActive = true
	envData.isNavigationActive = $isActive
	}
	}
	}.navigationBarTitle("First View")
	}
	}
	struct SecondView: View {
	var body: some View {
	VStack {
	NavigationLink(destination: ThirdView()) {
	Text("Forward to Third View.")
	}
	}.navigationBarTitle("Second View")
	}
	}
	struct ThirdView: View {
	var body: some View {
	VStack {
	NavigationLink(destination: FinalView()) {
	Text("Forward to Final View.")
	}
	}.navigationBarTitle("Third View")
	}
	}
	struct FinalView: View {
	@EnvironmentObject var envData: EnvironmentData
	var body: some View {
	VStack {
	Button("pop to First View") {
	envData.isNavigationActive.wrappedValue = false
	}
	}.navigationBarTitle("Final View")
	}
	}
	struct ContentView_Previews: PreviewProvider {
	static var previews: some View {
	Group {
	ContentView()
	.preferredColorScheme(.light)
	}
	}
	}

view raw 画面遷移-複数画面で最初の画面に戻る：複数画面 hosted with ❤ by GitHub

以下は上記のコードで動作させた時の表示です。

---

5.コードで戻るの挙動

遷移先の画面にて、左上の戻るボタンをつけず、コードで戻る場合に前画面に戻る方法です。

	struct ContentView: View {
	var body: some View {
	NavigationView {
	NavigationLink(destination:
	SecondView(displayText: "Next Screen")) {
	Text("Move to SubView")
	}
	}
	}
	}
	struct SecondView: View {
	let displayText: String
	@Environment(\.presentationMode) var presentationMode
	var body: some View {
	VStack {
	Text(displayText).font(.title)
	Button("Back to FirstView") {
	presentationMode.wrappedValue.dismiss()
	}
	}.navigationBarHidden(true)
	}
	}

view raw 画面遷移: コードで戻る hosted with ❤ by GitHub