Hi, within this lecture, we're going to see how we can leverage constraints in order to make some sustainable views across different kinds of screen sizes, different kinds of iphone models. For example, right now in our image view we see that there is a little space in the right-hand side and left-hand side. Okay, so there is a space between this project layout label and the image view as well. So basically, what constraints do, they actually define

what kind of a space is going to be here, here, and between the project layout, between the image and phone, between the project layout and phone. So, we're going to predefine these values over here, okay? So, we're going to say whatever the screen size just make sure that there's 10 pixel space or 10 point space between this project layout and the top of the phone or right of the phone and project layout make sure there is 50 point space or between metallica image and between project layout make sure there is 10 point space.

So, we're going to use constraints in order to define these values so that when we try to open this in a different screen size, it will be defined, right? So, whether it's an iphone XR or whether it's an iphone SE, the Xcode will know that it has to leave some space from the left-hand side and right-hand side before showing this picture. So, it will wrap the picture around the spaces, around these constraints. And in order to do that, I'm going to go for the second bottom, not the third one that we have worked before, but for the second one. So, this is constraints background. Okay, this is constraints menu. What we're going to do, we're going to add some constraints using this menu. And as you can see, this is spacing to nearest neighbors. So, for the nearest neighbor for this image right-hand side, the left-hand side, and for the top side we have the project layout and we don't have any other neighbors here.

So, for example, if we click over there, we see the current spaces, so we can just choose to go with the spaces where we can alter them as we want and in the bottom we don't have any neighbor right now. So, it's a big number. Okay, and it doesn't make sense to use that number right now, but for upper space, for upper bounds we have to have something. What do I mean? If I click over this red line over here, it means that add one constraint. So I can just click on this to add this constraint or I can choose the other ones as well and add three constraints at once. So here, I'm just going to go for the current values and add these constraints and see what it looks like. So if you click on this at three constraints, you will see that this little blue lines appear in the screen. So, let me zoom in and if I click one of these lines, I will see the properties of the constraints themselves. So, this is a constraint and I can reach the constraints from here left-hand pane as well, so click over this and as you can see, you can choose the constraint and you can even change the properties of constraints as well.

So, what you have chosen initially is not going to go there forever you can choose to change it afterwards. So, as you can see after I do that it gives me some errors. It says that you have to give some of the constraints to project layout as well, because in metallica image you added and constraint to project layout. So, I have connected top of my metallica image to the bottom of the project layout. So, project layout should have some constraint in order for us, in order for Xcode to understand where it will place the project layout, okay? So, I can come over here and I can just say fix it, it will add the missing constraints but I'm going to do that manually. Later on, we're going to see the easiest way of doing this stuff as well. But for right now, we are doing this manually so we can learn. So, with clicking project layout I'm choosing the new constraints so make sure that project layouts is clicked or else it wouldn't show here as you can see.

Once you click it, it will pop up and I'm choosing the left and right. I'm saying add two constraints. Right now, the errors went away I believe, so, it knows where to place project layout and it knows where to place image view right now. So, that's not perfect yet. But I believe we can try this, okay? Because we have given our constraints, so, let's see how this time how does it look like in iphone SE. So I'm running this on iphone SE one more time. I remember we weren't seeing the image view at all and now we can see it, right? But there are some still issues. I cannot see this project layout, it seems that it doesn't fit to the screen. But previously we could see that right? It shouldn't be because of the text size, it should be because of the constraints that we have given right now. And metallica image is far below so we have to make sure to change that. If I click one of the constraints, I can see its current values like in here I have this 58 and I believe we made this constraint too large. So, it's right, trying to make 58 from each other side. So, it's trying to push the project layout label from each side, so it won't fit. So, that's what going to focus on in the next lecture, we're trying to solve the problems that we have just created in order to practice constraints a little bit more.