Swift UI のチュートリアルをする - Part 3: MapKit とか

Part 1 はこちら

www.utakata.work

Imageを表示する

突然 Resources フォルダとか出てくるけど、多分フォルダを作って追加しろということなのだろうか。

        Image("turtlerock")
            .clipShape(Circle())

とかすると丸く写真が切り取られてこれは便利だ。

stroke で輪郭を書ける。shadow radius で丸く影をつけられる。

UIKit を使う

MapKit

分かりづらいが、 MapKit ってのが UIKit って言われてるやつらのうちの一つということだろう。

import MapKit して struct MapView: UIViewRepresentable { としているが、僕は ContentView という名前のままでやった。

• makeUIView ってのを定義してやる
  • 今回は単に空の MKMapView を返す
• updateUIView ってのを定義してやる
  • Turtle Rock がマップの中心に来るようにしてやる

import SwiftUI
import MapKit

struct ContentView: UIViewRepresentable {
    func makeUIView(context: Context) -> MKMapView {
        MKMapView(frame: .zero)
    }
    
    func updateUIView(_ view: MKMapView, context: Context) {
        let coordinate = CLLocationCoordinate2D(
            latitude: 34.011286, longitude: -116.166868)
        let span = MKCoordinateSpan(latitudeDelta: 2.0, longitudeDelta: 2.0)
        let region = MKCoordinateRegion(center: coordinate, span: span)
        view.setRegion(region, animated: true)
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

これらを合体させる

いままでやったのを合体させて一つのviewを作るのが Section 6 Compose the Detail View。

ここで新しく offset とかがでて、map と Image を重ねるってのが出てきている。

            MapView()
                .frame(height: 300)

            CircleImage()
                .offset(y: -130)
                .padding(.bottom, -130)

次回

次回は SwiftUI Essentials Building Lists and Navigation をやっていきます。

https://developer.apple.com/tutorials/swiftui/building-lists-and-navigation