When you create a new SwiftUI app, you’ll get a selection of files and maybe 20 lines of code in total.
Inside Xcode you should see the following files in the space on the left, which is called the project navigator:
Tip: Depending on Xcode’s configuration, you may or may not see file extensions in your project navigator. You can control this by going to Xcode’s preferences, choosing the General tab, then adjusting the File Extensions option.
All our work for this project will take place in ContentView.swift, which Xcode will already have opened for you. It has some comments at the top – those things marked with two slashes at the start – and they are ignored by Swift, so you can use them to add explanations about how your code works.
Below the comments are ten or so lines of code:
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello, world!")
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
Before we start writing our own code, it’s worth going over what all that does, because a couple of things will be new.
First, import SwiftUI
tells Swift that we want to use all the functionality given to us by the SwiftUI framework. Apple provides us with many frameworks for things like machine learning, audio playback, image processing, and more, so rather than assume our program wants to use everything ever we instead say which parts we want to use so they can be loaded.
Second, struct ContentView: View
creates a new struct called ContentView
, saying that it conforms to the View
protocol. View
comes from SwiftUI, and is the basic protocol that must be adopted by anything you want to draw on the screen – all text, buttons, images, and more are all views, including your own layouts that combine other views.
Third, var body: some View
defines a new computed property called body
, which has an interesting type: some View
. This means it will return something that conforms to the View
protocol, which is our layout. Behind the scenes this will actually result in a very complicated data type being returned based on all the things in our layout, but some View
means we don’t need to worry about that.
The View
protocol has only one requirement, which is that you have a computed property called body
that returns some View
. You can (and will) add more properties and methods to your view structs, but body
is the only thing that’s required.
Fourth, Text("Hello, world!")
creates a text view using the string “Hello, world!” Text views are simple pieces of static text that get drawn onto the screen, and will automatically wrap across multiple lines as needed.
Fifth, you’ll see the padding()
method is being called on the text view. This is what Swift calls a modifier, which are regular methods with one small difference: they always return a new view that contains both your original data, plus the extra modification you asked for. In our case that means body
will return a padded text view, not just a regular text view.
Below the ContentView
struct you’ll see a ContentView_Previews
struct, which conforms to the PreviewProvider
protocol. This piece of code won’t actually form part of your final app that goes to the App Store, but is instead specifically for Xcode to use so it can show a preview of your UI design alongside your code.
These previews use an Xcode feature called the canvas, which is usually visible directly to the right of your code. You can customize the preview code if you want, and they will only affect the way the canvas shows your layouts – it won’t change the actual app that gets run.
The canvas will automatically preview using one specific Apple device, such as the iPhone 13 Pro or an iPod touch. To change this, look at the top center of your Xcode window for the current device, then click on it and select an alternative. This will also affect how your code is run in the virtual iOS simulator later on.
Important: If you don’t see the canvas in your Xcode window, go to the Editor menu and select Canvas.
Very often you’ll find that an error in your code stops Xcode’s canvas from updating – you’ll see something like “Automatic preview updating paused”, and can press Resume to fix it. As you’ll be doing this a lot, let me recommend an important shortcut: Option+Cmd+P does the same as clicking Resume.
SAVE 50% To celebrate WWDC22, all our books and bundles are half price, so you can take your Swift knowledge further without spending big! Get the Swift Power Pack to build your iOS career faster, get the Swift Platform Pack to builds apps for macOS, watchOS, and beyond, or get the Swift Plus Pack to learn advanced design patterns, testing skills, and more.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Link copied to your pasteboard.