セクション 107

設定シーンでお好みの設定を追加

ユーザは、標準の [Preference(お好みの設定)] メニュー項目を使用して macOS アプリの設定が調整できるのを期待しています。[Setting(設定)] シーンを追加して、MacLandmarks にお好みの設定を追加して下さい。シーンのビューは、MapView の初期ズームレベルを制御するために使用するお好みの設定ウィンドウのコンテンツを定義します。@AppStorage プロパティラッパーを使用して、値をマップビューに伝達し、それを永続的に保存します。

まず、初期ズームを近、中、遠の 3 つのレベルのいずれか1つに設定するコントロールを MapView に追加します。

ステップ 1

MapView.swift 内で、Zoom 列挙体を追加してズームレベルを特徴付けます。

MapView.swift

1. import SwiftUI
2. import MapKit
4. struct MapView: View {
5. var coordinate: CLLocationCoordinate2D
6. @State private var region = MKCoordinateRegion()
enum Zoom: String, CaseIterable, Identifiable {
case near = "Near"
case medium = "Medium"
case far = "Far"
var id: Zoom {
return self
}
}
9. var body: some View {
10. Map(coordinateRegion: $region)
11. .onAppear {
12. setRegion(coordinate)
13. }
14. }
16. private func setRegion(_ coordinate: CLLocationCoordinate2D) {
17. region = MKCoordinateRegion(
18. center: coordinate,
19. span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
20. )
21. }
22. }
24. struct MapView_Previews: PreviewProvider {
25. static var previews: some View {
26. MapView(coordinate: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868))
27. }
28. }

ステップ 2

デフォルトで medium のズームレベルをとる zoom と呼ばれる @AppStorage プロパティを追加します。

SwiftUI が依存する基本的なメカニズムであるため、UserDefaults にアイテムを保存するときと同じように、パラメータを一意に識別する保存用キーを使用します。

MapView.swift

6. @State private var region = MKCoordinateRegion()
@AppStorage("MapView.zoom")
private var zoom: Zoom = .medium
8. enum Zoom: String, CaseIterable, Identifiable {
9. case near = "Near"

ステップ 3

region プロパティの作成に使用される経度と緯度のデルタを、ズームに依存する値に変更します。

MapView.swift

16. var id: Zoom {
17. return self
18. }
19. }
var delta: CLLocationDegrees {
switch zoom {
case .near: return 0.02
case .medium: return 0.2
case .far: return 2
}
}
21. var body: some View {
22. Map(coordinateRegion: $region)
23. .onAppear {
24. setRegion(coordinate)
25. }
26. }
28. private func setRegion(_ coordinate: CLLocationCoordinate2D) {
29. region = MKCoordinateRegion(
30. center: coordinate,
span: MKCoordinateSpan(latitudeDelta: delta, longitudeDelta: delta)
31. )
32. }
33. }

Delta が変更されるたびに SwiftUI がマップを更新するようにするには、region の計算方法と適用方法を変更しなければなりません。

ステップ 4

region 状態変数、setRegion メソッド、および map の onAppear 修飾子を、定数拘束として Map イニシャライザに渡す計算された region プロパティに置き換えます。

MapView.swift

28. var body: some View {
Map(coordinateRegion: .constant(region))
29. }
var region: MKCoordinateRegion {
MKCoordinateRegion(
31. center: coordinate,
32. span: MKCoordinateSpan(latitudeDelta: delta, longitudeDelta: delta)
33. )
34. }
35. }

次に、保存されている zoom の値を制御する Setting のシーンを作成します。

ステップ 5

macOS アプリのみをターゲットとする LandmarkSettings という新しい SwiftUI ビューを作成します。

LandmarkSettings.swift

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

ステップ 6

マップビューで使用したものと同じキーを使用する @AppStorage プロパティを追加します。

LandmarkSettings.swift

1. import SwiftUI
3. struct LandmarkSettings: View {
@AppStorage("MapView.zoom")
private var zoom: MapView.Zoom = .medium
4. var body: some View {
5. Text("Hello, World!")
6. }
7. }

ステップ 7

結束を介して zoom の値をコントロールする Picker を追加します。

通常、Form を使用して、設定ビューにコントロールを配置して下さい。

プレビューその 1

LandmarkSettings.swift

5. private var zoom: MapView.Zoom = .medium
7. var body: some View {
Form {
Picker("Map Zoom:", selection: $zoom) {
ForEach(MapView.Zoom.allCases) { level in
Text(level.rawValue)
}
}
.pickerStyle(InlinePickerStyle())
}
.frame(width: 300)
.navigationTitle("Landmark Settings")
.padding(80)
8. }
9. }

ステップ 8

LandmarksApp.swift 内で、Setting のシーンをアプリに macOS の場合に限り追加します。

LandmarksApp.swift

1. import SwiftUI
3. @main
4. struct LandmarksApp: App {
5. @StateObject private var modelData = ModelData()
7. var body: some Scene {
8. let mainWindow = WindowGroup {
9. ContentView()
10. .environmentObject(modelData)
11. }
13. #if os(macOS)
14. mainWindow
15. .commands {
16. LandmarkCommands()
17. }
18. #else
19. mainWindow
20. #endif
22. #if os(watchOS)
23. WKNotificationScene(controller: NotificationController.self, category: "LandmarkNear")
24. #endif
#if os(macOS)
Settings {
LandmarkSettings()
}
#endif
25. }
26. }

ステップ 9

アプリを実行し、お好みの設定を設定してみてください。

zoom のレベルを変更するたびにマップが更新されることに注意してください。

あなたの理解度をチェックしてください

質問 1

ランドマークのアプリがモデル内ではなくビュー内で filteredLandmarks 配列を定義するのはなぜですか？

質問 2

次のコードでは、ピッカー選択型はどのプロトコルに準拠しなければなりませんか？

質問 3

次の例のうち、selectedLandmark の結束をリストの現在選択されているアイテムに正しく接続しているのはどれですか？

質問 4

macOS アプリのトップレベルメニューにアイテムを追加するにはどうすればよいですか？