Your First iOS & SwiftUI App: An App from Scratch

Transcript: 05. SwiftUI Views

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 afterward.

Here’s what the Bullseye screen will look like at the end of this episode, but with all 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 these: 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 bullsee 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 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 can 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 for the player!

• 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’re putting 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 the 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 it’s 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 labels, and then the Hit Me Button.

A Horizontal Stack, or HStack, works just like a VStack, it just arranges its children next to eachother 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 - 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 OK - all that’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!

Course Materials

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!

Setting up Indentation

Open up ContentView again.

And one thing I’m going to do real quick is change this code to use my preferred indentation. I will probably do this again in this course, so I’ll show you how to do it, too.

Open up Xcode’s 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 4 spaces. I’ll close that up.

So, 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 automagically 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.

Adding Views

Ok, 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.

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 reindent 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:

"PUT THE BULLSEYE AS CLOSE AS YOU CAN TO"

You can also put emojis on 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 ones.

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 a few times.

And then we’ll make a new line. And the way you do a new line with Swift is backslash N.

🎯🎯🎯\n

Adding Views from the Library

Next in our design, we need another text view that says the random target value to select.

So to add a new text view into our app, there’s several different ways.

And one really easy way is to click this plus, which brings up the object library. And then we can look at all the different types of controls that we can add into our SwiftUI app. And one of them is Text.

So you can select that and drag it into the canvas.

Ah, I forgot, you need to make sure the canvas is in the Selectable mode, first. So I’ll go back to the library, and this time, I know what the view is called, I can just search for “Text” at the top.

And as you drag it, you’ll see this little blue bar that gives you a hint of what it’s going to do when you release the button. And the hint it gives at the bottom is add the text to a new vertical stack along with the existing text.

So look over at our body on the left and you’ll see the right now all there is is just one text. Now let me release this. It’s done two things here.

• First, it’s created a text view with some placeholder text in it.
• And it’s also put both of these two texts elements inside a VStack.

And again, the way vstack works 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 Text view:

Text("89")

Adding a Slider

All right, looking so far so good. Next up, we need a slider, right? So we can do that the same way.

Click the plus, and you can also type in here to search for a Slider!

Now drag that in. And the blue bar will show up again, giving us a hint of what it’s going to do. Now look carefully here. As I drag this slightly up and down two different things happen.

The first says insert slider in the vertical stack. And if I drag lower, it says add slider to a new vertical stack along with the existing vertical stack.

We don’t want to add a vertical stack because the one we have is already just fine.

So we want to insert the slider in the vertical stacks. Just be careful how far you drag. If I release that, now it’s 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 hard code the thumb to a constant value.

So just type in dot constant and open and closed parentheses. And inside those parentheses put 50.0. That’s setting it to a constant value of 50.0.

And then you put comma and then you put in colon 1.0…100.0. That’s saying that we want the slider to go from the range one over here to 100. And the current value is a value 50.

Slider(value: .constant(50), in: 1.0...100.0)

You can test it if that works by changing the constant to 70. And you can see that the value is sliding over there, but for now we’ll have it in the middle with the constant value of 50.

Add Views to Stacks

All right, so what do we need next? We need some text to the left and right of the slider.

And again, we can do that at the same way by dragging one in from the library.

First I’ll zoom in on the canvas so I can see where I’m dragging a little easier.

Ok, open up the library, and I’ll just search for “text”. We’ll select a text. We’ll drag it in and check out these blue bars.

Now this time, if I move it to the left there, there’d be a blue bar to the left with the slider. And the hint says, add text to a new horizontal stack along with the existing slider. So I’m going to let go.

And what it’s done is it’s put that slider and the new text that has a placeholder inside an hstack, which stacks things horizontally. So I can click the placeholder and change it to one.

Text("1")

Now let’s add the text to the other side. If I open up the library again, my search result is still there. So I could drag another text into the canvas on the other side, but I can also drag it into where I want it in the code, which can be easier sometimes.

So if I drag it right below the slider and kind of wait a little bit, SwiftUI will add a blank little line in there. And if I release it, it’ll add it to that spot. So we can then click and change that to 100.

Text("100")

Adding a Button

All right, the one last thing that we’re going to add right now is we’re going to add this hit me button, which is right below the slider.

So again, we’re going to click plus, find a button, and let’s drag it into the code inside this vstack right below that 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. Now right now we don’t want to run any code. So we can delete this placeholder that says “Action” and leave the curly braces empty.

Button("Hit me") {
  
}

All right, 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?

Preview Options

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 some options is to click this Device Settings button at the bottom of the canvas.

You can change things like whether it’s in light or dark mode, or I could put it in landscape.

And you can see the 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, you can try out the “Variants” button, here.

Try “Orientation” and now you’ve got access to portrait and both landscape orientations. You can just click at the top to switch between them.

Last thing I’m going to show you is to run it on a simulator instead of just using this preview. So up here in this top menu, you can choose from various simulators to run. I’m going to use just the latest “regular” iPhone.

And go ahead and click “play” to run the app in that simulator.

Now we could see the app running on the simulator and you can then rotate the, the app clockwise with this button in the upper right.

There’s also a keyboard shortcut, which is Command+Left, Command+Right arrow as well. All 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 you saw in the code editor may have been mostly gibberish to you, but that’s OK. We take it one small 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.