XCode 12.4 日本語化計画：Swift Tutorials

セクション 105

セクション間のナビゲーションを追加




さまざまにカテゴリ化されたランドマークがすべてビューに表示されるため、ユーザはアプリ内の各セクションにアクセスする方法が必要です。ナビゲーションおよびプレゼンテーション API を使用して、カテゴリホーム、詳細ビュー、およびお気に入りリストをタブビューからナビゲートできるようにします。












ステップ 1

CategoryRow.swift 内で、既存の CategoryItem を NavigationLink で包み込みます。




---




カテゴリの項目自体はボタンのラベルであり、その宛先はカードで表されるランドマークの landmark 詳細ビューです。




    CategoryRow.swift



1. import SwiftUI
3. struct CategoryRow: View {
4. var categoryName: String
5. var items: [Landmark]
7. var body: some View {
8. VStack(alignment: .leading) {
9. Text(categoryName)
10. .font(.headline)
11. .padding(.leading, 15)
12. .padding(.top, 5)
14. ScrollView(.horizontal, showsIndicators: false) {
15. HStack(alignment: .top, spacing: 0) {
16. ForEach(items) { landmark in
NavigationLink(destination: LandmarkDetail(landmark: landmark)) {
CategoryItem(landmark: landmark)
}
17. }
18. }
19. .frame(height: 185)
20. }
21. }
22. }
23. struct CategoryRow_Previews: PreviewProvider {
24. static var landmarks = ModelData().landmarks
26. static var previews: some View {
27. CategoryRow(
28. categoryName: landmarks[0].category.rawValue,
29. items: Array(landmarks.prefix(4))
30. )
31. }
32. }




プレビュー その 1





プレビューをピン止めして、CategoryRow に対する次のステップの効果を確認します。





ステップ 2

renderingMode(_:) および foregroundColor(_:) 修飾子を適用して、カテゴリの項目のナビゲーションの外観を変更します。




---




ナビゲーションリンクのラベルとして渡すテキストは、環境のアクセントカラーを使用してレンダリングされ、画像はテンプレート画像としてレンダリングされる場合があります。どちらの動作も、デザインに最も合うように変更できます。





    CategoryItem.swift



1. import SwiftUI
3. struct CategoryItem: View {
4. var landmark: Landmark
6. var body: some View {
7. VStack(alignment: .leading) {
8. landmark.image
.renderingMode(.original)
9. .resizable()
10. .frame(width: 155, height: 155)
11. .cornerRadius(5)
12. Text(landmark.name)
.foregroundColor(.primary)
13. .font(.caption)
14. }
15. .padding(.leading, 15)
16. }
17. }
19. struct CategoryItem_Previews: PreviewProvider {
20. static var previews: some View {
21. CategoryItem(landmark: ModelData().landmarks[0])
22. }
23. }




プレビュー その 2





次に、アプリのメインコンテンツビューを変更して、あなたが今作成したカテゴリビューと既存のランドマークのリストのどちらかをユーザが選択できるタブビューを表示します。




ステップ 3

プレビューのピン止めを解除し、ContentView に切り替えて、表示するタブ (Tab) の列挙型を追加します。





    ContentView.swift



1. import SwiftUI
3. struct ContentView: View {
enum Tab {
case featured
case list
}
6. var body: some View {
7. LandmarkList()
8. }
9. }
11. struct ContentView_Previews: PreviewProvider {
12. static var previews: some View {
13. ContentView()
14. .environmentObject(ModelData())
15. }
16. }





プレビュー その 3





ステップ 4

タブ選択 (selection) の状態 (State) 変数を追加し、デフォルト値を指定します。





    ContentView.swift



1. import SwiftUI
3. struct ContentView: View {
@State private var selection: Tab = .featured
5. enum Tab {




ステップ 5

LandmarkList と新しい CategoryHome を包み込むタブビューを作成します。




---




各ビューの tag(_:) 修飾子は、selection プロパティが取ることができる値の 1 つと一致するため、TabView は、ユーザがユーザインターフェイスで選択を行ったときに表示するビューを調整できます。





    ContentView.swift



11. var body: some View {
TabView(selection: $selection) {
CategoryHome()
.tag(Tab.featured)
LandmarkList()
.tag(Tab.list)
}
12. }
13. }




プログラム全体 その 1




プレビュー その 4





ステップ 6

各タブにラベルを付けます。





    ContentView.swift



12. TabView(selection: $selection) {
13. CategoryHome()
.tabItem {
Label("Featured", systemImage: "star")
}
14. .tag(Tab.featured)
16. LandmarkList()
.tabItem {
Label("List", systemImage: "list.bullet")
}
17. .tag(Tab.list)
18. }




プレビュー その 5





ステップ 7

ライブプレビューを開始して、新しいナビゲーションを試してみてください。











あなたの理解度をチェックしてください





---





質問 1




ランドマークアプリのルートビューはどのビューですか？



(訳注： 原典と異なり、選択肢を選ぶとすぐ答えが表示されます)



LandmarksApp

Landmarks

ContentView





質問 2




ContentView ビューは、アプリの他の部分からのコードをどのように使用しますか？




さまざまなランドマークの画像アセットを再利用します。

修飾子には同じ構文を使用し、ビューには同じ命名規則を使用します。

ナビゲーション階層内のすべてのランドマークビューを接続します。





質問 3




ビューをナビゲーションリンクに変える正しいコードはどれですか？




NavigationLink( LandmarkCard(landmark: landmark), destination: LandmarksView(landmark: landmark) )

NavigationLink(destination: LandmarksView(landmark: landmark)) { LandmarkCard(landmark: landmark) }

NavigationLink { LandmarkCard(landmark: landmark) } .navigationDestination(LandmarksView(landmark: landmark))






次




UI コントロールを扱う




Landmarks アプリでは、ユーザは自分の性格を表現するためのプロファイルを作成できます。ユーザに自分のプロフィールを変更する機能を提供するには、編集モードを追加して設定画面を設計します。




さあ始めましょう















セクション 1	セクション 2	セクション 3
セクション 4	セクション 5
セクション 101	セクション 102	セクション 103
セクション 104	セクション 105