XCode 12.4 日本語化計画：Swift Tutorials

セクション 3

カテゴリ行を作成




ランドマークは、水平方向にスクロールする行に各カテゴリを表示します。行を表す新しいビューの型を追加してから、そのカテゴリのすべてのランドマークを新しいビューに表示します。




---




ビューの作成と結合 で作成したランドマークビューの一部を再利用して、ランドマークの見慣れたプレビューを作成します。







ステップ 1

行の内容を保持するための新しいカスタムビュー CategoryRow を定義します。





















ステップ 2

カテゴリ名とそのカテゴリ内の項目のリストのプロパティを追加します。






















ステップ 3

カテゴリの名前を表示します。
























ステップ 4

カテゴリの項目を HStack に配置し、それをカテゴリ名で VStack にグループ化します。
























ステップ 5

背の高い frame(width:height:) を指定し、パディングを追加し、スクロールビューで HStack を包み込むことにより、コンテンツに少しスペースを与えます。




---




より多くのデータのサンプリングでビュープレビューを更新すると、スクロール動作が正しいことを確認しやすくなります。

























ステップ 6

1 つのランドマークを表示する CategoryItem という新しいカスタムビューを作成します。






























ステップ 7

CategoryRow.swift 内で、ランドマーク名を保持する Text を新しい CategoryItem ビューに置き換えます。

    CategoryRow.swift

1. import SwiftUI
3. struct CategoryRow: View {
4. var body: some View {
5. Text("Hello, World!")
6. }
7. }
9. struct CategoryRow_Previews: PreviewProvider {
10. static var previews: some View {
11. CategoryRow()
12. }
13. }

プレビュー その 1

    CategoryRow.swift

1. import SwiftUI
3. struct CategoryRow: View {
var categoryName: String
var items: [Landmark]
4. var body: some View {
5. Text("Hello, World!")
6. }
7. }
9. struct CategoryRow_Previews: PreviewProvider {
static var landmarks = ModelData().landmarks
10. static var previews: some View {
CategoryRow(
categoryName: landmarks[0].category.rawValue,
items: Array(landmarks.prefix(3))
)
11. }
12. }

上記のリストの 8 行目を以下のように書き換え、書き加えます。

    CategoryRow.swift

7. var body: some View {
Text(categoryName)
.font(.headline)
8. }
9. }

プレビュー その 2

さらに上記のリストの 8 行目を以下のように書き加えます。

    CategoryRow.swift

7. var body: some View {
VStack(alignment: .leading) {
Text(categoryName)
.font(.headline)
HStack(alignment: .top, spacing: 0) {
ForEach(items) { landmark in
Text(landmark.name)
}
}
}
8. }
9. }

プレビュー その 3

上記のリストの 11 行目以降に以下のように書き足します。

    CategoryRow.swift

8. VStack(alignment: .leading) {
9. Text(categoryName)
10. .font(.headline)
.padding(.leading, 15)
.padding(.top, 5)
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top, spacing: 0) {
ForEach(items) { landmark in
Text(landmark.name)
}
12. }
13. }
.frame(height: 185)
14. }
15. }
16. }
17. struct CategoryRow_Previews: PreviewProvider {
18. static var landmarks = ModelData().landmarks
20. static var previews: some View {
21. CategoryRow(
22. categoryName: landmarks[0].category.rawValue,
items: Array(landmarks.prefix(4))
23. )
24. }
25. }

プレビュー その 4

    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
9. .resizable()
10. .frame(width: 155, height: 155)
11. .cornerRadius(5)
12. Text(landmark.name)
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. }

プレビュー その 5

    CategoryRow.swift

15. HStack(alignment: .top, spacing: 0) {
16. ForEach(items) { landmark in
CategoryItem(landmark: landmark)
17. }
18. }

プレビュー その 6