XCode 12.5 日本語化計画：Swift Tutorials

セクション 2

macOS 詳細ビューの作成




詳細ビューには、選択したランドマークに関する情報が表示されます。iOS アプリ用にこのようなビューを作成しましたが、プラットフォームが異なれば、データ表示に対するアプローチも異なります。




わずかな調整や条件付きコンパイルでプラットフォーム間に対するビューを再利用できる場合もありますが、詳細ビューは macOS では非常に異なるため、専用のビューを作成することをお勧めします。初めに iOS の詳細ビューをコピーしてから、macOS のより大きなディスプレイに合うように変更しましょう。





ステップ 1

LandmarkDetail と言う、macOS をターゲットとする MacLandmarks グループ内に新しいカスタムビューを作成します。




---




これで、LandmarkDetail.swift という 3 つのファイルができました。それぞれがビュー階層で同じ目的を果たしますが、特定のプラットフォームに合わせたエクスペリエンスを提供します。














ステップ 2

iOS の詳細ビューの内容を macOS の詳細ビュー内にコピーします。




---




macOS では navigationBarTitleDisplayMode(_:) メソッドは使用できないため、プレビューは失敗します。



























































ステップ 3

NavigationBarTitleDisplayMode(_:) 修飾子を削除し、frame 修飾子をプレビューに追加して、より多くのコンテンツを表示できるようにします。




---




ライブプレビューを開始しない限り、MapView は空白のままです。





次のいくつかの手順で行う変更により、Mac での大型ディスプレイのレイアウトが改善されます。




ステップ 4

park と state を保持している HStack を、VStack で先頭に配置するように変更し、Spacer を削除します。














ステップ 5

MapView 以下のすべてのものを VStack で囲み、CircleImage と残りのヘッダを HStack 内に配置します。



































ステップ 6

circle からオフセット(offset) を削除し、代わりに VStack 全体に小さなオフセットを適用します。





















ステップ 7

resizable() 修飾子を画像に追加し、CircleImage を少し小さく制限します。










ステップ 8

ScrollView を最大幅に制限します。




---




これにより、ユーザがウィンドウを非常に広くした場合の読みやすさが向上します。









ステップ 9

PlainButtonStyle を使用するように FavoriteButton を変更します。




---




ここでプレーンスタイルを使用すると、ボタンが iOS と同じように見えます。







ディスプレイが大きいほど、追加機能のためのスペースが増えます。






ステップ 10

ZStack に [Open in Maps(マップで開く)] ボタンを追加して、マップの右上隅に表示されるようにします。




---




マップに送信する MKMapItem を作成できるようにするには、必ず MapKit を含めてください。

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 {
ScrollView {
MapView(coordinate: landmark.locationCoordinate)
.ignoresSafeArea(edges: .top)
.frame(height: 300)
CircleImage(image: landmark.image)
.offset(y: -130)
.padding(.bottom, -130)
VStack(alignment: .leading) {
HStack {
Text(landmark.name)
.font(.title)
.foregroundColor(.primary)
FavoriteButton(isSet: $modelData.landmarks[landmarkIndex]
.isFavorite)
}
HStack {
Text(landmark.park)
Spacer()
Text(landmark.state)
}
.font(.subheadline)
.foregroundColor(.secondary)
Divider()
Text("About \(landmark.name)")
.font(.title2)
Text(landmark.description)
}
.padding()
}
.navigationTitle(landmark.name)
.navigationBarTitleDisplayMode(.inline)
5. }
6. }
8. struct LandmarkDetail_Previews: PreviewProvider {
static let modelData = ModelData()
9. static var previews: some View {
LandmarkDetail(landmark: modelData.landmarks[0])
.environmentObject(modelData)
10. }
11. }

プレビューその 1

LandmarkDetail.swift

53. LandmarkDetail(landmark: modelData.landmarks[0])
54. .environmentObject(modelData)
.frame(width: 850, height: 700)
55. }
56. }

プレビューその 2

LandmarkDetail.swift

