【SwiftUI】NavigationViewの使い方

階層的な画面遷移を管理するNavigationViewの使い方を解説します。

スポンサーリンク

環境

この記事の情報は次のバージョンで動作確認しています。

【Xcode】11.6
【Swift】5.2.4
【iOS】13.6
【macOS】Catalina バージョン 10.15.6
スポンサーリンク

基本的な使い方

NavigationViewを使用した非常に簡単なサンプルを以下に示します。

リストの項目をクリックすると、対象のViewに遷移します。

NavigationViewの表示例

ナビゲーション管理するViewの指定

ナビゲーションViewを有効にするには、階層のトップ画面でNavigationViewを使用します。

ナビゲーション管理下のViewについて、サンプルではListを使用していますが、FormでもScrollViewでも、あるいはスクロールしないプレーンViewでも構いません。

タイトルの指定

Navigationのタイトルを指定するModifierです。
注意点として、NavigationViewに関するModifierは基本的にNavigationViewそのものではなく、Navigation配下のViewに適用します。
これは、遷移先のViewでも使用できるようにする為の考慮と思われます。

なお、上記の代わりにこちらのイニシャライザを使うと表示モードの選択が可能です。

表示モード 意味
.large
(デフォルト)
大きなタイトルで表示
スクロールすると小さなタイトルになる
.inline 小さなタイトル固定
.automatic 前のナビゲーション項目の表示モードを継承

画面遷移の指定

引数destinationに遷移先Viewを指定します。
サンプルコードのような単純Text Viewでも遷移先画面として成立します。

クロージャー内では、画面遷移のトリガーとなるView(ラベル)を定義します。
テキストだけで無く、Imageやそれらの組み合わせでの指定も可能です。

遷移先画面では、前画面に戻るためのリンクが付加されます。

【SwiftUI】NavigationViewでの画面遷移
NavigationView配下での画面遷移について解説します。
スポンサーリンク

ナビゲーションスタイルの指定

画面横サイズの大きい特定条件(iPadまたは、iPhone11でランドスケープモード)で、NavigationViewを使用すると、次のような特殊なスタイル表示になります。

横長画面でのナビゲーションスタイル

これは、遷移先を詳細ビューとしてを開きながら、遷移元をナビゲーションビューとして扱うモードです。
本記事では、このモードについての説明は触れませんが、常に1画面での表示モードとしたい場合は、次のModifierを適用します。

画面横サイズが大きい場合でも、常に1つの平面図のみを表示するモード固定となります。
なお、使用にあたっての注意点として、このModifierだけは「Navigation配下のView」では無く「NavigationView」に直接適用する必要があります。

スポンサーリンク

ナビゲーションバーを非表示にする。

このModifierをNavigation配下のViewに適用すると、タイトルを含めたNavigationBarを非表示にします。

スポンサーリンク

あわせて読みたい記事

【SwiftUI】NavigationViewでの画面遷移
NavigationView配下での画面遷移について解説します。
【SwiftUI】ナビゲーションバーのボタン配置
ナビゲーションバーにボタンを配置する方法を解説します。
【SwiftUI】Formの使い方
FormはiOSの「設定」アプリのようなUIを実現するViewタイプです。データ入力用の部品(View)をグループ化して表示できます。
SwiftUI
スポンサーリンク
カピ通信