SwiftUI Crash Course
The course is part of this learning path
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.
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 how to work with images inside of SwiftUI. And in order to do that, I'm going to create a 'New File' so that we will have different files to work with different kinds of views. So I'm going to create a new file and I'm going to choose 'SwiftUI View' rather than Cocoa Touch Class and Swift File. So, make sure you choose the SwiftUI View and I'm going to name this 'SecondView'.
And we're going to work inside of that view. Since we have our own preview, it won't matter which view we're looking at. So, if I make a change over here, then I can just see it inside my preview as well. And we got a crash. So, I believe, this is a bug. So, let me 'Open' it one more time and hit 'Resume' to see the Hello World text. So, when we create a new view with SwiftUI View, it will just create the preview as well so that we will have separate previews for our separate files like this. So, I'm going to work inside of that view. And along with the images, we're going to learn one of the hidden features and a very powerful feature of SwiftUI as well.
I'm going to show you what it is. Don't worry. I'm going to search for a Metallica image as usual and I'm going to choose the first image that we see and I'm going to download it. So, let me 'Open' my Downloads and just name this 'metallica'. I'm going to bring this inside of our Assets folder. So, here you go. Now, we can come over here and rather than having this Text, I'm going to say, 'Image'. So, this is a new view for us. This is not a UIImage or this is not an Image View. This is an image. And this is actually a view that we used inside of SwiftUI.
As you can see, there are a lot of ways to create images. Like, a name with a UIImage, with a CGImage, but I'm going to go for 'name'. Because we already have our 'Image("metallica")'. If we say, 'Resume' right now, it will bring in the image that we have downloaded. Here you go. Now, we see the image but as you can see this is big for our screen. So, I want to resize it and I want to see the full image inside of my screen. So, how do I do that? If you don't know what to do when it comes to Image or any other view, you can always check the Inspection menu. If you cannot find anything in here, you can go to documentation to see further usage.
For example, in here, we just see the Frame and we just see the Padding and we're not interested in them. But rather, we are looking for something called resizable. So, this literally makes our image resizable. If we don't do that, whatever we do will not matter and it won't resize. First of all, I'm going to make this 'resizable'. So, when you do that, it will resize the image in a way that it will fill up all the screen like this.
So, if you are satisfied with this view, then it's okay. But, I'm not because it's not looking good. So, I'm going to change the content, the aspect ratio. So remember, we had fit, we had fill in terms of aspect ratio in our regular UIImage View as well. Now, I'm going to do that inside of our image and I'm going to call 'aspectRatio' and it will ask me for a ContentMode and the ContentMode that I'm looking for is .fit rather than fill. If you say, 'fill', it will fill up all the screen like this. And I'm not looking for that, I'm going to go for 'fit'. And it looks good.
Now, if I'm satisfied with this, then it's good to go. But, what if I want to have more specific size? Like, what if I want to have a margin from the left, from the right, or from top and bottom as well? Of course, we can try to do that with padding but it won't work in every scenario. So, I want to have a good frame. I want to have a specific frame regarding to this image. So, if you click on this image, you will see this frame, the blue lines covering up of our image.
So, this is exactly the same thing as we have seen in the Text. But, if you say, '.frame', you can actually change the frame. You can actually contain your image inside of a frame. So, it will ask you for an alignment and we don't need that. So, I'm going to delete this. So rather, I'm going to work with width and height. For example, let's give '200' and '200'. It will just reframe this. So, here you go. It created a frame in the size of 200 to 200. And now, our image is contained inside of that frame. Now, if I make this '300', it will be a little bit bigger. Let's go for '350' and for 'height: 250'.
So, it's good. It's what I wanted. So, this looks good, but this won't look good on any other screen. So, I'm inside of iPhone XR right now. What if I want to run this app on iPhone SE or something smaller? Actually, iPhone SE is a lot smaller compared to iPhone XR. So, how do I get responsive screen sizes inside SwiftUI? There is a way to do that and you cannot find this in any other tutorial, at least for right now, regarding SwiftUI. But this is a great feature of SwiftUI. This is one of the reasons that people will move to SwiftUI in the coming years. So, this goes like this. You have to go for 'width: UIScreen'. And this will give us this screen. As you can see, this is associated with a hardware-based display.
If you say, 'UIScreen.main', you will get the main screen. And if you say, '.bounds', you will get the actual screen size in whatever or whichever phone you're working with. So, if you say, '.width', you will get the current width of your phone. So, if you're on XR, we're going to get the width for XR. If you are on SE, we're going to get the width for SE. And, for example, I can just multiply it by 0.8 to get this 80% of the current width. I can do the same for height as well. So, come over here and say, 'UIScreen.main.bounds.height'. And this time, let's go for something like 0.3. So, here you go. Now, I have created this relative to the screen sizes. So, that's cool.
Now, if I want to change this to iPhone SE, for example, if you come over here and choose one of the other screen sizes, it will try to change our layout to the whatever phone that we have chosen. And here you go. Now, I'm inside of iPhone SE and it looks exactly the same as we have seen in the iPhone XR. Now, I am having some responsive design. So, this is cool. So, if I had the 350, 250 aesthetic numbers over here, then it wouldn't work like this. Now, I'm seeing this inside of iPhone XR in the same proportions. Now, let's switch back. Let's go for '350' over here and '250' over here. So, I will get the same in the iPhone XR. But, if I went back to iPhone SE, you will see that this won't work.
This won't even fit in the current screen because iPhone SE is a lot smaller. So, we have to go like this, 'UIScreen.main.bounds', so that we will have the exact same look in the iPhone XR and we will have the exact same look in the iPhone SE as well. Previously, developers chose to create their apps without main storyboards. But, inside of code, like we have seen in the layout, in order to create these responsive screen sizes, now, we can do that with SwiftUI as well. And it's much better than ever before. So, that's one of the greatest power of SwiftUI. And let's stop here. And within the next lecture, we're going to see some other views, like Lists and Sections and so much more.
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.