Images

[00:00:00]
>> So we wanna work with images, okay? So, where are images go? In the same assets folder, in the same assets manager. So instead of creating a new color set, we can create a new image set. In fact, we do have here an app icon that is kind of empty.

[00:00:23]
It looks weird, but we will see that at the end. So if we came here, and we select new image set, we can set a name, such as, we can call this a car, where is my image? It's here, BackgroundPattern. Look at this, 1x, 2x, 3x. Do you recognize these from somewhere?

[00:00:52]
What is 1x, 2x, 3x, what's that? Because we have different resolutions, it's saying, okay, if you're going to give me a bitmap, I need three bitmaps. On Android, it's even worse, because you're can have four. On iPhone, we have only devices with two and three, but iPads, they may have one.

[00:01:16]
So you need to provide different PNG files for that particular background pattern. If you downloaded the assets from the companion website, you do have that background image. And you have the background PNG 2x and 3x. So if you want, you can drag them like so. That is just the same file in different dimension.

[00:01:50]
But also, there is a PDF file. iOS is supporting SVG and PDF today. So instead of providing three versions, if it's not a picture photo, and if it's a vector-based, you can create the PDF version from Illustrator, or Adobe XD, or sketch, or designer tools, UX tools, and you can get a PDF or an SVG.

[00:02:17]
If you wanna use that version, the PDF version, we need to change in this asset a property. So I will open the attributes inspector over the background pattern, and there are a lot of options here, but I'm interested right now in scales. And instead of saying that I will provide individual scales, I will provide a single scale.

[00:02:46]
And now I need to delete this tube engine. And what's the deal here? I can now drag the PDF version. Just that. Also, just because I'm here, we have also a logo that we're going to use later in PDF, SVG, or three PNG versions. You can also take the SVG, for example, and drag it not here but here, okay?

[00:03:13]
Not here, here in the list, and is creating that logo. Unfortunately, it's creating always with three versions. So if you know it's an SVG, you need to say no, no, this is for single scale, okay? So, that's the logo. So that's how you set up assets, okay? You need three PNG per asset.

[00:03:39]
If you don't provide three PNG, what will happen is that your PNG will be pixelated, or it won't have the right resolution, or you're going to use more memory on older devices or cheaper devices, you don't wanna do that. So it's better to have PNG, SVG, or three versions.

[00:03:54]
Do you have any questions on how to load assets? They will go into our iPhone application, so they will be sent with that. Okay, so now in my offer, you will see how that, in a couple of minutes, our app will start looking like an app, I promise you.

[00:04:14]
So, what I need is to provide some kind of image for this, okay? So by the way, there is an image view. And if we use the library again, what's the library? The plus sign, there is also an, sorry, do that again, there is also a media picker.

[00:04:38]
And now, I can see my logo on my background pattern. And if I drag it, I know, somewhere, right there, it's giving me an image. But the problem is that, yeah, the image is appearing in the VStack. And so it appears the image and then two text. And the image is too large, so the texts are actually outside of my preview, so I don't like this.

[00:05:07]
So I want the image behind the text, okay? To do that, what I need is a ZStack. The ZStack will actually let me put layers one on top of the other. So look at this, I'm going to create the ZStack. And then inside the ZStack, I'm going to put the image and the VStack as siblings, like so.

[00:05:34]
You have the final code in the companion website, if you wanna copy and paste anyway. And now, it kind of look better as I was expecting. Any question? Right, it is still not ready but, no?
>> Just wondering if in CSS, you defined ZStack with a number so that's always on top?

[00:06:03]
>> Z index.
>> Z index, yeah-
>> Yeah, but it is more like position absolute, position fixed in CSS. If you have two elements, position absolute over the same position, well, it's a ZStack,. Okay, so, the next step is to create another view. And now, you will see that we are going to be increasing the speed now that we know the deal.

[00:06:35]
But we want to create a new file that is called OffersPage. By the way, I'm creating a SwiftUI view, It's the OffersPage, okay? And the OffersPage, we have offers inside, that's the idea. So, if you follow here the website, the companion website, I think it's here in user interface basic, we'll just copy and paste this first and then when we explain what it looks like.

