XCode 12.4 日本語化計画：Swift Tutorials

セクション 103

詳細ビューの作成




watch アプリで作業するための iOS ターゲットリソースができたので、ランドマークの詳細を表示するための watch 固有のビューを作成する必要があります。詳細ビューをテストするには、watch の最大サイズと最小サイズのカスタムプレビューを作成し、すべてが watch の文字盤に収まるように丸いビューに少し変更を加えます。











ステップ 1

LandmarkDetail.swift という名前の WatchLandmarks Extention フォルダに新しいカスタムビューを追加します。




---




このファイルは、そのターゲットメンバーシップによって iOS プロジェクト内の同じ名前のファイルと区別されます。これは、Watch Extension ターゲットにのみ適用されます。











ステップ 2

modelData、 landmark、 landmarkIndex プロパティを新しい LandmarkDetail 構造体に追加します。




---




これらは、ユーザー入力の処理 で追加したプロパティと全く同じです。





    LandmarkDetail.swift



1. import SwiftUI
3. struct LandmarkDetail: View {
@EnvironmentObject var modelData: ModelData
var landmark: Landmark
var landmarkIndex: Int {
modelData.landmarks.firstIndex(where: { $0.id == landmark.id })!
}
4. var body: some View {
5. Text("Hello, World!")
6. }
7. }
9. struct LandmarkDetail_Previews: PreviewProvider {
10. static var previews: some View {
11. LandmarkDetail()
12. }
13. }




ステップ 3

プレビューで、モデルデータのインスタンスを作成し、それを使用してランドマークオブジェクトを LandmarkDetail 構造体のイニシャライザに渡します。ビューの環境 (environment) オブジェクトも設定する必要があります。





    LandmarkDetail.swift



16. struct LandmarkDetail_Previews: PreviewProvider {
17. static var previews: some View {
let modelData = ModelData()
return LandmarkDetail(landmark: modelData.landmarks[0])
.environmentObject(modelData)
18. }
19. }




プレビューその 1





ステップ 4

body() メソッドから CircleImage ビューを返します。




---




ここでは、iOS プロジェクトから CircleImage ビューを再利用します。サイズ変更可能な画像を作成したため、 scaledToFill() への呼び出しは、円のサイズを調整し、表示がいっぱいになります。





    LandmarkDetail.swift



11. var body: some View {
CircleImage(image: landmark.image.resizable())
.scaledToFill()
12. }
13. }




プレビューその 2





ステップ 5

最大 (44mm) と最小 (40mm) の時計盤のプレビューを作成します。




---




最大と最小の時計盤に対してテストすることで、アプリがディスプレイに収まるようにどの程度スケーリングするかを確認できます。いつものように、サポートされているすべてのデバイスのサイズでユーザインターフェイスをテストする必要があります。





    LandmarkDetail.swift



17. struct LandmarkDetail_Previews: PreviewProvider {
18. static var previews: some View {
19. let modelData = ModelData()
return Group {
LandmarkDetail(landmark: modelData.landmarks[0])
.environmentObject(modelData)
.previewDevice("Apple Watch Series 5 - 44mm")
LandmarkDetail(landmark: modelData.landmarks[1])
.environmentObject(modelData)
.previewDevice("Apple Watch Series 5 - 40mm")
}
20. }
21. }




プログラム全体 その 1





プレビューその 3





円の画像は、表示に合わせてサイズ変更されます。残念ながら、これにより切り抜きが発生します。切り抜きの問題を修正するには、画像を VStack に埋め込んで、円の画像がどの watch にも合うようにレイアウトを追加で変更できます。





ステップ 6

円の画像を VStack に埋め込みます。画像の下にランドマークの名前とその情報を表示します。




---




ご覧のとおり、情報は watch のスクリーンに完全には合いませんが、 VStack をスクロールビュー内に配置することでそれを修正できます。





    LandmarkDetail.swift



11. var body: some View {
VStack {
CircleImage(image: landmark.image.resizable())
.scaledToFill()
Text(landmark.name)
.font(.headline)
.lineLimit(0)
Toggle(isOn: $modelData.landmarks[landmarkIndex].isFavorite) {
Text("Favorite")
}
Divider()
Text(landmark.park)
.font(.caption)
.bold()
.lineLimit(0)
Text(landmark.state)
.font(.caption)
}
12. }
13. }




プログラム全体 その 2





プレビューその 4





ステップ 7

垂直スタックをスクロールビューで包み込みます。




---




これによりビューのスクロールがオンになりますが、別の問題が発生します。円の画像がフルサイズに拡大し、他の UI 要素が画像サイズに一致するように調整されます。円とランドマークの名前だけが画面に表示されるように、円の画像のサイズを調整する必要があります。





    LandmarkDetail.swift



11. var body: some View {
ScrollView {
12. VStack {
13. CircleImage(image: landmark.image.resizable())



---



32. Text(landmark.state)
33. .font(.caption)
34. }
}
35. }
36. }




プレビューその 5





ステップ 8

scaleToFill() を scaleToFit() に変更し、パディング (padding) を追加します。




---




これにより、円の画像がディスプレイの幅に一致するように調整され、ランドマークの名前が円の画像の下に表示されるようになります。





    LandmarkDetail.swift



13. VStack {
14. CircleImage(image: landmark.image.resizable())
.scaledToFit()
16. Text(landmark.name)



---



33. .font(.caption)
34. }
.padding(16)
35. }
36. }
37. }




プレビューその 6





ステップ 9

仕切り (divider) の後に MapView を追加します。




---




地図は画面外に表示されますが、ライブプレビューを有効にすると、下にスクロールして表示できます。





    LandmarkDetail.swift



32. Text(landmark.state)
33. .font(.caption)
Divider()
MapView(coordinate: landmark.locationCoordinate)
.scaledToFit()
34. }
35. .padding(16)




プレビューその 7





ステップ 10

戻るボタンにタイトルを追加します。




---




これにより、戻るボタンのテキストを "Landmarks" に設定できます。





    LandmarkDetail.swift



40. .padding(16)
41. }
.navigationTitle("Landmarks")
42. }
43. }




プログラム全体 その 3





プレビューその 8









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