26. FavoriteButton(isSet: $modelData.landmarks[landmarkIndex].isFavorite)
27. }
VStack(alignment: .leading) {
29. Text(landmark.park)
30. Text(landmark.state)
31. }

プレビューその 3

LandmarkDetail.swift

15. .frame(height: 300)
VStack(alignment: .leading, spacing: 20) {
HStack(spacing: 24) {
17. CircleImage(image: landmark.image)
18. .offset(y: -130)
19. .padding(.bottom, -130)
21. VStack(alignment: .leading) {
22. HStack {
23. Text(landmark.name)
24. .font(.title)
25. .foregroundColor(.primary)
26. FavoriteButton(isSet: $modelData.landmarks[landmarkIndex].isFavorite)
27. }
29. VStack(alignment: .leading) {
30. Text(landmark.park)
31. Text(landmark.state)
32. }
33. .font(.subheadline)
34. .foregroundColor(.secondary)
}
}
36. Divider()

プレビューその 4

LandmarkDetail.swift

17. VStack(alignment: .leading, spacing: 20) {
18. HStack(spacing: 24) {
19. CircleImage(image: landmark.image)
21. VStack(alignment: .leading) {
22. HStack {

43. }
44. .padding()
.offset(y: -50)
45. }
46. .navigationTitle(landmark.name)

プレビューその 5

LandmarkDetail.swift

17. VStack(alignment: .leading, spacing: 20) {
18. HStack(spacing: 24) {
CircleImage(image: landmark.image.resizable())
.frame(width: 160, height: 160)
20. VStack(alignment: .leading) {

プレビューその 6

LandmarkDetail.swift

44. }
45. .padding()
.frame(maxWidth: 700)
46. .offset(y: -50)
47. }
48. .navigationTitle(landmark.name)

プレビューその 7

LandmarkDetail.swift

26. .foregroundColor(.primary)
27. FavoriteButton(isSet: $modelData.landmarks[landmarkIndex].isFavorite)
.buttonStyle(PlainButtonStyle())
28. }

プレビューその 8

LandmarkDetail.swift

1. import SwiftUI
import MapKit
3. struct LandmarkDetail: View {
4. @EnvironmentObject var modelData: ModelData
5. var landmark: Landmark
7. var landmarkIndex: Int {
8. modelData.landmarks.firstIndex(where: { $0.id == landmark.id })!
9. }
11. var body: some View {
12. ScrollView {
ZStack(alignment: Alignment(horizontal: .trailing, vertical: .top)) {
13. MapView(coordinate: landmark.locationCoordinate)
14. .ignoresSafeArea(edges: .top)
15. .frame(height: 300)
Button("Open in Maps") {
let destination = MKMapItem(placemark: MKPlacemark(coordinate: landmark.locationCoordinate))
destination.name = landmark.name
destination.openInMaps()
}
.padding()
}
17. VStack(alignment: .leading, spacing: 20) {
18. HStack(spacing: 24) {
19. CircleImage(image: landmark.image.resizable())
20. .frame(width: 160, height: 160)
22. VStack(alignment: .leading) {
23. HStack {
24. Text(landmark.name)
25. .font(.title)
26. .foregroundColor(.primary)
27. FavoriteButton(isSet: $modelData.landmarks[landmarkIndex].isFavorite)
28. .buttonStyle(PlainButtonStyle())
29. }
31. VStack(alignment: .leading) {
32. Text(landmark.park)
33. Text(landmark.state)
34. }
35. .font(.subheadline)
36. .foregroundColor(.secondary)
37. }
38. }
40. Divider()
42. Text("About \(landmark.name)")
43. .font(.title2)
44. Text(landmark.description)
45. }
46. .padding()
47. .frame(maxWidth: 700)
48. .offset(y: -50)
49. }
50. .navigationTitle(landmark.name)
51. }
52. }
54. struct LandmarkDetail_Previews: PreviewProvider {
55. static let modelData = ModelData()
57. static var previews: some View {
58. LandmarkDetail(landmark: modelData.landmarks[0])
59. .environmentObject(modelData)
60. .frame(width: 850, height: 700)
61. }
62. }