[SwiftUI] NavigationView の画面遷移で値渡し

NavigationVIewを使うと簡単に画面遷移が可能です。また画面遷移と同時に値を渡す事もできます。

Swift 5.3
Xcode 12.4

 

NavigationView

 
画面の遷移をさせるためにはいくつかの方法がありますが、NavigationViewはその1つです。

Navigationは画面上部のタブで素早く画面を切り替えるというイメージがありますが、SwiftUIでは柔軟に作成できます。
 

 

NavigationLink

 
NavigationLinkを使って画面の遷移先を設定できます。

直接記述してもできますが、Libraryから NavigationView を探して
ContentViewのbodyにドラッグ&ドロップします。

NavigationLink に遷移先の設定、
ContentにはNavigationViewがラップするコンテンツ、ここではTextをそのまま入れておきます。

例えばこのように遷移先としてSecondViewを作り、簡単なテキストを置いて作ります。

ContentView.swift

Preview で実行してみると

Backボタンが自動で追加されています。
Hello, world!のTextがリンクのトリガーになっているのがわかります。

 

画面遷移での値渡し

 
画面の遷移先にデータを渡すことができ、structなのでいわゆる値渡しになります。

destinetionで指定した遷移先のプロパティに値を渡すには例えば、

のように遷移先のプロパティに値を渡します。

受け取る遷移先ではTextの文字列として受け取ります。

まとめると、
ContentView.swift

値が渡されているのがわかります。

 

NavigationのBar

 
ナビゲーションのバーを設定します。

 

navigationTitle

 
iOS14からnavigationTitleを使います。navigationBarTitleは非推奨になりました。

 

Main Screen と Sub Screen のタイトルが表示されました。

 

inlineモード

 
navigationBarTitl は非推奨になったため、inlineモードも使えなのでその代わりに
navigationBarTitleDisplayMode(_:) を使います。
デフォルトでは大きなタイトルで邪魔な時は小さいタイトルにできます。

モードとしては以下のものがあります。

  • large:デフォルト、大きなタイトル文字
  • inline:小さなタイトル文字
  • automatic:前のNavigationのモードを軽症する

Barを非表示にするにはこの設定を追加します。

 

ToolBarItem

 
navigationBarItemsは(iOS14から非推奨となりました)

代わりに、toolbarとToolbarItemを使います。

ToolbarItemにButtonやさまざまなItemを設定できます。
よくあるように3画面をタブで画面遷移させるようにする設定を作ってみます。
 
ToolbarItemにButtonを置いて画面遷移させる方法もありますが
シンプルNavigationLinkをそのまま使うことも可能です。

画面上部のタイトルバーにボタンのようにリンクを置きましたが、ToolbarItemにはさまざまな機能があり、画面下部にボタンを配置することもできます。

 

NavigationViewの背景色

 
NavigationView の背景の色を設定したい場合は、Titleの大きさでやり方が多少ことなります。

large Titile

 
デフォルトのlargeが設定されている場合です。

ZStackをNavigationView以下に置き
Color.yellow.edgesIgnoringSafeArea( .all)を使います。

NavigationBarのみの背景色の設定には今のところ以下のような方法になってしまいます。いずれSwiftUIで直接できるようになるかもしれません。
尚、このUINavigationBarはinlineでは機能しないです。

全画面に配色して、SafeAreaに別の色領域にすると擬似的にタイトル領域の背景を設定できるかなと思います。

ContentView.swift

背景色を固定色ではなくRGBで調整してみました。

ZStackの背景色を別の方法でも設定できます。

 

inline Titile

 
inlineの場合は上部のバーはこれまでの設定が簡単に使えません。
ただし、それなりに自動的に設定されるようです。

メイン画面が白の場合、薄いグレー色になっています。

背景が黄色

背景が青

背景が緑


下のバーはUIToolbarで背景色を設定できますが、これでもそれなりにいい感じにしてくれるので良いのかもしません

 
 

References:
NavigationView | Apple Developer Documentation
NavigationLink – SwiftUI | Apple Developer Documentation
navigationTitle(_:) | Apple Developer Documentation
toolbar(content:) | Apple Developer Documentation
ToolbarItem | Apple Developer Documentation

(非推奨)
navigationBarTitle(_:) | Apple Developer Documentation<
navigationBarItems(leading:trailing:) | Apple Developer

一人でアプリ開発の限界を感じたら

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンライン・スクールがいいと思います。



TECH ACADEMY
iPhoneアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。



CodeCamp
現役エンジニアによるオンラインプログラミングスクール【CodeCamp】


直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。



侍エンジニア塾
侍エンジニア塾 無料体験レッスン





–>

シェアする

  • このエントリーをはてなブックマークに追加

フォローする