How to create and combine views in SwiftUI
Photo: Google

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.

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.

SwiftUI Project Window

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 Editor

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 Preview

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.

Inspect TextView in SwiftUI
Command – Click on TextView

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

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.

Embed in VStack swiftUI

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.

After placing TextView, your code and preview looks like this.

TextView in Swift

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.

Embed in HStack

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.

Padding() Spacer() in SwiftUI
Spacer() & padding() in SwiftUI

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.

Assets folder in SwiftUI

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.

Circle Image

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.

Combining the Views

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

combining the views in swift


Further Reading

Object Mutation In JavaScript

Create A React App With Webpack And Babel

What Is JavaScript Callback And How Does It Work?


Hi, I am Adesh. I am a senior software engineer having more than 12 years of software development experience. I am a full stack developer and interested in writing the technical post on programming. I am currently working in New York City area.

This Post Has One Comment

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.