Hi. Within this lecture, we're going to work out with layouts. So far, we have been creating some exemplary apps and we have been working with main story boards, but we haven't seen the details of them. We haven't seen how to use constraints, and what are constraints really, and how we can leverage those. So, I'm going to go and create a new project, and I'm going to call this ProjectLayout. And I'm going to, of course, go with Swift and save my files in my desktop or iOS folder. And we're going to keep coding minimum in this section. But you have to know this stuff before we go on and build some real apps, because this is one of the basic stuff that you need to learn in order to build app, okay. 

And here we have our view, and we have our library in which we can drag and drop because we have seen that before, right? But we haven't seen this. So, in this picture, in this layout over here, we can't change the actual app. Right now, the iPhone XR is chosen as default in my case. So, I can choose to display iPhone SE as you can see changes a lot. So, this is a lot bigger. iPhone is a lot smaller. So, I can choose orientation, even so I can do portrayed, landscape. So, this is where you change the layout. This is where you change the model of the iPhone or orientation of the iPhone. And in current days, we don't see too many apps that are supporting this layout orientation, landscape orientation, sorry. We generally use our apps in portrait modes. So, maybe you wonder that, "How can I make my app to be used only in portrait mode?"

It's actually a lot easier than you think. You can go to the settings and you can just choose whether you will support landscape or not. So, if you do it like this, if you leave the checkbox only in portrait mode, your app will be supporting only portrait mode.

So, even if a user switches their phone as a landscape mode, it won't go to the landscape mode, it will stay in the portrait mode. In the left-hand pane, if we drag a view over here, you will see that it will be placed in the left-hand pane as well. So, you can choose your view by clicking over here or you can choose your view by clicking over here as well. So, we haven't worked with this before. So, it displays a hierarchy in which you can see the views, and you can choose them from that list as well. So, let me make my label a little bit bigger over here. And let me go to attributes pane in which I can change the attributes. We have seen this before, right? So, for example, I can call this Project Layout and I can make this central, and I can even increase the font size over here to make my text a little bit bigger. So, I can play with these options and I can change them in whatever way I want. So, let me drag and drop an image view so that we will see a good example of leveraging layout options in a good way in order to make good apps.

So, let me put this image view in the middle of my screen and then I'm going to need an image of course, to work with to show you an example. So, I'm going to go for Google and of course I'm going to Google Metallica again. I'm going to download an image and I believe the landscape image like this will be much better for our purposes rather than portrait images. So, go for a landscape and just download one. You can do it with your own favorite band. If you're sick of Metallica at this point, but I'm going to rename this Metallica. I'm going to just take this picture and I can put it over there. Just make sure that this Copy items if needed is selected. I can reach Metallica.jpeg from here or in the Assets folder as well. So far, we have been dragging and dropping the images into Assets folder but you can do it like this. As you can see, we now see the image inside of our image view. So, right now I have this image and I have stretched it a little bit right next to the edge. Okay, but there is some space between here.

So, this is the look that I want in my app, for example. So, let me run this and be aware that I haven't put any constraints from here. So, I have just put an image view and the label, and I designed this in an iPhone XR layout, and I am running this on an iPhone XR simulator. And in fact, most probably, we won't experience any difficulties. It's not going to be different than this, because we're designing in the same layout, same model as we are running in the simulator. And later on we're going to run this in another simulator in iPhone SE or iPhone 6 or something small. And we will see if they look like I like. They won't by the way, because we're designing this in a big screen, according to this big screen. So, it should be something wrong displaying this big screen, big design into a small screen. And in iPhone XR, as you can see, it looks perfect. This is what I need to look at.

So, this is what I want. But let me go and change my simulator from here. So, if you don't have any simulators at this moment, like a small one like iPhone 7 or iPhone SE, you can click over here and in the simulator section, you can add whatever you want. We have seen this before, right? So, for example, I have downloaded an iPhone SE. So, let me play, let me run this in an iPhone SE environment. So, right now I designed this in a very big screen, but I'm running this in a very small screen. And actually, I believe this is the biggest screen size right now. And iPhone SE is the smallest screen size. So, it makes a perfect combination to see if my project will work the same in different screen sizes. So, it's kind of important because when you put your app on the App store, they will download your app, and they will try to run their own phones. And by they, I mean the users themselves. So, it's pretty important that it will look the same on different environments.

And as you can see, it doesn't look the same or it isn't even close, right? So, in the iPhone XR, we have pretty much what we want- this one. But in the left-hand side we see the iPhone SE. So, we don't see the rest of the image. And this project layout label is pretty much skewed to the right. So, it's not in the center, and this is not what we want. If we don't do necessary actions, if we don't take necessary cautions in the layout, it won't work the same for different kinds of models. So, we're going to stop here. And within the next lecture, we're going to start learning about how to do this kind of operations in a very efficient way.