SwiftUI fundamentals

- [Instructor] Now we're going to look at building user interfaces with SwiftUI. Remember SwiftUI is a declarative syntax that you can use with code to create your user interfaces. That might sound a little bit intimidating, especially if you're not very familiar with code. That said, in many ways, you might find SwiftUI to be easier to work with than storyboards when developing your user interfaces. So let's jump right in. To create a SwiftUI application, under iOS for your template, choose app. From there, hit next. We'll call this SwiftUIBasics. Make sure you choose SwiftUI for your interface and SwiftUI App for your life cycle, and then leave everything else as it is on my screen, and hit next. I'm going to save this in the chapter three fundamentals final folder. Of course, if you're following along with the files, save in a different folder. There's our project, and I'm going to go into full screen. And you'll notice that I'm in ContentView.swift. This is our user interface file for SwiftUI. Let's hide the navigator area and the utilities area. And now we have two areas of the editor. On the left side we have our standard code editor, and on the right side we have the canvas, which is used for previewing SwiftUI applications. You might notice when you open the file that you don't see anything in here except for these diagonal lines. And you'll see this message that automatic preview updating is paused. So you might have to hit this button to resume, but before I do that, I'm going to change the device that I'm looking at. So I'm going to go over to iPhone SE 2nd generation, and then I'm going to hit the resume button. Now that happened fairly quickly for me, but depending on the speed of your computer, and whether or not you've opened up an app with SwiftUI before, this might take up to a couple of minutes for the preview to show right here. So what I'm going to do is zoom out a little bit and then just drag this handle in the center of the screen, over to the right. So I have a maximum working area in my code, and I can see my whole app preview on the right side in the canvas. Of course, if you ever need to toggle this canvas off, you can use this button up here, and then click that. For what we're doing here, we want to keep it on the whole time. So let's just leave that on. In your SwiftUI file, there's one main place where you're going to be writing your code. Of course, as you get into more advanced concepts in SwiftUI, you'll be writing into more places, but for what we're doing in this course, we're going to stick with this object here, which is the body inside of the content view struct. So it's everything from the word var, all the way down to this inner, closed curly brace. So the part between the curly braces is where you define your UI for this file. So here we have text, "Hello world!" You can see it's exactly what we're seeing in the preview on the right. And then we have this object called padding. We'll talk more about padding later on, but for now I'm just going to delete it. Notice that when I deleted it, that the padding disappeared. In other words, the space between the bounding box and the text disappeared. Again, we'll go into more detail about how that works later. What I want you to do now is just play around with SwiftUI just a little bit. Make some changes to the text and watch how quickly it updates in the preview. You can see that it happens instantly. This allows us to get quick visual feedback when we're developing our user interfaces. So the main things I want you to take away here are how to create a SwiftUI application, and where you write your SwiftUI code. You create your SwiftUI application by choosing SwiftUI when you're creating your project. You can modify the code in your user interface in the content view file. As you make modifications within the curly braces of the body object, you'll instantly see those modifications show up in the canvas on the right side of the screen.