Your First iOS App: Getting Started with SwiftUI
I want to explain an important concept we’ll be using throughout this course: “View”. This is one of those cases where it’s better to show you first and then tell you more afterwards. Here’s what the Bullseye screen will look like at the end of this episode, but with all of the visible views highlighted and labeled. Note that some of the views are invisible, and I’ll point them out to you soon.
A view is anything that gets drawn on the screen. In this screenshot, it seems that just about everything is a view: the text items, the buttons, and the slider are all views. In fact, every user interface control is a view. Some views can act as containers for other views. The biggest view in the screenshot is one of those. It’s the view representing the screen itself, and it contains all the other views on the screen: the text items, the buttons, and the slider.
There are different types of views in SwiftUI. What makes each type different is a combination of what they look like and what they do. Here are the views that you’ll be using in this episode.
First there’s text. Text is a view that displays one or more lines of read-only text. The “Put the bullseye as close as you can to” message is a text view, as are the various other labels in the app. Even the text “Hit Me” that goes inside the button is technically a text view.
Second there’s Slider. The slider lets a user enter a value by sliding a control (which is called a thumb) along a straight line track where one end represents a minimum value and the other end represents a maximum value. I want to point out that in most apps you wouldn’t make the user enter a precise number value like this using a slider because that could be kind of frustrating. However, for a game like Bullseye, the slider makes the game challenging. Which is a good thing. After all, we don’t want to make it too easy.
Third there’s Button. Button is a view that performs an action when you tap on it. You can put any view you want inside a button. Here we have a text view that says “hit me” inside the button.
Fourth, there are Stacks. They come in three flavors: V for Vertical, H for Horizontal, and Z for Depth. Stacks act as containers for other views and they’re your basic layout tool in SwiftUI. Unlike Text and Button views, stacks are invisible by default. The views a stack contains are called its children. And a stack’s job is to arrange its children along the axis of the stack.
So a vertical stack, or VStack for short, stacks its child views on top of each other vertically. We’ll be using a VStack to stack up the four blue children views you can see here: the instructions, the target label, the slider and its labels, and the Hit Me Button. A horizontal stack, or HStack, works just like a VStack, it just arranges its children next to each other horizontally instead of vertically. We’ll be using an HStack to arrange the slider and its two labels in the order you see here.
Since SwiftUI creates user interfaces in code, this episode will give you a little preview of what it’s like to write code in Swift. At this point in the course, you won’t be writing code really, you’ll just be looking at the automatically generated code or tweaking it slightly. So you might not understand every single line right away or what all the strange syntax means, especially if you’ve never done computer programming or Swift development before. Again, that’s okay. What’s important at this stage of the course is that you get the general idea of what’s going on. It’s all about learning via repetition.
You can either continue on from your own project or use the starter project in the materials for this episode. Every episode will have a starter and final project, so if you get stuck or mess something up, you can check your own project against mine. You may also find reference images in here, like this one.
Open up ContentView again, and one thing I’m going to do real quick is change this code to use my preferred indentation. I’m going to do this a lot in this course, so I will show you how to do it, too. Open up Xcode Settings and go to Text Editing -> Indentation. Here you can set up your own preferred indentation. Mine is set to two spaces. I think the default is four spaces. I’ll close that up.
And to show you how that works, when I put my cursor into the code editor, select everything with Command-A, then press Control-I, all of the code will re-indent. You might think that Xcode would automatically indent the template code based on your preferences, but it doesn’t. Control-I is also a handy shortcut to know if your indenting gets out of control. It will just clean that right up for you. You’ll see why that’s extra handy once you’re more familiar with SwiftUI. I’m also going to close this Inspector panel on the right, just to give us a little more room. And start the preview back up with the Resume button.
Okay, to keep an eye on what we’re trying to do, I’ve got an image of the basic layout we’re trying to create here. It’s the same thing we looked at in Figma. So let’s just work from top to bottom.
So at the top, we need some text that says “Put the bullseye as close as you can to”. We already have a text view here, but we don’t need any of this other code right now. So delete everything except for this Text("Hello. Xcode!"). Hey, and now you can try out Control-I. Put your cursor on the same line as the text view and re-indent with Control-I.
Now, we already know how to change this text to say what we want. I’m going to update it in the code editor to say "PUT THE BULLSEYE AS CLOSE AS YOU CAN TO". You can also put emojis in your text if you want. So just for fun, I’m going to add some to the beginning of this text. If you hit Control-Command-Space, that’ll bring up the emoji editor, and these tabs will let you select between different groups. You can scroll through, but also just search for something, like “target.” And there’s a nice bullseye-looking emoji for us to use. Once you’ve got one, copy it with Command-C and paste it with Command-V. Then we’ll make a new line. And the way you do a new line with Swift is backslash-N.
🎯🎯🎯\n
Next in our design, we need another text view that says the random target value to select. To add a new text view into the app, open the Object Library. From there, you can browse the different kinds of controls that SwiftUI gives you. One of them is Text. Select Text, then drag it into the code and drop it inside the VStack. That creates a new text view with some placeholder text. Since both text views are inside the VStack, SwiftUI places them one on top of the other vertically. And again, the way VStacks work is it just stacks these two elements one on top of each other vertically. We’ll actually make it a random number later in the course, but for now, just put an “89” in this new text view.
Text("89")
All right, looking good so far. Next up, we need a slider, right? So we can do that the same way. Go back to the Object Library. Search for Slider. Put the slider inside the existing vertical stack, right below 89. We’ll make this slider interactive later, but right now, we’re just going to hardcode the thumb to be a constant value along the slider. So just type in dot constant and open and close parentheses. And inside those parentheses, put 50. That’s setting it to a constant value of 50. And then put comma and then in colon 1.0 dot dot dot 100.0. That’s saying that we want the slider to go from the range of 1 to 100. And that the current value along that line is 50.
Slider(value: .constant(50), in: 1.0...100.0)
You can test to see that that’s working by changing the constant to 70. And you can see that the value is sliding over in the canvas. But for now, we’ll have it in the middle with a constant value of 50.
Next, we need labels on either side of the slider. We want “1” on the left and “100” on the right. These labels help the player understand the range of the slider. Right now, our slider is sitting directly inside the vertical stack. This works, but if we want to place text beside the slider, we need a horizontal layout. That is where HStack comes in. An HStack arranges views horizontally, from left to right.
So let’s first create an empty HStack below the slider. Now, instead of leaving the slider directly inside the VStack, we need to move it into the HStack. To do that, select the slider line. Then move that line into the HStack using the keyboard shortcut Option-Command-square bracket. Use the left or right square bracket, depending on whether you want to move the selected line up or down. Once the slider is inside the HStack, the app may not look very different yet. That is because the HStack only contains one view: the slider. But now, we have created a horizontal row. This means we can place other views beside the slider.
Next, open the object library again. Search for “text”. Then, drag a text view into the HStack. Place it before the slider. Change the placeholder text to 1.
Text("1")
Then, add another text view after the slider. Change that text to 100.
Text("100")
Now, our HStack contains three views. First, the 1 label. Then, the slider. Then, the 100 label. Because these views are inside an HStack, SwiftUI will place them side by side. So the 1 appears on the left. The slider appears in the middle. And the 100 appears on the right.
At this point, we have the instruction text, the target value, the slider, and the labels on either side of the slider. This makes the interface clearer because the player can now see that the slider goes from 1 to 100.
Alright, the one last thing we’re going to add right now is going to add this “hit me” button, which is right below the slider. So again, click plus. Find a button. And let’s drag it into the code inside this VStack, right below the HStack we just added. Notice that a basic button has two components. First, it has this part that says “Button.” This is effectively just like the text views you’ve already been adding. The button is just automatically creating it for you. So type whatever text you want to appear on the button in here. In our case, that’s Hit me. The second part is an action to run. So when you click on the button, it will run some code. Right now, we don’t want to run any code. So we can just delete this placeholder that says “Action” and leave the curly braces empty.
Button("Hit me") {
}
Alright, so this is looking good. But so far our preview is showing us the app in portrait mode, and I’d kind of like to see what it looks like in landscape mode, right? So at the bottom of this file, as I mentioned before, there’s some code that controls the previews that we see over here on the right-hand side. And just like the views themselves, we can adjust some options in the previews. You could type some code in directly, but an easy way to see options is to click this device setting button at the bottom of the canvas. You can change things like whether it’s in light or dark mode, or I can put this in landscape. And now you can see that SwiftUI is actually pretty nice in that it can dynamically resize things based on the space that’s available to it. You can see that the slider takes more space in landscape mode, which is great. I’m going to turn off those settings for now.
If you want to be able to flip back and forth between portrait and landscape, just to check things out, you can try out the Variance button here. Try Orientation, and now you’ve got access to portrait and both landscape orientations. You can just click at the top and switch between them.
The last thing I’m going to show you is how to run this on a simulator instead of just using the preview. So up here in this top menu bar, you can choose from various simulators to run. I’m going to just use the latest regular iPhone. And go ahead and click play to the left of that to run the app in that simulator. It may take a minute to load up. Now we can see the app running in the simulator, and you can then rotate it clockwise with this button in the upper right. There’s also a keyboard shortcut for that. You can use Command-Left to rotate to the left and Command-Right to rotate to the right. So the app isn’t styled yet, but you can see that we have the basic user interface for the app, and we can start styling and improving it in the videos to come.
Congratulations! We’ve already crossed off the first four items from our to-do list, adding the instructions, target label, slider, and “Hit me” button to the game. Again, if you got stuck, you can check the Final project in this episode’s materials. I understand that at this stage, the SwiftUI code that you saw may have been mostly gibberish to you, but that’s okay. We’ll take it one step at a time, and later on in this course, and in this learning path, we’ll break it all down for you in more detail. Remember, it’s all about learning via repetition. Thank you.