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

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

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

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


ケース１. NavigationViewのText

ケース2. NavigationViewのButton表現と条件一致した場合の遷移
以下はボタン押下後に、isActiveフラグがtrueになります。NavigationViewのisActiveと一致するので、次の画面に遷移する挙動となります。

・動画
上記1、２の動画です。挙動としては上記のコードだと変わらないです。
ケース3. NavigationViewのHStackでimageとText表現について

・スクリーンショット
※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に戻る方法【画面遷移/
以下は上記のコードで動作させた時の表示です。

5.コードで戻るの挙動

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

このブログの人気の投稿

アプリアイコンの素材探し

はじめに  iOSアプリ開発で利用するアイコン素材をネットで探してみた アイコン画像について、ネットのアイコンを利用するとき ライセンスを確認すると思いますが、直近調べたものを記載しました。
続きを読む

【SwiftUI】グラスモーフィズムを試してみました

イメージ
🤔 グラスモーフィズムって？   すりガラスの表現を利用した半透明の表現方法でガラスの向こう側がすりガラスによって曇って見える表現が特徴です。iosでは今更ですが、MacOSのBig Surに利用されていることから、2021年のデザインのトレンドとして挙がっています。  🤔  では、どのような画面表現があるのか？ ・Dribbbleでは？ https://dribbble.com/tags/glassmorphism ・Pinterestでは？ Pinteresetで検索すると、Osamu Furukawaさんのボードに掲載がございます。以下にリンクを掲載します。 https://www.pinterest.jp/omfull/%E3%82%B0%E3%83%A9%E3%82%B9%E3%83%A2%E3%83%BC%E3%83%95%E3%82%A3%E3%82%BA%E3%83%A0glassmorphism/ 🤔 どんな表現が可能なのか？ 以下のスズキアユミさんのサイトがまとまってますので、リンクとして掲載します。 https://designmemo.jp/creative/glassmorphism.html 🤔 SwiftUIで表示できるの？ 試した結果、SwiftUIのみでは表現が難しそうです。Blurの表現ありますが、ただのViewに くもりガラス風の表現 をするのは難しく、UIViewRepresentableで拡張したUIVisualEffectViewというパーツが必要になるようです。 ここまでで、やったこととして、Figmaで以下のように簡単なデザインしました。 figmaのプラグインで、SwiftUIインスペクターを利用してSwiftUIのコードを出力してiPhone画面に表示してみました。以下のようになります。オレンジの四角形と黄色い三角形部分が上にのっているViewで薄く表示されてますが、 くもりガラス風な表現になってはいません。 UIVisualEffectViewを利用すると以下のような表現になります。オレンジの四角形と黄色い三角形部分が上にのっているViewがくもりガラスのようになりました。 くもりガラス...
続きを読む

【SwiftUI】LazyVGridについて

イメージ
1.LazyVGrid, LazyHGridについて 今回は、SwiftUIのLazyVGridについて取り上げます。  iOS14からLazyVGridとLazyHGridが利用できるようになりました。UICollectionViewを使って表現していたグリッドデザインをSwiftUIではLazyVGrid,LazyHGridを利用して表現します。以下の表示例をみていきましょう。 2.表示例：４列の固定幅のViewを持つLazyVGridの表示 1) スクリーンショット 2) コード 3.上記コードについて 1) LazyVGridのインスタンスについて LazyVGrid(colomns: [GridItem], alignment: VerticalAlignment, spacing: CGFloat?, pinnedViews: PinnedScrollableViews, content: () -> _) ※LazyHGridの場合は、colomnsのラベル名がrowsに変わります 引数の各要素は以下のようになってます ・rows： 　→ GridItem の配列を指定。 ・alignment： 　→ 行の配置を .center .top .bottom のいずれかを指定 ・spacing： 　→ 行と行の間隔を指定 　→ ・LazyVGridの場合、行間のスペースを変更します。 ・pinnedViews： 　→ ヘッダーとフッターを固定するかどうかを指定する。ヘッダーの場合は .sectionHeaders を、フッターの場合は .sectionFooters を指定します。 cf）Apple Documentaion: LazyGridView.init 2) 要素のGridItemについて GridItemは要素のサイズ、要素数を定義します GridItem(GridItem.Size, spacing: CGFloat?, alignment: Alignment?) ・GridItem.Sizeについて → 以下の種類があるようです。 　fixed：固定サイズを指定 　flexible：可変サイズ（最小・最大指定）をして 　...
続きを読む