Hi, within this lecture we're going to focus on details of constraints and we're going to see how we can change the constraints that we have previously added. If you click one of these constraints, you will see them highlighting. As you might remember, we have to decrease this 58 number because it pushes the label from each side. So, it doesn't fit in the current layout. So, I'm going to go for 10 instead of 58. Can I do that?

Yeah sure. Just come here and change the constant. So, right now the left constraints and the right constraints of this project layout label is 10. So, in here I can see the other attributes, the other constraints attributes as well. So, let me click one of these. As you can see, it connects the metallica.jpg.top to the project layout's bottom, and this one connects the project layout's top to the iPhone safe area top. And I can change that from here, actually. So, let me zoom in, so you can see it better. So, this is Project Layout and it starts at the top, as you can see and this is safe area and by safe area it means that the upper bound of this iPhone X or iPhone XR. So, as you can see, if I click on this, this is the safe area and it connects the safe area to the top of this label; so I can change this. I can change, I can say that don't connect this to the top. Just connect this to the bottom of the project layout, for example, or center of the project layout. If I choose this, as you can see, go for 'Bottom' and it connects the safe area to the bottom of the project layout.

And again, this doesn't make sense. It makes sense to connect this to the top of the project layout. I'm just doing this for an example. But there might be some cases where you want this to be connected to the center or to the top, so you can change it over here. You can change the constant values over here as well, as you can see. So, this is now okay, and in here, I believe the choice of the Metallica image was not good, so it doesn't look good in a big image view like this. So, maybe we can go for some other content mode in order to see the actual size of this image view like this. So, it actually starts a little below from the project layout. So, this constraint actually works. 

So, this is five or eight; maybe we can do it something like 10 or 20, I don't know, but it looks good to me and we have the right and left constraints as well. So, we can see all image inside of iPhone SE and iPhone XR. So, I'm going to change it back to aspect fit or maybe you can just leave it like this. Maybe this is the view you want; I don't know. And I believe this is actually better to use because we can see the image views actual size in this mode. And let me click on this and let me try to increase this constant, as you might see when I increase the Metallica image goes down a little bit. If I decrease Metallica image, goes up a little bit. So, in real time, it makes these adjustments. So, again, I can change this. For example, I can do top so it connects the top of this image view to the bottom of this label or top of this label. And of course, this doesn't make sense, but in some cases maybe you may want to use them.

The point that I'm trying to make here, after you actually add these constraints, because in a real complicated app you will have to spend much time adjusting these constraints in order to have a better looking app. So, you need to be comfortable to work on these constraints. So, we have a priority number over here. It really means priority and it comes 1,000 as a default value. Let me show you; let me try and show you what these priorities do. So, when I add one constraint and when I add another constraint, if they actually conflict with each other, we choose some priority. So, let me add one more constraint to the right-hand side of this image and make this 12. So, I have two constraints connecting right side of this image to the right side of the phone. One is 10 and the other one is 20. And as you can see, we are seeing some red constraints over here. It isn't a good sign, it means there is an error. So, we have to; of course, this doesn't make sense. It doesn't make sense to use two like this. But if I change the priority to 999, it means that try to leverage, try to execute this two, and if it fails, if one fails, try to go with the prioritized one. So, it's going to go with the 10 instead of 12 in this case. So, maybe if you want to add two constraints and if they overlap or if they conflict, you will have to create a priority. So, you will deprioritize one so that the other one will be prioritized whenever there's a conflict and it will be in place. So, this is how it looks like.

You learnt about this, but there is still to learn about something, as you can see, there is a width and a height constraint in here and we haven't seen it. For example, let me add a height and as you can see, it adds a linear vertical line in here. It means that whenever or wherever I run this image, wherever I run this app, regardless of the screen size, it will have this height. Okay, so if you want some really strict images or really strict view like, this has to be 50 x 50 or this has to be 100 x 100. You can go for the width and the height constraints. And this will come in handy when you experience some problems with the constraints. Sometimes we happen to come across in a situation like this. 

We have to add this width and height. In some situations, if we add constraints and if you cannot see the view after you run the simulator, it means that the constraints are suppressing somehow, so we cannot see the view. As you can see, when I add the width and height, regardless of the screen size, it displays all the image in the height that I have specified. So, whenever you come across in a situation in which you cannot see the view itself because of the constraints, try to use width and height. So, it will make these values static, it will make these values in a strict way so that they will be executed. And as you can see, width and height constraints are shown in a different hierarchy because they belong to Metallica jpeg image views hierarchy rather than the constraints hierarchy. They are like an attribute right now. So, if you want to change them, you can reach them under your image view. So, you can delete actually, when you choose a constraint. If you do a backspace or delete on your keyboard, it will just delete the constraints. We're going to stop here and within the next lecture, we're going to see some easy ways to work with constraints.