XCode 12.4 日本語化計画：Swift Tutorials

セクション 4

カテゴリビューの完成




行と注目の画像をカテゴリのホームページに追加します。


































ステップ 1

CategoryHome の本体を更新して、行の型のインスタンスにカテゴリ情報を渡します。





次に、注目のランドマークをビューの最上部に追加します。これを行うには、ランドマークデータからより多くの情報が必要になります。

























ステップ 2

Landmark.swift 内に、新しい isFeatured プロパティを追加します。




---




追加した他のランドマークプロパティと同様に、このブール値はデータにすでに存在します。新しいプロパティを宣言する必要があります。


































ステップ 3

ModelData.swift で、isFeatured が true に設定されているランドマークのみを含む新しい計算された features 配列を追加します。













































ステップ 4

CategoryHome.swift で、最初に注目のランドマークの画像をリストの最上部に追加します。




---




後のチュートリアルで、このビューをインタラクティブな回転映写機に変えます。今のところ、それは拡大縮小され、トリミングされたプレビュー画像で注目のランドマークの 1 つを表示します。






























ステップ 5

両方の種類のランドマークプレビューでエッジのインセットをゼロに設定して、コンテンツがディスプレイのエッジまで拡張できるようにします。

    CategoryHome.swift

1. import SwiftUI
3. struct CategoryHome: View {
4. @EnvironmentObject var modelData: ModelData
6. var body: some View {
7. NavigationView {
8. List {
9. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
CategoryRow(categoryName: key, items: modelData.categories[key]!)
10. }
11. }
12. .navigationTitle("Featured")
13. }
14. }
15. }
17. struct CategoryHome_Previews: PreviewProvider {
18. static var previews: some View {
19. CategoryHome()
20. .environmentObject(ModelData())
21. }
22. }

プレビュー その 1

    Landmark.swift

1. import Foundation
2. import SwiftUI
3. import CoreLocation
5. struct Landmark: Hashable, Codable, Identifiable {
6. var id: Int
7. var name: String
8. var park: String
9. var state: String
10. var description: String
11. var isFavorite: Bool
var isFeatured: Bool
13. var category: Category
14. enum Category: String, CaseIterable, Codable {
15. case lakes = "Lakes"
16. case rivers = "Rivers"
17. case mountains = "Mountains"
18. }
20. private var imageName: String
21. var image: Image {
22. Image(imageName)
23. }
25. private var coordinates: Coordinates
26. var locationCoordinate: CLLocationCoordinate2D {
27. CLLocationCoordinate2D(
28. latitude: coordinates.latitude,
29. longitude: coordinates.longitude)
30. }
32. struct Coordinates: Hashable, Codable {
33. var latitude: Double
34. var longitude: Double
35. }
36. }

    ModelData.swift

1. import Foundation
2. import Combine
4. final class ModelData: ObservableObject {
5. @Published var landmarks: [Landmark] = load("landmarkData.json")
6. var hikes: [Hike] = load("hikeData.json")
var features: [Landmark] {
landmarks.filter { $0.isFeatured }
}
8. var categories: [String: [Landmark]] {
9. Dictionary(
10. grouping: landmarks,
11. by: { $0.category.rawValue }
12. )
13. }
14. }
16. func load<T: Decodable>(_ filename: String) -> T {
17. let data: Data
19. guard let file = Bundle.main.url(forResource: filename, withExtension: nil)
20. else {
21. fatalError("Couldn't find \(filename) in main bundle.")
22. }
24. do {
25. data = try Data(contentsOf: file)
26. } catch {
27. fatalError("Couldn't load \(filename) from main bundle:\n\(error)")
28. }
30. do {
31. let decoder = JSONDecoder()
32. return try decoder.decode(T.self, from: data)
33. } catch {
34. fatalError("Couldn't parse \(filename) as \(T.self):\n\(error)")
35. }
36. }

    CategoryHome.swift

1. import SwiftUI
3. struct CategoryHome: View {
4. @EnvironmentObject var modelData: ModelData
6. var body: some View {
7. NavigationView {
8. List {
modelData.features[0].image
.resizable()
.scaledToFill()
.frame(height: 200)
.clipped()
9. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
10. CategoryRow(categoryName: key, items: modelData.categories[key]!)
11. }
12. }
13. .navigationTitle("Featured")
14. }
15. }
16. }
18. struct CategoryHome_Previews: PreviewProvider {
19. static var previews: some View {
20. CategoryHome()
21. .environmentObject(ModelData())
22. }
23. }

プレビュー その 2

CategoryHome.swift のリストを以下のように修正します。

    CategoryHome.swift

12. .frame(height: 200)
13. .clipped()
.listRowInsets(EdgeInsets())
15. ForEach(modelData.categories.keys.sorted(), id: \.self) { key in
16. CategoryRow(categoryName: key, items: modelData.categories[key]!)
17. }
.listRowInsets(EdgeInsets())
18. }
19. .navigationTitle("Featured")

プレビュー その 3