This workshop will be retired on May 31, 2020.
Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.
Anatomy of a Constraint8:30 with Pasan Premaratne
Every constraint forms a relationship between two attributes. Let's go over the different attributes we can use to create different constraints.
An important part of constraints are these things called attributes. 0:00 A constraint allows you to establish a relationship 0:05 between the attributes of a single view or attributes on two different views. 0:08 But again, what are attributes? 0:14 An attribute is a position on a view's alignment rectangle. 0:17 The alignment rectangle is a rectangle like a views frame, 0:21 that is based on the presentation of content in that view. 0:25 Auto layout uses a views alignment rectangle to position a view on screen. 0:30 An attribute is a position on a views alignment rectangle, and 0:35 we can establish certain relationships between 0:40 different attributes on different alignment rectangles. 0:42 There are a lot of different attributes, so let's go over each one. 0:46 The first set of attributes correspond to the edges of views alignment rectangle and 0:50 are the left, right, top and bottom attribute. 0:56 By establishing the relationship with these attributes, 1:00 we can align one view with another views edges. 1:04 Next up, we have leading and trailing. 1:08 Leading and trailing are similar to the left and 1:11 right attributes, except it depends on the language being used. 1:14 So this only matters if you have content. 1:19 For example, with a left to right language, like English, 1:21 the leading attribute corresponds to the left attribute where our text begins. 1:26 And trailing corresponds to the right where the text usually ends. 1:32 However, in right to left systems like Arabic, 1:36 leading corresponds to the right attribute and trailing with the left. 1:39 When working with labels that display text in different languages, 1:43 we can use these leading and trailing attributes rather than the left or 1:47 right edge to ensure that our labels are aligned properly. 1:51 By saying that a label's leading edge needs to 1:56 have a relationship with its superview's leading edge, we can guarantee that 2:00 regardless of the direction of the language, this always stays the same. 2:05 Next step, we have the height and width attributes. 2:09 Which as it sounds like, allows us to establish a relationship with the height 2:11 and width of a view's alignment rectangle. 2:16 So here we can specify that we want to define a constant value for 2:19 these attributes the height and width, 2:23 which allows us to define an equation that determines the height of a view. 2:26 We might also want to align two views along the horizontal and 2:31 vertical axes like we saw in our trivial example. 2:35 And for that, we have two attributes, CenterX and CenterY. 2:39 When working with a view that contains text, we also have a baseline attribute. 2:42 You can think of a baseline as this imaginary line inside the view 2:48 where text rests on. 2:52 If your view, let's say a label, contains multiple lines of text, you have a first 2:54 baseline attribute which is this imaginary line to the first line of text sits on. 3:00 And then along with the first baseline we also have the last baseline, 3:05 which of course is the line where the last line of text sits. 3:09 So these are the attributes that directly relate to the views alignment rectangle. 3:13 We have a few more attributes that are used for 3:18 positioning subviews in any particular view. 3:20 Every view contains margins that allow you to modify how much white space 3:24 exists between the edges of a view, and any subviews added. 3:28 The attributes that govern this relationship are mainly the left, top, 3:32 right and bottom margins. 3:38 Just like the left attribute, the left margin attribute represents an imaginary 3:40 margin inside the view that we align things with. 3:45 By default, when we create constraints and interface builder, 3:48 these margins are taken into account and we respect those margins and 3:52 pin to them rather than the edges of a view. 3:56 In addition to the base margin attributes, we also have leading margin, 3:59 trailing margin, center x with margins and center y with margins. 4:04 So these attributes represent the same relationships as the ones we saw earlier 4:09 but again they're taking margins into account when laying out subviews. 4:14 The last attribute, oddly enough, is called NotAnAttribute. 4:18 So often times we want to create constraints that don't reference 4:22 other views. 4:26 Under the hood, we use the NotAnAttribute attribute to make this happen. 4:27 It's confusing but we'll get into this when it matters. 4:32 As you can see we have a lot of options when establishing relationships 4:35 between views. 4:38 You don't have to keep all of this in mind at all. 4:39 Because both in interface builder and in code we have auto complete options, 4:42 modal selection and lots of different things that help us figure out 4:46 what attribute we want to work with. 4:50 If you do it in interface builder, 4:52 we don't even have to worry about this attribute concept. 4:54 We can just use some plain language and ask to align with certain edges. 4:57 Now, once you've identified the attributes that you want to use, 5:01 the next step is to build a relationship between these attributes. 5:05 There are three kinds of relationships we can build, and the first one is equal. 5:10 An equal relationship is very intuitive and simply says 5:15 I want view B's height attribute equal to view A's height attribute. 5:19 And that would make both the heights equal, simple enough. 5:24 There are two more kinds of relationships that we can establish between attributes, 5:27 a less than or equal, and a greater than or equal. 5:32 As the title states, when you specify a less than or equal relationship, 5:36 you're saying that I want view B's width attribute to be less than or 5:40 equal to view A's width attribute by a certain amount. 5:44 We can do the opposite with a greater than or equal relation. 5:47 These two are known as inequality constraints. 5:51 And there's a bit more that you need to know before you can use them. 5:54 So we're gonna put this aside for now, and we'll come back to this in a later video. 5:57 Once we've established the type of relationship we want to create, 6:01 the next part is the multiplier. 6:05 Going back to our equation, after we have two items with two attributes and 6:07 a type of relationship we need to think about the multiplier. 6:11 The multiplier is a fixed value that let's you adjust the relationship 6:15 between the two attributes by a certain factor. 6:19 For example you can say that you want ViewB's height to equal 0.75 times or 6:23 two-third that of ViewA's height. 6:28 The 0.75 here is the multiplier. 6:31 The multiplier is a required value and 6:35 often times the value provided is simply one to keep the relationships equal. 6:37 But the multiplier is really powerful because you can use 6:42 any floating point number to build up a relationship. 6:45 Now this is something you should care about later, but 6:48 it's important to note that the multiplier cannot be changed 6:51 after you've created one of these constraint equations. 6:54 If you want to modify the multiplier, let's say you create a constraint 6:58 relationship that's as ViewA and ViewB have the same height, right? 7:02 So you have an equal relationship with a 1.0 multiplier, if you wanted to change 7:07 that multiplier to 2.0, to say that you ViewB now to be double the height. 7:11 Well you need to get rid of the original constraint and create a new one entirely. 7:17 Okay, let's to back to that constraint equation. 7:22 We now know what the attributes available to us are, 7:24 we know what the multiplier does, so the last bit is the constant. 7:27 The constant is probably the most straightforward thing to understand, and 7:32 it allows us to offset a view from 7:35 a desired attribute by a certain floating point value. 7:38 In our first example, we said that we wanted to position a label 7:41 away from the bottom of the superview by a certain amount of padding. 7:45 Well, that padding is the constant value. 7:48 Or what if we had two views whose heights were equal but 7:51 we always wanted ViewB's height to be ten points more than ViewA's height, 7:55 regardless of what you ViewA's height is. 8:01 Well again we can use the constant how you to specify that. 8:04 So again I know I'm just kinda quickly going over these things and 8:08 that's sort of the point. 8:11 Because you really can't understand constraints until you start 8:13 writing them yourself, which we're about to do in a second. 8:16 Okay, so let's stop talking about theory. 8:19 Now that you know what the different parts, the moving parts of the constraint 8:21 equation are, let's use this knowledge to build up a few examples. 8:25
You need to sign up for Treehouse in order to download course files.Sign up