SwiftUI combat two: a combined view and map view

System: Mac OS 10.15.1, XCode 11.2.1, swift 5.0
Writing Time: 2019-11-29

Explanation

This example contains the elements: a combination of longitudinal container VStack, lateral composition container HStack, UIImage, Map. Meaning of the expression of this project is to map latitude and longitude given a landmark display graphic description.
Details please see the official website tutorial

Create Project

Project name: CreatingAndCombiningViews
the User Interface: SwiftUI

preview below (shortcut: Command + Option + p):

Plus a combination of View

The goal is the text read as follows:
vStack: longitudinally divided between
HStack: two transversely divided, the middle space Spacer

ContentView.swiftmodified struct ContentViewas follows:

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading) {
            Text("Turtle Rock")
                .font(.title)
            HStack {
                Text("Joshua Tree National Park")
                    .font(.subheadline)
                Spacer()
                Text("California")
                    .font(.subheadline)
            }
        }
        .padding()
        
            
    }
}

Preview:

Customize a round Image

Custom renderings broken down as follows:

Add a picture to the resource file Assets.xcassets

New SwiftUI View, named CircleImage.swift

code to achieve the following

struct CircleImage: View {
    var body: some View {
        Image("turtlerock")
            .clipShape(Circle())
            .overlay(Circle().stroke(Color.white, lineWidth: 4)
                .shadow(radius: 10))
    }
}

Resolution:

1. clipShape : Cut circular
2. overlay : covered with a layer
3. . Circle () Stroke : White circular border
4. Shadow : shaded

Preview:

Creating MKMapView

To achieve results for the positioning of a latitude and longitude to the map

to create a SwiftUIView, named MapView.swift

import SwiftUI
import MapKit

struct MapView: 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)
    }
}

Analysis:
It should be introduced import MapKit, following agreement UIViewRepresentableto achieve two delegate methods must be implemented

1. makeUIView(context:) Means creating MKMapView
2. updateUIView(_:context:) MapView shows an arrangement of latitude and longitude, display size, as well as updates to the map changes.

You need to click the live preview to see the map

Image combination of circular and MapView

Switched ContentView, modified as follows:

struct ContentView: View {
    var body: some View {
        VStack {
            MapView()
            .edgesIgnoringSafeArea(.top)
            .frame(height: 300)
            
            CircleImage()
                .offset(y: -130).padding(.bottom, -130)
            
            VStack(alignment: .leading) {
                Text("Turtle Rock")
                    .font(.title)
                HStack {
                    Text("Joshua Tree National Park")
                        .font(.subheadline)
                    Spacer()
                    Text("California")
                        .font(.subheadline)
                }
            }
            .padding()
        
            Spacer()
        }
    }
}

Resolution:

1. Increase MapView(), directly above the top of the fringe to the .edgesIgnoringSafeArea(.top)set height.frame(height: 300)
2. Increase CircleImage()and set the online shift .offset(y: -130), so immediately following the text view is also offset online.padding(.bottom, -130)
3. The lowest increase in blank Spacer()so that the map, round Image, text compact together.

Live Preview are as follows:

Download

https://github.com/zgpeace/CreatingAndCombiningViews

to sum up

More examples of the venue's official website official website SwiftUI Tutorial

reference

https://developer.apple.com/tutorials/swiftui/creating-and-combining-views

https://developer.apple.com/tutorials/swiftui/tutorials