XCode 12.4 日本語化計画：Swift Tutorials

セクション 5

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




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















ステップ 1

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




---




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
























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











ステップ 2

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




---




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















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












ステップ 3

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





















ステップ 4

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





ステップ 5

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




---




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


















ステップ 6

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




















ステップ 7

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

    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

    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

    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

    ContentView.swift

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

    ContentView.swift

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

プログラム全体 その 1

プレビュー その 4

    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

次




UI コントロールを扱う




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




さあ始めましょう