NavigationSplitViewの説明と使い方

NavigationSplitViewは、SwiftUI 3.0で導入されたコンポーネントで、iPadOSやmacOSなどの大きな画面で使われる2カラム（サイドバーとディテールビュー）または3カラム（サイドバー、コンテンツビュー、ディテールビュー）のレイアウトを構築するために設計されています。

iOS：16.0以上
XCode（当サイトの環境）：15.0.1

これにより、アプリのナビゲーションが改善され、特にタブレットやデスクトップのような大きなディスプレイを持つデバイスでの使いやすさの向上が期待できます。

基本的な使い方（２カラム）
1. iPadでのプレビュー
2. iPhoneでのプレビュー
基本的な使い方（３カラム）
1. iPadでのプレビュー
2. iPhoneでのプレビュー
NavigationSplitViewのカスタマイズ
注意点
まとめ

基本的な使い方（２カラム）

NavigationSplitViewを使うと、ユーザーがアイテムを選択したときに詳細情報を表示するサイドバーとディテールビューを持つUIを簡単に作成できます。基本的な使用例は以下の通りです。

import SwiftUI

struct NavigationSplitViewSmp: View {
    let fruits: [String] = ["apple", "banana", "orenge"]
    @State private var selected: String?

    var body: some View {
        NavigationSplitView {
            // iPadにおいてサイドバーに表示されるビュー
            // iPhoneの場合は１番目のコンテンツ
            List(fruits, id: \.self, selection: $selected) { fruit in
                Text(fruit)
            }
        } detail: {
            // ディテールビューに表示されるビュー
            Text("選択したフルーツ：" + (selected ?? "未選択"))
        }
    }
}

iPadでのプレビュー

iPhoneでのプレビュー

このコードは、サイドバーにapple,banana,orengeのアイテムをリスト表示し、アイテムが選択されたときにディテールビューにそのアイテムの詳細を表示する基本的なNavigationSplitViewの例です。

基本的な使い方（３カラム）

NavigationSplitViewは、さらに複雑なナビゲーションパターンにも対応しています。
例えば、3カラムレイアウトを使う場合、サイドバー、コンテンツビュー、ディテールビューの3つのセクションを定義できます。

import SwiftUI

struct NavigationSplitViewSmp: View {
    let fruits: [String] = ["apple", "banana", "orenge"]
    let fruitsImg: [String] = ["🍎", "🍌", "🍊"]
    @State private var selected: String?
    @State private var selectedImg: String?

    var body: some View {
        NavigationSplitView {
            // iPadにおいてサイドバーに表示されるビュー
            // iPhoneの場合は１番目のコンテンツ
            List(fruits, id: \.self, selection: $selected) { fruit in
                Text(fruit)
            }
        } content: {
            // コンテンツビュー
            List(fruitsImg, id: \.self, selection: $selectedImg) { fruitImg in
                Text(fruitImg)
            }
        } detail: {
            // ディテールビューに表示されるビュー
            Text("選択したフルーツ：" + (selected ?? "未選択") + (selectedImg ?? "未選択"))
        }
    }
}

iPadでのプレビュー

縦向き表示

横向き表示

iPhoneでのプレビュー

このコードは先述の２カラムのサンプルコードに”コンテンツビュー”として、フルーツの絵を選択するビューを追加したものです。

サイドバーでフルーツの文字列、コンテンツビューでフルーツの絵を選択すると、ディテールビューにてその組み合わせが表示されるようになっています。

NavigationSplitViewのカスタマイズ

以下の記事ではNavigationSplitViewのカスタマイズ方法について説明しています。よろしければ合わせて参考にしてください。

NavigationSplitViewの”スタイル”を変更

automatic

balanced

prominentDetail

NavigationSplitViewの"スタイル"を変更

iOS：16.0以上XCode（当サイトの環境）：15.0.1.navigationSplitViewStyleを使用するとNavigationSplitView のスタイルを変更することが出来ます。スタイルを適用するとサイドバーを展開した...

ツールバーボタンのカスタマイズ

NavigationSplitViewにおけるツールバーボタンの削除

iOS：16.0以上XCode（当サイトの環境）：15.0.1本記事ではNavigationSplitViewにおけるツールバーボタンを削除したりカスタマイズする方法を紹介します。カスタマイズするには.toolbar(removing: ....

注意点

NavigationSplitViewは、特に大きな画面での使用を念頭に置いて設計されています。iPhoneなどの小さな画面では、NavigationStackを使用した方が適切な場合があります。
レスポンシブなデザインを実現するためには、異なるデバイスサイズ（iPadやiPhone）や向き（縦向きや横向き）に応じてUIが適切に調整されるように設計することが重要です。