Swift: Advanced App Design With SwiftUI

Transcript of the free preview lesson. Remaining lessons unlock with the full course.

Hi, my name is Mark Nair, and in these lessons, you'll learn about app design in Swift using SwiftUI. We'll look over the basic structure of a SwiftUI app, and then we'll look at SwiftUI text, images, stacks for organization, buttons, and we'll work a little bit with state and binding. SwiftUI is the newest framework to help you develop your apps. Unlike UIKit, which is an imperative framework, where you specify what you want to have happen through a series of specific steps. SwiftUI is declarative, which means you'll give the direction you want, and what you want to see happen without specifying too many of the down-and-dirty details. For example, if I gave imperative directions to make a spaghetti dinner, I would say things like put a large pot on high heat, bring two liters of water to boiling, add two teaspoons of salt to the water, add 200 grams of pasta, stir every two minutes, and then cook for 12 minutes. If I gave declarative instructions for the same thing, I would simply say make a spaghetti dinner using whole wheat pasta with veggie sauce and make enough for two people. SwiftUI takes us away from the specifics of Interface Builder, Auto Layout, Storyboards, and the view controller we used in UIKit. But let's take a look at the basic structure of SwiftUI. To do that, we'll start a new project. So here I am in Xcode. Now I'll just create a new project. I will do an app, so I'll select that. Now this time, I will just put intro to SwiftUI with the organization identifier. Now the interface right here, SwiftUI, not storyboard that we did before, but SwiftUI, language is Swift. We won't include core data or tests. Now just click next. So the first thing that we see, things are a lot different than the look we had with UIKit. First of all, I have some code over here on the left side. Now Xcode is pretty familiar, the sensibility is familiar to you. Same outline over here on the left, same inspector on the right, but in between a little bit of different stuff. So here on the left, I have some code. We'll walk through this here in a minute. The big thing is on the right, I have this thing called the canvas. Now if you don't see this, somehow it's missing or it's hidden away, you can come up to the top menu item right here, and under editor, you canvas. So editor select canvas. We also have the assistant menus that we've seen before. And I can change the canvas layout where it will exist. So if you want it down here, but I'll just put it back to the right. Now the canvas is a real-time demonstration of what's going on in our app. And as a matter of fact, real-time meaning you can actually use it much like it's the simulator from UIKit. We can still run our app in the simulator too, and there are advantages running in the simulator, but for here, the canvas will show us real changes in real-time as we're building them. There are a couple of exceptions to that though. Down here at the very bottom, I have a couple of buttons. One is called live, and then this guy is selectable. Now when I select this button, which is a little arrow, I can select the elements inside of the canvas. When I have the live button, this is just the live representation. This is as if I'm really going to just be operating the app. All right, let's take a look over here on the left-hand side for content view. So content is u.swift, unlike previously when we had a lot of different things, the storyboard, file, you name it. Right now it's pretty simple. There's an intro to SwiftUI app that's the name of the project we gave it, and content view. Now everything in SwiftUI is a view. So anything that goes on the screen, what you can see it's a view, and this gets down to all the specifics too. So an image is a view, this text is a view, this vStack, all of these things we consider views. So the first default file is called content view. You don't have to keep content view. It's just the default setting. But the way the SwiftUI app works, this is where everything launches. So at the very beginning, when our code is running for our app, right here is the very first thing that will demonstrate and show on the screen. Content view. Well, content view is this. Now inside of content view, line 8, I'm importing a SwiftUI framework. So this tells Swift, this tells Xcode what we're about to do. Now in line 10, I have this struct, and the struct is called content view, but now it is of a type view. If I option click this, we can take a peek here. Type that represents part of your app's user interface. It provides modifiers that you will use to configure views. Okay. So really, when I say it's type view, it's a really protocol. Now inside of this, we have a body, a var for a body, and that is of some view. A little strange, but don't worry about it. And we won't get into too many details about what some view means versus what view means. The important part in this exploration that we're going to do is about the content that we're showing in the view. So I will take a look at line 12, and I have this VStack. Now a VStack is an organizational method that we'll use to layout all of our content on the screen. We'll deal with that more coming up. But inside of the VStack, and when I say inside, I mean inside of the curly braces right here, this is what lives in the VStack. I have an image, and then system name, globe. So this image is from SF images, and there's a large library of images. So for example, if I replace this with bicycle, then I have a little picture of the bicycle there. Now you'll see a couple of things here under the image scale and foreground. These are called modifiers, and this is how we change things in Swift UI. And then there's another text field, hello world, and you'll see it down here, hello world. We'll get into more detail about this kind of thing coming up. One other thing here in the content view area is this information below. This is actually generating the preview that we see over here in the canvas. And what it's doing the preview of is content view. This might look a little weird right here. And don't worry about it too much. There are ways of customizing the preview. So if we just need to see one slice of the screen or some view that we're bringing into another view that we can optimize that and take a peek at it down here. But for now, we're just going to look at the basic preview. Now remember that everything is a view. So that means that everything we bring into our app, we can manipulate, we can modify, we can change. So let me show you how this works when we bring in something from the library that we're used to doing. So I'll click the plus button up here. So let's pull a view from here into our interface. And I'll just pick a button. Now as I drag this button from there into the code, you'll see something pretty cool. I'll bring it right over here and then you'll see that the next area here will actually make room for us. And there's the code for the button. And then you'll see over here in the canvas, it says button. So it's a quick and easy way of bringing things in from the library into your code base right here. I'll get rid of that. I want to show you the other way. So right now I'm in the live view, but if I come over here to this selector where I can select the different elements. Now if you'll take a look at, I've selected this chunk and over here in the code, it's highlighted. The VStack is completely highlighted. If I come back in and select one individual part, that part is highlighted in the code. If I come back up here and in this case, let's just pull down a slider. I'm going to bring the slider, but not, I could bring it over here, but instead I'm going to drop it into the UI. And you'll see here does insert slider in a vertical stack, which is the same meaning of VStack on line 12. So I'll just pop that right there. And you'll see that the slider with the value of value, empty value, exists here. And now I have a slider inside of my canvas. Let's do the same thing with something else. So I'm going to come over here. And in this case, I'll come down here to an ellipse. I'll drag the ellipse in right inside of here and make some space for me, pops it in, just an ellipse. And there in my UI is an ellipse. Now that's just a quick overview of the structure of SwiftUI. You'll see pretty quickly it's a radical change from what we're used to doing with UIKit. Thanks for watching. Stay tuned for the next lesson where I'll show you how to work with text and modifiers in SwiftUI.