XCode 12.4 日本語化計画：Swift Tutorials

セクション 1

ユーザのお気に入りのランドマークをマークする




リストを拡張して、ユーザのお気に入りを一目で確認できるようにすることから始めます。Landmark 構造体にプロパティを追加して、ランドマークの初期状態をお気に入りとして読み取り、お気に入りのランドマークを表示する各 LandmarkRow に星を追加します。














ステップ 1

開始点の Xcode プロジェクトまたは前のチュートリアルで終了したプロジェクトを開き、プロジェクトナビゲータで Landmark.swift を選択します。
























ステップ 2

Landmark 構造体に isFavorite プロパティを追加します。




---




landmarkData.json ファイルには、ランドマークごとにこの名前のキーがあります。Landmark は Codable に準拠しているため、キーと同じ名前で新しいプロパティを作成することにより、キーに関連した値を読み取ることができます。
























ステップ 3

プロジェクトナビゲータで LandmarkRow.swift を選択します。





























ステップ 4

スペーサーの後に、if 文内に星の画像を追加して、現在のランドマークがお気に入りかどうかをテストします。




---




SwiftUI ブロックでは、if 文を使用して条件付きでビューを含めます。






ステップ 5

システムイメージはベクターを基礎にするため、foregroundColor(_:) 修飾子を使用して色を変更できます。




---




ランドマークの isFavorite プロパティが true の場合は常に、星がある事になります。このチュートリアルの後半で、そのプロパティを変更する方法を説明し ます。

    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
var isFavorite: Bool
12. private var imageName: String
13. var image: Image {
14. Image(imageName)
15. }
17. private var coordinates: Coordinates
18. var locationCoordinate: CLLocationCoordinate2D {
19. CLLocationCoordinate2D(
20. latitude: coordinates.latitude,
21. longitude: coordinates.longitude)
22. }
24. struct Coordinates: Hashable, Codable {
25. var latitude: Double
26. var longitude: Double
27. }
28. }

    LandmarkRow.swift

1. import SwiftUI
3. struct LandmarkRow: View {
4. var landmark: Landmark
6. var body: some View {
7. HStack {
8. landmark.image
9. .resizable()
10. .frame(width: 50, height: 50)
11. Text(landmark.name)
13. Spacer()
14. }
15. }
16. }
18. struct LandmarkRow_Previews: PreviewProvider {
19. static var previews: some View {
20. Group {
21. LandmarkRow(landmark: landmarks[0])
22. LandmarkRow(landmark: landmarks[1])
23. }
24. .previewLayout(.fixed(width: 300, height: 70))
25. }
26. }

14 行目から、以下のように書き足します。

13. Spacer()
if landmark.isFavorite {
Image(systemName: "star.fill")
}
14. }

更に 17 行目に以下のように書き足します。

16. Image(systemName: "star.fill")
.foregroundColor(.yellow)
17. }