Unlock the new UI building pose — SwiftUI
Note:
- The code, video and image materials are all from official documents
- Source code: official download address
I. Create SwiftUI Project
- With SwiftUI, make sure your Mac is running macOS 10.15 Beta, or above.
- Xcode is 11 beta or above.
Step 1
To open Xcode, click Create a new Xcode Project, or select File > New > Project.
Step 2
Select the Single View App template under the iOS menu and click Next.
Step 3
Enter “Landmarks” for the project name, select the Use SwiftUI check box, and Next, select the location to save the project on the Mac.
Step 4
In the file navigator on the left-hand side of Xcode, click select ContentView.swift.
By default, SwiftUI declares two structures. The first follows the View protocol, which describes the content and layout of the View. The second structure declares how the view is previewed.
/// ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello World")
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Copy the codePreview: ⬇ ️
Step 5
In the preview canvas, click the Resume button to display the preview.
If the Canvas is not visible, select Editor > Editor and Canvas to display it.
Step 6
In the body property of the code, change “Hello World” to “Hello SwiftUI”.
Change the properties of the Body inner view, and the preview will be updated in real time.
/// ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
/// "Here change to Hello SwiftUI! , can be displayed in real time in the preview.
Text("Hello SwiftUI!")
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Copy the codePreview: ⬇ ️
2. Custom text view
There are two ways to change the UI: 1. 2. Change the property inspector option. Either way, the code is kept up to date.
Next, you will customize the TextView using the property inspector.
Step 1
In the preview canvas, hold down the Command key and click on the “Hello SwiftUI” text to bring up the optional menu, click Inspect… This option opens the property inspector for the text view.
Note: Different views correspond to different property inspector contents.
Step 2
As shown, change the text to “Turtle Rock”, which is the first landmark that will be displayed in the application.
Step 3
Change the font to “Title” as shown here
Step 4
Add code for Text. Color (.green) to change the Text to green.
In SwiftUI, the dot method similar to.color(.green) is also called modifier (the name doesn’t matter), which returns the view itself, so like chained programming, you can keep adding so-called modifier to the end.
/// ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Turtle Rock")
.font(.title)
/// Step 4: Set the color to green
.color(.green)
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Copy the codePreview: ⬇ ️
🙏 code is the view, and the view is the code 🙏. Even when a property is changed or deleted using the property inspector, Xcode immediately updates the code to match. See step 5 ⬇️
Step 5
Hold down the Command key and click on the “Turtle Rock” text view, click Inspect… Go to the inspector, click the drop-down menu to the right of Color, and select “Inherited”. The effect is to return the Color of the text to the original black Color.
Step 6
At this point, Xcode automatically removes the.color(.green) line in response to the above change.
/// ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Turtle Rock")
.font(.title)
/// "Step 6: Xcode automatically removes the code that originally set the color in response to the property inspector's change."
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Copy the codePreview: ⬇ ️
Stacks layout View
In the previous section, we created a text view of a landmark name, and then we went on to add a text view that contains details about that landmark, such as the name of the site’s famous park and state. When creating a SwiftUI view, we can describe its content, layout, and behavior in the body property of the view, but only a single view is returned within the body. We can combine multiple views into a Stack.
HStack: can be understood as a container for storing views, thrown into the View by the Stack of the manipulation, manipulation of the View Horizontal row, vertical row and row from back to front, etc. VStack: Vertical Stack, Vertical Stack
This section uses Stack to do two things: 1. Two text views for the name of the park and the name of the state. 2. The text view of the landmark name is placed 1 above, as shown
The property inspector can be expanded in the preview canvas as well as in code:
Step 1
Hold down the Commond key and click on the Text(“Turtle Rock”) line to select Embed in VStack.
Next, drag a text view to add to the VStack.
Step 2
Click the + button in the upper right corner of Xcode, and drag the Text view to Turtle Rock’s entire Text view in your code.
Step 3
Replace the text of the text view dragged in with “Joshua Tree National Park”.
/// ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("Turtle Rock")
.font(.title)
/// "Step 3: Drag it in and change the text."
Text("Joshua Tree National Park")
}
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Copy the codePreview: ⬇ ️
Customize the location to match the desired layout.
Step 4
Set the font to “.subheadline”.
/// ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Text("Turtle Rock")
.font(.title)
Text("Joshua Tree National Park"/ / /"Step 4: Set the font to subheadline"
.font(.subheadline)
}
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Copy the codePreview: ⬇ ️
Step 5
Set the VStack alignment to left.
By default, the VStack is aligned along the central axis of the view.
/// ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) { // "Step 5: Set alignment to Left"
Text("Turtle Rock")
.font(.title)
Text("Joshua Tree National Park")
.font(.subheadline)
}
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Copy the codePreview: ⬇ ️
Next, add another text view to the right of the “Joshua Tree National Park” text.
Step 6
Open the property inspector for “Joshua Tree National Park” and select Embed in HStack.
Step 7
Change the text to “California”, and then set the font to “subheadline”.
/// ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack {
Text("Joshua Tree National Park")
.font(.subheadline)
/// "Step 7: Load the HStack with the previous Text and set the Text and font."
Text("California")
.font(.subheadline)
}
}
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Copy the codePreview: ⬇ ️
Step 8
To lay out the view across the entire screen width, insert Spacer() as follows.
By default, the width of the text content determines the area of the text View, and Spacer() is used to spread out all views in the current Stack so that the views take full advantage of the Stack.
/// ContentView.swift
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(alignment: .leading) {
Text("Turtle Rock")
.font(.title)
HStack {
Text("Joshua Tree National Park")
.font(.subheadline)
Spacer() // "Step 8: Add space"
Text("California")
.font(.subheadline)
}
}
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Copy the codePreview: ⬇ ️
Step 9
Finally, use the.padding() method to give the entire VStack some breathing room.
/// ContentView.swift
import SwiftUI
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() // "Step 9: Set the default inner margin so that the VStack inner view starting point is no longer too close to the edge."
}
}
struct ContentView_Preview: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Copy the codePreview: ⬇ ️
Create a custom image
Once you’ve set up the various text views for the landmark names and details, take a look at the illustration. Instead of adding new code to the file above, let’s find another place to implement an image View with a mask, border, and shadow effect.
Step 1
Find “Turtlerock. PNG” in the project’s Resources folder and drag it to the “AppIcon” location in the “Resources” directory.
Next, create a new “.swift” file for the custom image view.
Step 2
Select File > New > File to open the template selector, select SwiftUI View under the User Interface category, and click Next. Name the file “circleimage.swift” and click Create to complete the creation.
You can insert images and modify their display to match the desired design.
Step 3
Initialize the Image with the Image(_:) method, replacing the default Text view.
/// CircleImage.swift
import SwiftUI
struct CircleImage: View {
var body: some View {
/// "Step 3"
Image("turtlerock")
}
}
struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
Copy the codePreview: ⬇ ️
Step 4
Use the.clipShape(Circle()) method to Circle the image.
Circle(), as a Circle, can be used as a mask, or you can fill the Circle with color to use as a separate circular view.
/// CircleImage.swift
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock"/ / /"Step 4: Make it round"
.clipShape(Circle())
}
}
struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
Copy the codePreview: ⬇ ️
Step 5
Create a gray circle as the border and then place it over the round image above.
/// CircleImage.swift
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
/// "Step 5: Cover a circle, gray, with a width of 4"
.overlay(
Circle().stroke(Color.gray, lineWidth: 4))
}
}
struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
Copy the codePreview: ⬇ ️
Step 6
Next, add a shadow with a radius of 10.
/// CircleImage.swift
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.gray, lineWidth: 4))
/// "Step 6: Set shadows"
.shadow(radius: 10)
}
}
struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
Copy the codePreview: ⬇ ️
Step 7
Switch the border color in Step 5 to white and finish.
/// CircleImage.swift
import SwiftUI
struct CircleImage: View {
var body: some View {
Image("turtlerock")
.clipShape(Circle())
.overlay(
Circle().stroke(Color.white, lineWidth: 4)) // "Step 7: Switch to white"
.shadow(radius: 10)
}
}
struct CircleImage_Preview: PreviewProvider {
static var previews: some View {
CircleImage()
}
}
Copy the codePreview: ⬇ ️
