Your First iOS & SwiftUI App: An App from Scratch

Heads up... You've reached locked video content where the transcript will be shown as obfuscated text.

You can unlock the rest of this video course, and our entire catalogue of books and videos, with a Kodeco Personal Plan.

Unlock now

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 let's 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 wanna 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 basically out 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 a 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 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 it's 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. All that's important at the 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 content View again and one thing I'm going to do real quick is change this code to use my preferred indentation. I'm gonna 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 CMD+A, then press CTRL+I, all of the code will reindent. You might think that Xcode would automatically indent the template code based on your preferences, but it doesn't. CTRL+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 Figure, 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 CTRL+I, put your cursor on the same line as the text View and reindent with CTRL+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 CMD+C and paste it with CMD+V. Then we'll make a new line and the way you do a new line with Swift is \n. 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 are several different ways. One really easy way to start with is to click this plus which brings up the object library and then we can look at all of the different types of controls that we can add into our SwiftUI app. One of of them is text so you can select that and drag it into the canvas. I forgot you need to make sure the canvas is in 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 that into the canvas you'll see this little blue bar that gives you a hint of what it's going to do when you release the button. 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 that right now all there is is just the one text. So let me release this and it's done two things. First, it's created a text View with some placeholder text in it, and it's also put both of those text Views inside a VStack. 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. All right, looking good so far. Next up we need a slider, right? So we can do that the same way. Click the plus, and you can also just 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 as I drag this slightly up and down. Couple different things happen. Here it says "Insert slider in the Vertical Stack." 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 just fine. So we want to insert the slider in the Vertical Stack that exists. Just be careful how far you drag. If I release that, now let'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 be a constant value along the slider. So just type in .constant and open and close parenthesis, and inside those parenthesis put 50, that's setting it to a constant value of 50, and then put comma, and then in: 1.0...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. You can test to see that that's working by changing the constant two 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. Alright, so what do we need next? We need some text to the left and right of the slider. And again, we can do that 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. Okay, now open up the library and I'll just search for text. We'll select a text, drag it in, and check out these blue bars again. Now this time if I move it to the left there will be a blue bar to the left of the slider and the hint says "Add Text to a new Horizontal Stack along with the existing Slider." So I'm gonna let go and what that's done is it's puts the slider and the new text that has a placeholder inside an HStack, which stacks things horizontally. So I can click the placeholder and I'll change it to one. 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 and is actually often my preference. 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. All right, the one last thing 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, 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. 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? 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 indirectly, 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 gonna 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.