SwiftUI Crash Course
What is SwiftUI?
8m 3s
8m 34s
8m 11s
5m 10s

The course is part of this learning path

Start course
1h 19m

This course delves into SwiftUI, which you can use to create user interfaces for your apps. We're going to cover how to use it, how to create views, and how to leverage it to create responsive apps that work in all screen sizes.

Intended Audience

This course is designed for anyone who wants to:

  • Learn about iOS development and coding
  • Move into a career as an iOS developer
  • Master Swift skills


To get the most out of this course, you should have some basic knowledge of iOS.


Hi, within this lecture, we're going to see what a stack is and we're going to play with this view so that we can get a hold of SwiftUI. So, we have this Text("Hello SwiftUI") and text is some kind of a label inside of our SwiftUI framework. We use it to show strings, we use it to show texts to the user. For example, if you say Text( ). you can just choose any attribute, any method you want. For example, if you choose .bold( ), it will make your text bold.

So, let's see another one. If you just say '.' you can come over here to change the font for example and it asks you for a font, and if you hit '.' over here, you will see some options like a callout, like a caption, or like a largeTitle. Just choose the largeTitle and you will see that it will increase your font size. Let's try something else like a footnote for example. It will make it a lot smaller compared to the largeTitle. So, that's how it goes. That's how you can add some new features like this.

You can just hit '.' once again and try to make it bold after you change the font. Of course you can continue experimenting this by adding some new features like adding '.' and trying to find some options that is relative to text. But there's another way to do that. If you don't know anything about SwiftUI, you can come over here by hitting command on your keyboard. If you click on 'Text', you will see a menu like this. You have to go this Inspect menu, and it will give you something like an attributes pane. So, remember in the main story boards we had this attributes pane and we could have changed any attribute that we want. This is something like that. It exactly lists the common attributes, common options that you can change over here like font and if you want, you can just change it from there as well. For example let me go for headline, it will do headline code over here. So, it adds the code automatically if you choose it from this menu. So, you can see how to add this, how to add those codes by choosing from this menu, for example a color. I want to make this blue, so it added the .foregroundColor( automatically.

So, I know right now how to change the color. If I come over here, I can change the alignment but it won't make sense because we are stuck in this frame and we're going to see what the frame is later on, but I can change it by clicking over here. So, this is good, this is very cool. We can even change the text from here as well. So, this lists the common attributes that we can change from here, common properties. And don't hesitate to use this Inspection menu whenever you come across a new view to see what you can actually change. So, we have this frame over here and it refers to this blue line wrapping around our text and we're going to see what it is later on. It actually defines the size of our view. But I believe we're good to go with images when it comes to frame, to understand it better. So, right now what if I want to add another view on top of this view. Can I just do that like Hello World? Will it show up? Nope. It will give me an error because it may sound stupid right now but you can only return one view inside of a body.

So, you may think that, do I get to have one view in SwiftUI in every screen from now on? Of course not. There is some bypass to this problem as well and we're going to use it a lot in our projects. It's called stack. So, we're going to create a stack and we're going to wrap everything around as stacks, so that we can return everything inside of that stack like this. So, if you say VStack { and then you can just stack whatever you want inside of that VStack { } like this. So, take everything and put inside your VStack { } and you will see that this new text will show up and you will see the Hello World and Hello SwiftUI as well. Now in this body I'm just returning the VStack { } and inside of that VStack { } I'm doing what I want. So, right now I can just add as many views as I want inside of this vertical stack. And V stands for vertical stack, it is stacked so we stack the views inside of the stack and we have other options as well. For example, if I want to stack views horizontally, there is an HStack { } to do that. Just change V to H and you will see they will be side by side like this.

So, this is horizontal stack and again this is VStack. And as you can see, I can use this VStack and I can use that HStack in order to have structural stacking of my views. For example, right now I'm using this VStack { } but my views are actually very close to each other. So, I want to move them further away a little bit. So, I have to come over here to one of them and add a .padding( ). As you can see, this blue frame wrapping around our Hello World just got expanded and it's called frame as I said before. It actually determines what size will our view hold. As you can see in the Hello SwiftUI, now I'm just wrapping around it. So, if I say .padding( ) over here as well, it will just expand and it will move Hello World further away. So, that's how you add a padding to actually set your views up so that they will have the size that you want and they will have the margin of space that you want. We're going to work with frame with images in order to understand it better, later on in the next lecture don't worry. And aside from VStack and HStack, we also have something called ZStack as well.

So, if we change it to ZStack { }, you will see that they will overlap and this is kind of Z position that we have seen in the SpriteKit. So, this defines whichever view is going to be shown first and it doesn't make sense in this case. But if I had an image rather than Hello World, if I want to write something on that image, that would make sense to use ZStack { }. In this case, of course we don't have to use ZStack. I'm going to go with VStack in order to have a proper look. So, that's it for stacks. That's why we use stacks in SwiftUI. So, we're going to stop here and within the next lecture we're going to dig a little deeper and understand SwiftUI features better.


About the Author
Learning Paths

Atil is an instructor at Bogazici University, where he graduated back in 2010. He is also co-founder of Academy Club, which provides training, and Pera Games, which operates in the mobile gaming industry.

Covered Topics