SwiftUI Visual Editor

SwiftUI Visual Editor

Learn Xcode 12's new visual editing and inspector tools

In this section, you'll learn how to use the visual editor. Instead of making changes via code, we'll be using the Inspector to customize the elements. You'll also learn how to duplicate the preview and change it according to your preference.


Downloads

To follow this course, you can download the source file, which will help you compare your progress.


Getting Started

Open the project we created in the last section and resume the preview. Now, change the device to iOS 11 Pro and let's get started!
swiftui-section2-1

Attributes Inspector

For now, we'll not be touching the code. Let's first head over to the Inspector and customize the appearance of the elements. Please make sure that you're on the 4th tab which is the Attributes Inspector.
swiftui-section2-2

Customize Appearance

In this step, we'll add styling to the text element.

  • To edit it, double-click on the element. This'll allow you to change the text. Once you do change it, you'll notice the changes appearing in the code as well as in the Inspector
  • Next, in the Inspector, set the font-size to either Body or Inherited. Set the font-weight to Bold
swiftui-section2-3

Note: To learn more about dynamic type size, head over to the documentation.


Text

Let's add in another text layer. Duplicate the first layer by selecting it and then, press Cmd + D. This automatically creates a VStack for the layers.


  • Change the text of the 2nd layer to '20 sections'
  • To align the text layers to the left, select the VStack and in Inspector, click on left align
  • Select the layers simultaneously and in Padding, remove the default padding by clicking on the blue button
  • For the 2nd text layer, set font-size to Footnote and remove bold

swiftui-section2-4

Spacing

Since, we don't want to set manual padding for our elements, we'll be using Spacing. Spacing refers to the gap between elements in a stack. Select the VStack and in the Inspector, set the Spacing to 4.
swiftui-section2-5

Adding Modifiers

You can add modifiers directly in the Inspector or by clicking on the '+' icon in the top bar. In the current version of beta, adding these directly from the Inspector isn't working for some reason.

  • Click the '+' icon in the top bar. This is known as the insert menu. Please make sure to have the VStack selected
  • In Modifier, search for 'background'. Drag and drop 'background' to the Inspector
  • After you add this, somehow it enables you to add directly via the Inspector now. In the 'Add Modifier' input textbox, type in 'corner radius' and add it. Set the corner radius to 20
  • In Padding, click the circle on the left. This adds a default padding
  • Lastly, add in the 'Shadow' modifier in the same manner we added the Corner Radius one
swiftui-section2-6

Image

Please make sure to download the Assets provided with the course because we'll be using an image from the Assets Catalog. In this step, we'll be adding an image to the VStack.


  • Open the Insert Menu. In Images, drag and drop 'Illustration 1' at the top of the text layers
  • To resize the image, add in a modifier called 'Resizable'. Make sure to select the image
  • Let's add in another modifier called 'Aspect Ratio' to ensure that the image has the right ratio
  • In Aspect Ratio, set Content Mode to Fit instead

swiftui-section2-7

Duplicating Preview

XCode 12 gives you the ability to duplicate previews. Simply, click on the last option above the preview to duplicate it. Each particular preview provides you the option to change the device, the layout, the color scheme and the accessibility options. Here, we'll select Dark Mode.
swiftui-section2-8

Color

It's good practice to only set custom colors when you've a custom background. Here, since we've a blue background, we can set the font color for both the text layers to white in the Inspector irrespective of whether light mode or dark mode is activated.
swiftui-section2-9

Change Preview

Let's change the preview.
  • Select the second preview and head over to the Inspector
  • In Inspector, set the width as well as the height in Layout to 200
swiftui-section2-10

Spacer

You'll notice that the layout needs fixing since there's a bit of a gap in the corners. We'd also like the card to fit the screen vertically. To do this, we'll be using Spacer. A Spacer is an element that pushes the container to take the full space.

  • Open the Insert Menu and in Controls, look for 'spacer'
  • Drag and drop the spacer on top of the image. The image should take up the full length vertically now
  • In the second preview, do the same. Drag and drop the Spacer to the left of the image
  • To align the image to the center, press Cmd + Shift + L and then, drag & drop the Spacer to the right side of the image

swiftui-section2-11
Note: Please make sure to remove the blue highlights from the values.

Resources and Code

Provided below is the code for what we created in this section. You can also watch this video to learn more about visually editing SwiftUI views.

VStack(alignment: .leading, spacing: 4.0) {
Spacer()
HStack {
Spacer()
Image("Illustration 1")
.resizable()
.aspectRatio(contentMode: .fit)
Spacer()
}

Text("SwiftUI for iOS 14").fontWeight(.bold).foregroundColor(Color.white)
Text("20 Sections").font(.footnote).foregroundColor(Color.white)
}
.padding(.all)
.background(Color.blue)
.cornerRadius(20.0)
.shadow(radius: 10)
Preview
Group {
ContentView()
ContentView()
.previewLayout(.fixed(width: 200.0, height: 200.0))
.preferredColorScheme(.dark)
}