[00:07:12]
Because I have some text there that I don't wanna type, so it's easy. Let's remove the list for a minute because we all know what that is. I have two offers. So I will create a VStack of two offers. In fact, we can even keep the VStack. You know the VStack, right?

[00:07:36]
It's just pulled in elements vertically with two offers, with a title and a description. Let's see how it looks like, like this. I mean, it's not so bad but they are too large, right? And they're not looking like this, why? My preview here was actually fixed in height, the preview.

[00:08:08]
The problem is that when we are putting these views in a VStack, they don't have that constraint, that high constraint. So they're just using all the possible space they can. So, we actually need to go to our offer. So, it's actually the image, the one that is taking a large space.

[00:08:28]
Do you see the little blue line? It's actually the real size of that. Can we change that? Yes, to change the size of an element, it's called frame. So we're going to use the frame modifier. And the frame modifier accepts a lot of properties, all of them optional.

[00:08:52]
So actually, that means that we can set the one that we want, like the height in any value, like 300, or 200, or 250, I don't know, you play with this until you're happy. So now we are narrowing this. And what about the width? If I want the width like 100% in CSS, 100%, we don't have presentation.

[00:09:16]
The only unit is points. Can we get the screen size somehow? Yes, we can, but there is a better way. Something that we can express, it's setting not the width but the max width. There is another property and there is a special value called .infinity, which says something like, okay, try to use as much as possible, okay, something like that.

[00:09:43]
But now, when I'm setting this, I'm giving an error saying, no, it doesn't work like this because there are two versions of the frame function, the frame modifier. One, to set the fixed height and the fixed width, and the other one doesn't contain the height property, they contain other properties such as max height.

[00:10:08]
I don't know why they did this in this way. So instead of height, we define max, the mean and max. So max height, max width. And now, it's complaining because of the order. Remember I mentioned that you can omit arguments if they're optional, but you cannot change the order, so the width go first because that's how they create the signature.

[00:10:34]
Okay, so now if our resume here, looks like this, and if I go to OffersPage, okay, it looks weird because what's going on is that, yeah, it seems like it's working fine. In fact, let's go to the offer, and let's change this layout to 400. So we can see that the offer, it's actually getting out of the maximum that I set.

[00:11:05]
That is because by default, the same happens in CSS. I mean, if I search for CSS joke, I probably gonna find it. I didn't plan on this, this one, [LAUGH] I was looking for that one. This is what's happening right now. Yeah, I set the constraints, but anyway, the image is bigger, so it's actually getting out of its constraints.

[00:11:31]
The same happens in CSS. So something that I can do is apply another modifiers called clipped. Just the way we'd actually clip the element. So now, it's not getting out of its frame even if the image is larger. And finally, we have what we wanted. And by the way, this is OffersPage.

[00:11:58]
My ContentView still has some demo offer, I can now say, OffersPage. And now, my app has the offers. But it doesn't look like an app yet, okay, it's just two offers. This is what we are trying to achieve, okay? We have this page, but look at the title.

[00:12:18]
There is a title saying Offers there, that if I scroll, it becomes something nice there. That effect comes automatically if we apply another container. So in my OffersPage, I'm going to apply a container to the VStack. It's called the NavigationView. So I will put the VStack inside. And now, how to set the title?

[00:12:50]
It's a modifier of, in this case, the VStack or the child of the NavigationView. It's called the modifier, remember a modifier is a function, navigationTitle, just like that. In fact, if I have more offers, NavigationView, like so, We have a problem with scroll because VStack has no scroll.

[00:13:20]
But if I change VStack with List, it works. So at least, it's a VStack with some behaviors such as a scroll and in more interactivity that we will see later. So look at the title. Now, when I'm scrolling, offers is having that effect. The only thing that I added is a List to have a scroll and a NavigationView.

[00:13:52]
We have a NavigationView as a container, and then navigationTitle as a modifier of the child. So you can see here how easy is to be similar to other iOS apps in just a few clicks or just having one or two views.