Using UIKit and SwiftUI Views together

At this point, you have learned how to create text views and image views for your app. Now let's see how to add a view that displays a map. When using storyboards, all you needed to do was to drag in a map view from the Object library to a view in storyboard. SwiftUI does not have a native map view but you can use the same map view that you used in storyboard to render the map. In fact, you can use any view subclass within SwiftUI by wrapping them in a SwiftUI view that conforms to the UIViewRepresentable protocol. You'll create a new custom view that can present a map view now. Do the following steps:

  1. Choose File | New | File to open the template selector.
  2. iOS should already be selected. In the User Interface section, click to select SwiftUI View and click Next.
  3. Name the new file MapView.swift and click Create.
  4. In MapView.swift, import MapKit, and make MapView conform to UIViewRepresentable as shown. Don't worry about the error, you'll fix that in the next few steps:
import SwiftUI
import MapKit

struct MapView: UIViewRepresentable {
var body: some View {
Text("Hello World")
}
}
  1. You need two methods to conform to UIViewRepresentable, a makeUIView(context:) method that creates an MKMapView and an updateUIView(_:context:) method that configures it and responds to any changes. 

Modify your code as shown to replace the body property with a makeUIView(context:) method that creates and returns an empty MKMapView:

struct MapView: UIViewRepresentable {
func makeUIView(context: Context) -> MKMapView {
MKMapView(frame: .zero)
}
}
  1. Modify your code as shown to add an updateUIView(_:context:) method just below the makeUIView(context:) method. This sets the map view's region to center the map on The Tap Trailhouse. Note that this is the same method you used to make a region for the Map screen in the Let's Eat app:
func updateUIView(_ view: MKMapView, context: Context) {
let coordinate = CLLocationCoordinate2D(
latitude: 42.360847, longitude: -71.056819)
let span = MKCoordinateSpan(latitudeDelta: 0.05,
longitudeDelta: 0.05)
let region = MKCoordinateRegion(center: coordinate,
span: span)
view.setRegion(region, animated: true)
}
  1. The error is now gone, and a blank view appears in the Preview area. This is because the Preview area is in static mode and only renders SwiftUI views. You'll need to turn on live preview to see the map. Click the Live Preview button as shown:

  1. You should see a map of Boston centered on The Tap Trailhouse in a moment:

If it doesn't work, check your internet connection, and click the Try Again or Resume buttons above your preview.

You've created a map view that shows the restaurant's location. Now, let's see how to combine all the views you have created to make the complete Restaurant Detail screen in the next section.

..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset
3.140.195.225