[SwiftUI]NavigationViewの表示をiPhoneとiPadで同じにする

SwiftUIでiOSアプリを開発中にNavigationViewを利用した際にiPhoneとiPadではデフォルトの挙動が異なっていたので、iPhoneとiPadで同じ挙動にするための実装方法を説明します。

iPhoneだとこんな感じに表示されますが・・・。

iPadだと部品が左側に表示されます。

iPadだとNavigationViewを利用すると画面の左側にナビゲーションとして部品を表示するみたいです。これをiPhoneと同じ表示にしたいと思います。

navigationViewStyleを設定する

navigationViewStyleにStackNavigationViewStyle()を設定します。

        NavigationView {
            VStack {
                Text("First View")
                NavigationLink(destination: SecondView(), isActive: self.$model.secondViewPushed) {
                    Button(action: {
                        self.model.secondViewPushed = true
                    }) {
                        Text("次へ")
                    }
                }
            }
        }.navigationViewStyle(StackNavigationViewStyle())

動作確認

iPadをiPhoneと同じ表示にすることができました！！

最後に

iPadとiPhoneで表示が異なると、それぞれのデバイス毎に画面のデザインをしないといけなくなるので、iPadとiPhoneで特に画面のレイアウトを変える必要がない場合は今回の対応を行うことで同じ画面レイアウトで実装していけると思います。

もちろん、iPhoneとiPadのそれぞれの特徴を活かしたアプリを開発したいのであれば、NavigationViewの部品がiPadの左側に表示されることを上手く活用した方が良いと思います。表示できる情報量などもiPhoneとiPadでは異なるので、自分が作りたいアプリに合わせて設計・実装していきたいですね。