画面遷移とウィンドウの扱いがよりわかりやすく──Navigation and window
画面遷移とウィンドウの扱いについて仕様が更新されました。主要な変更点について、Stacks／Split View／Scenesの3つでまとめられています。
| 分類 | 概要 |
|---|---|
| Stacks | 画面遷移の方法 |
| Split View | 画面分割の方法 |
| Scenes | ウィンドウの扱い |
それぞれの項目について簡単なサンプルコードとともに紹介します。
Stacks
画面遷移の方法が変更されました。これまで利用されていたNavigationViewはiOS 16で廃止されます。画面遷移では、NavigationStackを利用します。前節のサンプルデータを使ってNavigationStackの例を挙げます。
struct ContentView: View {
var body: some View {
NavigationStack { // （1）
List(MonthAmount.examples) { data in // サンプルデータをリスト表示
NavigationLink(value: data) { // （2）
Text(data.month) // 月のリストを表示
}
}
.navigationDestination(for: MonthAmount.self) { data in // （3）
DetailView(data: data) // 遷移先のView
}
}
}
}
// 遷移先のView
struct DetailView: View {
var data: MonthAmount
var body: some View {
VStack { // サンプルデータのmonthとamoutを表示
Text(data.month).font(.title)
Text("\(data.amount)")
}
.padding()
}
}
画面遷移を利用する部分は、NavigationStackで定義します（1）。画面遷移のリンクは、これまで通りNavigationLinkを利用して作成します（2）。画面遷移先はNavigationStackのnavigationDestinationメソッドで定義します（3）。NavigationDestinationメソッドには、NavigationLinkの引数となるオブジェクトが渡されます。サンプルでは、MonthAmountオブジェクトが渡されますので、このオブジェクトに対して画面遷移を行うように定義します。
Split View
Master-Detailの画面構成のように、選択された項目の詳細を表示するビューとしてNavigationSplitViewが定義されました。NavigationSplitViewを利用すると、2列または3列に渡る画面を作成することができます。前項までに作成したサンプルデータと詳細画面を利用してNavigationSplitViewの簡単な例を挙げます。
struct ContentView: View {
@State private var data: [MonthAmount] = MonthAmount.examples
@State private var selectedData: MonthAmount?
@State private var path = NavigationPath() // 詳細画面へのパス
@State private var visibility: NavigationSplitViewVisibility = .automatic // 自動的にメニューを表示するか
var body: some View {
NavigationSplitView(columnVisibility: $visibility, sidebar: { // （1） メニュー部分を定義
List(data, selection: $selectedData) { data in // 表示するリスト
NavigationLink(value: data, label: {
Text(data.month)
})
}
.listStyle(.sidebar)
.navigationTitle("MonthAmount")
}, detail: { // （2） 詳細を定義
NavigationStack(path: $path) { // メニュー選択時に詳細画面を表示
if let data = selectedData {
DetailView(data: data)
} else {
Text("選択してください")
}
}
})
}
}
NavigationSplitViewを利用する際には、最初のブロックでメニューに当たる部分（1）、detailブロックで詳細を表示する部分（2）を定義します。この時に、引数columnVisibilityで、画面に応じてメニューを表示するかを指定できます。サンプルでは、画面の向きに応じて自動的にメニューを表示する「.automatic」を指定しています。メニューが表示されない場合でも、ヘッダの左上に表示されるボタンでメニューを開閉できます。
メニューはNavigationLink構造体で定義し、選択された項目を詳細画面に表示します。項目の選択時に、画面遷移の動作を表すNavigationPathオブジェクトが渡されますので、前項のNavigationStackを用いて詳細画面を表示します。
NavigationSplitViewでカラムを選択して、選択に応じた画面を表示するときにも、NavigationStackを用いる点に気をつけてください。
Scenes
iアプリの状態に応じて補足的にウィンドウを表示する機能が追加されました。アプリの起動中にはメニューバーからもウィンドウを表示する機能も実装されました。
こちらはmacOS向けの機能であり、本連載の趣旨を超えてしまいますので、What's new in SwiftUIの動画の9:55～で確認してください。
