Concepts & View Types

[00:00:00]
>> Again, this is not part of our project. Now we are going to start working on our project. But before doing that, let's review a couple of concepts that we have already seen regarding SwiftUI. So we have an app. We are creating one app that's simple to understand.

[00:00:18]
Every app can contain more than one scene, but most of the time on iOS and iPhone at least, we have one scene per app. There are a couple of exceptions but, we're not going to see any of those exceptions, so one app, one scene. Typically we don't touch the app or the scene a lot.

[00:00:35]
And then we have views. View is a protocol that I can conform to within a structure. So I can create my own view, that is just a structure with a body property and the body property will create other views inside. We have view modifiers. View modifiers are functions that we apply to views so methods of views returning other views.

[00:01:06]
Typically, they are returning the same view. So if I apply a modifier to a button, I also receive a button as a result, okay? There are some exceptions but typically that's how it works. I modify a text, I receive another text. If I modify another text, I receive another text, okay?

[00:01:25]
Then we have dependencies. Dependencies are things that will make that view to render differently. For example, it can be just a variable. We haven't seen this before, but variables, if I create just a normal variable is read-only, I cannot change the variable of a property in SwiftUI. If I wanna change it, they must be state variables with the at state, okay?

[00:01:57]
So but if you change the state variable, it will re-render. We have so also environment data. We haven't seen any example of this yet. But there are some data from the outside that can also trigger re-rendering. And every unit that we use, it's actually expressed in points. So if we are setting a padding, the font size, position x and y, width and height, they're expressed in a unit known as point.

[00:02:32]
That is the same as px in CSS. Do you know what px in CSS means? I know it sounds like a simple question, but it's not.
>> Pixel.
>> No. Or kind of, it's not a physical pixel at least. It's called a CSS pixel that is virtual. So you have a device with high resolution, you're not going to see things smaller, okay?

[00:03:00]
So it's going to be multiplied by a multiplier that is now that the device picks a radio and CSS, the resolution. So if you render one 100 pixels px in CSS, it will look the same in inches on different iPhones or centimeters in different iPhones. But they won't be the same in pixels, because we have iPhones with more resolution, okay?

[00:03:25]
So 100px can be 200 real pixels or 300 real pixels. Something similar happens here but we call them points. Do we have any other unit? No. In fact we don't even express the unit, we just use a number, padding 15. There are no units, it's always points, okay?

[00:03:47]
And we haven't seen this yet, but we can create PNGs, we can use PNGs, PDF or SVGs. We're going to see how to do that in a minute for rendering images on the screen, okay? Cool. Well, after this main concept we have some of the most important built-in views.

[00:04:10]
We have the text that will just render text on the screen, the label, a label, render text plus an image, like icon and text, icon and text, that's kind of the idea. The bottom HStack, VStask. HStack is horizontal, ZStack is vertical, sorry, VStack is vertical, ZStack it's actually putting things in layers, one on top of the other.

[00:04:35]
It's how you put two views, one on top of the other. LazyHStack and LazyVStack are actually for scrolling. So, when you have a VStack of 100 views, they are going to be, I'm talking about HStack or VStack here. If you have 100 sub views, they will be rendered, even if they're not on the screen.

[00:05:03]
When you use the lazy versions, They're going to be render as soon as they appear on the screen. Does it make sense? It has to do with performance and it happens automatically, I don't need to do anything special
>> Threshold you could sit on that to say, as you're scrolling up and,

[00:05:24]
>> You can customize with modifiers. The base tag I'm not sure how deep you can get directly, but if not, you can create your own one. We have a spacer that is kind of weird because it reminds me on how we were doing web design during the 90s.

[00:05:42]
We will see that in a minute. At least that it's like VStack, but it has interaction. So it creates interaction over its children. We will see this later. For each, that repeats a view or a set of views. NavigationView, we're going see this in a minute, NavigationLink the same.

[00:06:06]
TabView for working with tabs. TextField, this is the one that we have just used. And toggle. Toggle is a switch for on, off, it's like an equivalent to a checkmark. These are just some of the building bills that we would probably use over the next hour, okay? Each of these elements, they have their own modifiers, okay?

[00:06:32]
Yeah, we can take a week talking about all the modifiers that we can use for each view, okay? But of course we're going to use a couple and the most important one