猫でもわかるWebプログラミング

試行錯誤しながらエンジニア(プログラマー)として働く猫のブログ。技術的な話や、働き方の話、読書録とか、試行錯誤している日常の話。

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

f:id:yoshiki_utakata:20191225120619p:plain

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