How to create and combine views in SwiftUI

This tutorial follows the Apple Developer demo app for creating and combining views in SwiftUI. Let’s play with SwiftUI.

Create a new SwiftUI Project

Open Xcode, and select Create a new Xcode project.

Under iOS, select Single View App and click Next button.

In the next window, give Product Name as SwiftUITutorial. Make sure SwiftUI is selected in User Interface dropdown. Click Next.

After Next, select the project location and click on Create button.

SwiftUI Editor Window

Xcode will open below the SwiftUI Editor window like below. It will open ContentView.Swift file with Hello, World! text.

SwiftUI Preview Pane

Click on Resume button in the Preview Pane on the right side. It will build the app and show the preview of iPhone screen with Hello, World! text.

SwiftUI Hot-Reloading

Hot-Reloading is new and exciting feature of SwiftUI. Now, your preview refreshes as soon as you change UI code in the ContentView.Swift file.

Customize the Text View

You can directly customize the Text View from the Preview pane.

You can customize a view’s display by changing your code, or by using the inspector to discover what’s available and to help you write code.

As you build the Landmarks app, you can use any combination of editors: the source editor, the canvas, or the inspectors. Your code stays updated, regardless of which tool you use.

In the preview pane, Command-Click on the TextView and choose any attribute or inspect it.

Command - Click on TextView

Let’s change text and font of text in ContentView.Swift file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


import SwiftUI

struct ContentView: View {
     var body: some View {
         Text("Bear Mountain National Park")
             .font(.title)
     }
 }


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

Combine views using Stacks in SwiftUI

Note that, body property only returns a single view. You can combine and embed multiple views in stacks, which group views together horizontally, vertically, or back-to-front.

Command-click on text view and select Embed in VStack option.

Add another Text View by clicking on Plus button on right corner. Search Text and drag-and-drop on the editor window below existing TextView.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


import SwiftUI
struct ContentView: View {
     var body: some View {
         VStack {
             Text("Turtle Rock")
                 .font(.title)
             HStack {
                 Text("Bear Mountain National Park")
                     .font(.subheadline)
                 Spacer()
                 Text("New York")
                     .font(.subheadline)

             }
         }
     .padding()
     }
 }

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

Now, we need to add another Text view for the state in the same row. So, first, we need to choose Embed in HStack. Let’s command-click on Bear Mountain National Park and choose Embed in HStack option.

Add another Text View and place below Bear Mountain National Park text view. Replace text with New York and font with subheadline.

Add space between these two text views by adding Space() in between them.

Finally, add padding by using padding() property. Our code looks like this.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


import SwiftUI
 struct ContentView: View {
     var body: some View {
         VStack {
             Text("Turtle Rock")
                 .font(.title)
             HStack {
                 Text("Bear Mountain National Park")
                     .font(.subheadline)
                 Spacer()
                 Text("New York")
                     .font(.subheadline)
            }
         }
     .padding()
     }
 }

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

Create Image View in SwiftUI

With the name and location views all set, the next thing to do is to add an image for the landmark.

Instead of adding more code in this file, you’ll create a custom view that applies a mask, border, and drop shadow to the image.

Add an image to the project’s asset folder. I added park.jpg to asset folder.

Choose File > New > File to open the template selector again. In the User Interface section, click to select SwiftUI View and click Next. Name the file CircleImage.swift and click Create.

In CircleImage.swift file, replace text with image.

Add clipShape(), overlay & shadow property to Image object.So, our final code and preview looks like below.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


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

struct CircleImage_Previews: PreviewProvider {
     static var previews: some View {
         CircleImage()
     }
 }

Let’s create another view in SwiftUI.

Create Map View in SwfitUI

Create another view MapView1.swift and import MapKit in this view. Implement makeUIView and updateUIView functions in this view.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19


import SwiftUI
 import MapKit

struct MapView1: UIViewRepresentable {
     var coordinate: CLLocationCoordinate2D
     func makeUIView(context: UIViewRepresentableContext<MapView1>) -> MKMapView {
         MKMapView(frame: .zero)
     }
     func updateUIView(_ view: MKMapView, context: Context) {
         let span = MKCoordinateSpan(latitudeDelta: 0.02, longitudeDelta: 0.02)
         let region = MKCoordinateRegion(center: coordinate, span: span)
         view.setRegion(region, animated: true)
     }
 }
 struct MapView1_Previews: PreviewProvider {
     static var previews: some View {
         MapView1(coordinate: landmarkData[0].locationCoordinate)
     }
 }

Combining the Views

After creating all the necessary views, it’s time to combine all views altogether.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31


import SwiftUI
 struct ContentView: View {
     var body: some View {
         VStack {
             MapView1()
                 .edgesIgnoringSafeArea(.top)
                 .frame(height: 300)
             CircleImage()
                 .offset(y: -130)
                 .padding(.bottom, -130)
             VStack(alignment: .leading) {
                 Text("Turtle Rock")
                     .font(.title)
                 HStack {
                     Text("Bear Mountain National Park")
                         .font(.subheadline)
                     Spacer()
                     Text("New York")
                         .font(.subheadline)
                 }
             }
             .padding()
             Spacer()
         }
     }
 }
 struct ContentView_Previews: PreviewProvider {
     static var previews: some View {
         ContentView()
     }
 }

combining the views in swift

Reference

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