プログラミング

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

プログラミング
この記事は約2分で読めます。
スポンサーリンク

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

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

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

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

スポンサーリンク

navigationViewStyleを設定する

navigationViewStyleStackNavigationViewStyle()を設定します。

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

動作確認

iPadiPhoneと同じ表示にすることができました!!

最後に

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

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

スポンサーリンク
スポンサーリンク
KoEをフォローする
CodeLab

コメント

タイトルとURLをコピーしました