All right. 1
So now that we've learned about the basic components of Constraints namely alignment and pinning, we're 2
ready to move on to are more complex interface which is our Main.storyboard. 3
So if we head over there, you can see that we've got the same kind of green background and that we want 4
it to cover all four sides. 5
So as the first challenge, to review what you learned in the last lesson, add some Constraints to that 6
background, 7
green felt, so that even when it's in landscape, it covers all four sides without stopping at any of the 8
safe areas. Pause the video and try to complete this challenge. 9
All right. 10
So just as before, we're going to select the item that we want to add a Constraint to, either in the document 11
outline or on the canvas depending on how cluttered it is. 12
And then we're going to go and set our Constraints to be zero from all four sides and we can click on 13
the dropdown to make sure that it actually is selecting the view, rather than the safe areas. And now we've 14
got zero from all four sides of the superview here. 15
And now we can add our constraints and we can check in landscape, as well as portrait, 16
and also we can inspect our constraints in more detail by clicking on it and looking at the Attribute 17
Inspector. 18
So that's pretty easy, 19
but the next part gets harder, 20
because how are we going to layout all four of these elements on screen in this layout and make sure 21
that it looks decent in the landscape orientation as well. 22
Because the problem here is that, firstly, we can't simply just use alignment because we don't actually 23
have anything that's right in the middle of our screen. 24
There's nothing that exists here. 25
And if we wanted to use pinning, well, we don't actually have enough vertical space to be able to pin 26
all of our elements together. 27
So what can we do instead? 28
Well, we could use some containers to split up the screen into three equal parts, and then we can embed 29
each of these elements inside its own container. 30
So now the superview to this particular logo will be this purple container and we can set it to be 31
vertically and horizontally aligned in the middle of that container. 32
So let's give that a go. 33
Let's start by creating a container. To do that, all we need to do is go to our Object library and locate a 34
view element. Now, because there's a lot of things that are called views, Table View, Image View, Progress 35
View, I find it's usually easier to type UI View which is actually the underlying element here. 36
And it's simply just an empty view. 37
And in this case, we're using it to layout some of the sub views, 38
so something that we're going to put inside this container. 39
Let's click and drag it onto our screen and I'm going to put it somewhere near the top here, and then 40
we're going to drag it out. 41
And now what we need to embed our Dicee logo inside this new view. And to do that, I'm going to click and select 42
my Dicee logo, and then drag it, so that this little circle here is indented below the view. 43
So this shows that it's going inside, whereas when it's alongside it, it means it'll be just parallel. 44
So we know that the layout of our view goes from the bottom to the top. 45
So this is at the very top, 46
and then it's this at the next level than this, 47
and this is at the very bottom. 48
So our eye is looking at this direction. We could change 49
where our Dicee logo lives relative to that new view. 50
But in our case, we actually want it to be inside the view, 51
so we need it to be embedded, so we get this effect. 52
So now that we've embedded our Dicee logo in its own view, let's go ahead and embed these two dice image 53
views in its own container in the middle. 54
I'm gonna use a different way of embedding. 55
I'm gonna go to Editor and then I'm gonna go to Embed In, and I'm going to select a View. 56
So now the two dice image views have been embedded in its own view and it's exactly the same thing as 57
what we did before, 58
but it's perhaps a little bit easier, a little bit quicker. 59
And finally, for the Roll button, I'm going to show you a third way of embedding in a view which is the 60
click on this button, and then Embed, and View. 61
So depending on which method you remember or you find the easiest, then you can choose whichever way 62
you want to do it, but they all do the same thing. 63
So now we have three views and they're all called View, 64
so it's a little bit confusing. 65
So we can go ahead and select it, and then click on the Identity Inspector and give it a label, so we 66
can call this one the MiddleView because it's right in the middle, and we can call this one the Top 67
View, and maybe this one the Bottom View. 68
So now we've got all three on screen and we can collapse them and you can rearrange them if you want 69
to make sure that it says Top Bottom and Middle, although, be careful that you don't accidentally embed 70
one of the views in another one. 71
So by the end you should have all of them aligned to the same indentation showing that none of these 72
are inside each other, but they are all inside the superview. 73
And now we have all three containers which can now be used to layout these subviews or these items 74
that are inside it. 75
So for example, our Dicee logo can now be aligned to the horizontal and vertical center of that Top view. 76
But notice that as soon as we do that, we get an error. 77
If we click on this button, it tells us what the problems are. 78
And it's because even though we've defined the constraints for the logo, well, the location of this container 79
view is kind of ambiguous. It doesn't--we don't know where to put it for its X position or for its Y position 80
because it's currently kind of just hanging out in the middle without any Constraints of its own. 81
So how can we give it some constraints? 82
Well, to explore that and more, we'll see you on the next lesson.