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 maybe 15 lines of code:
import SwiftUI
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundStyle(.tint)
Text("Hello, world!")
}
.padding()
}
}
#Preview {
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, VStack
and the code inside it shows a globe image with the text "Hello, world!" below it. That globe image comes from Apple's SF Symbols icon set, and there are thousands of these icons built right into iOS. Text views are simple pieces of static text that get drawn onto the screen, and will automatically wrap across multiple lines as needed.
Fifth, imageScale()
, foregroundStyle()
, and padding()
are methods being called on the image and VStack
. This is what SwiftUI 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 the globe image will be shown larger and in blue, and the whole body
property will return a padded text view, not just a regular text view.
Below the ContentView
struct you’ll see #Preview
with ContentView()
inside. This is a special piece of code that 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 15 Pro or an iPad. 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 “Preview paused”, and can press the refresh button 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 the refresh button.
SPONSORED AppSweep by Guardsquare helps developers automate the mobile app security testing process with fast, free scans. By using AppSweep’s actionable recommendations, developers can improve the security posture of their apps in accordance with security standards like OWASP.
Sponsor Hacking with Swift and reach the world's largest Swift community!
Link copied to your pasteboard.