SwiftUI官方教程（五）

5. 同時使用 UIKit 和 SwiftUI

至此，我們已准備好創建 map view 了，接下來使用 MapKit 中的 MKMapView 類來渲染地圖。

在 SwiftUI 中使用 UIView 子類，需要將其他 view 包裝在遵循 UIViewRepresentable 協議的 SwiftUI view 中。 SwiftUI 包含了和 WatchKit 、 AppKit view 類似的協議。

首先，我們創建一個可以呈現 MKMapView 的自定義 view。

SwiftUI教程

5.1 選擇 File > New > File ，選擇 iOS 平台，選擇 SwiftUI View 模板，然后單擊 Next 。將新文件命名為 MapView.swift ，然后單擊 Create 。

5.2 給 MapKit 添加 import 語句，聲明 MapView 類型遵循 UIViewRepresentable 。

可以忽略 Xcode 的錯誤，接下來的幾步會解決這些問題。

SwiftUI教程

MapView.swift

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
    var body: some View {
        Text("Hello World")
    }
}

struct MapView_Preview: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

UIViewRepresentable 協議需要實現兩個方法： makeUIView(context:) 用來創建一個 MKMapView， updateUIView(_:context:) 用來配置 view 並響應修改。

5.3 用 makeUIView(context:) 方法替換 body 屬性，該方法創建並返回一個空的 MKMapView。

MapView.swift

import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
	
	typealias UIViewType = MKMapView

    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        return MKMapView(frame: .zero)
    }
}

struct MapView_Preview: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

5.4 實現 updateUIView(_:context:) 方法，給 map view 設置坐標，使其在 Turtle Rock 上居中。

MapView.swift

import SwiftUI
import MapKit

struct MapView : UIViewRepresentable {
    
    typealias UIViewType = MKMapView
    
    func makeUIView(context: UIViewRepresentableContext<MapView>) -> MKMapView {
        return MKMapView(frame: .zero)
    }
    
    func updateUIView(_ uiView: MKMapView, context: UIViewRepresentableContext<MapView>) {
        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)
        uiView.setRegion(region, animated: true)
    }
}

struct MapView_Preview: PreviewProvider {
    static var previews: some View {
        MapView()
    }
}

當預覽處於 static mode 時僅顯示 SwiftUI view 。因為 MKMapView 是一個 UIView 的子類，所以需要切換到實時模式才能看到地圖。

SwiftUI教程

5.5 單擊 Live Preview 可將預覽切換為實時模式，有時也會用到 Try Again 或 Resume 按鈕。

片刻之后，你會看到 Joshua Tree National Park 的地圖，這是 Turtle Rock 的故鄉。

 

SwiftUI 教程（四）