XCode 12.5 日本語化計画：Swift Tutorials

セクション 105

他のフレームワークから SwiftUI ビューを使用




次に、与えられた座標を中心とするマップを作成します。MapKit の Map ビューを使用して、マップをレンダリングできます。










まず、地図を管理するための新しいカスタムビューを作成して下さい。





ステップ 1

[File(ファイル)] > [New(新規)] > [File(ファイル)] を選択し、プラットフォームとして iOS を選択し、[SwiftUI ビュー] テンプレートを選択して、[Next(次へ)] をクリックします。新しいファイルに MapView.swift という名前を付け、[Create(作成)] をクリックします。











ステップ 2

MapKit の import 文を追加します。




---




SwiftUI と他の特定のフレームワークを同じファイルにインポートすると、そのフレームワークによって提供される SwiftUI 固有の機能にアクセスできます。





    MapView.swift



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




ステップ 3

マップの地域情報を保持するプライベート状態変数を作成します。




---




@State 属性を使用して、複数のビューから変更できるアプリ内のデータの真実のソースを確立します。SwiftUI は、基盤となる記憶媒体を管理し、値に応じてビューを自動的に更新します。





    MapView.swift



1. import SwiftUI
2. import MapKit
4. struct MapView: View {
@State private var region = MKCoordinateRegion(
center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
)
5. var body: some View {
6. Text("Hello, World!")
7. }
8. }
10. struct MapView_Previews: PreviewProvider {
11. static var previews: some View {
12. MapView()
13. }
14. }




ステップ 4

デフォルトの Text ビューを、領域に結束している Map ビューに置き換えます。




---




状態変数の前に $ を付けることで、基礎となる値への参照のような結束を渡します。ユーザがマップを操作すると、マップは領域の値を更新して、ユーザインターフェースに現在表示されているマップの部分と一致させます。





    MapView.swift



6. center: CLLocationCoordinate2D(latitude: 34.011_286, longitude: -116.166_868),
7. span: MKCoordinateSpan(latitudeDelta: 0.2, longitudeDelta: 0.2)
8. )
10. var body: some View {
Map(coordinateRegion: $region)
11. }
12. }




プレビューが静的なモードの場合、ネイティブの SwiftUI ビューのみが完全にレンダリングされます。Map ビューの場合、レンダリングを表示するにはライブプレビューに切り替える必要があります。





ステップ 5

ライブプレビューをクリックして、プレビューをライブモードに切り替えます。プレビューの上にある [Try Again(再試行)] または [Resume(再開)] をクリックする必要がある場合があります。




---




すぐに、Turtle Rock を中心としたマップが表示されます。ライブプレビューでマップを操作して少しズームアウトし、周辺地域を確認できます。















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