1 00:00:00,000 --> 00:00:04,601 [MUSIC] 2 00:00:04,601 --> 00:00:07,381 Layout isn't a simple thing for a computer to solve and 3 00:00:07,381 --> 00:00:11,250 many people have attempted to solve the problem in different ways. 4 00:00:11,250 --> 00:00:15,620 Back in 2001, two computer scientists at the University of Washington, 5 00:00:15,620 --> 00:00:20,240 Greg Badros and Alan Borning, along with Peter Stuckey of the University of 6 00:00:20,240 --> 00:00:24,050 Melbourne, wrote a paper detailing their approach, and 7 00:00:24,050 --> 00:00:29,130 called it the Cassowary Linear Arithmetic Constraint Solving Algorithm. 8 00:00:29,130 --> 00:00:34,450 Cassowary, according to the authors, is an incremental constraint solving toolkit 9 00:00:34,450 --> 00:00:39,340 that efficiently solves systems of linear equalities and inequalities. 10 00:00:39,340 --> 00:00:40,760 Does this sound familiar? 11 00:00:40,760 --> 00:00:45,600 Well it should, because Auto Layout is built on top of the Cassowary algorithm. 12 00:00:45,600 --> 00:00:49,640 This means that not only is Auto Layout good at solving these relationships 13 00:00:49,640 --> 00:00:54,450 of linear equalities and inequalities, but it does this in a very efficient and 14 00:00:54,450 --> 00:00:55,710 rapid manner. 15 00:00:55,710 --> 00:00:57,870 Perfect for user interfaces. 16 00:00:57,870 --> 00:01:01,990 Oddly enough, the Cassowary algorithm was developed as a way to augment 17 00:01:01,990 --> 00:01:03,950 CSS on the web development site. 18 00:01:03,950 --> 00:01:05,910 But it never really took off. 19 00:01:05,910 --> 00:01:09,600 Auto layout was introduced in 2012 on iOS and 20 00:01:09,600 --> 00:01:13,120 is a constraint-based descriptive layout system. 21 00:01:13,120 --> 00:01:16,330 Much of the system is still based on the original premise of 22 00:01:16,330 --> 00:01:18,260 the Cassowary algorithm, 23 00:01:18,260 --> 00:01:23,830 in that the relationships between views can be expressed as linear equations. 24 00:01:23,830 --> 00:01:27,160 Earlier, we attempted to display views on our screen 25 00:01:27,160 --> 00:01:31,090 by hard-coding the position using actual coordinate points, or 26 00:01:31,090 --> 00:01:33,660 as programmers like to call them, magic numbers. 27 00:01:33,660 --> 00:01:37,550 Because to anyone reading the code, they seem like arbitrary values. 28 00:01:37,550 --> 00:01:40,100 Rather than specifying the coordinate values, 29 00:01:40,100 --> 00:01:45,070 we can describe the position of this view in relation to its superView. 30 00:01:45,070 --> 00:01:47,990 In this case, we can say, we want the view, or 31 00:01:47,990 --> 00:01:52,070 label, to be centered horizontally in its superView, and 32 00:01:52,070 --> 00:01:56,210 we want the label to be some distance away from the bottom of its superView. 33 00:01:56,210 --> 00:01:58,100 Simple descriptions, right? 34 00:01:58,100 --> 00:02:00,070 We don't care about exact coordinates. 35 00:02:00,070 --> 00:02:03,450 But we want the view to always be represented in this manner. 36 00:02:03,450 --> 00:02:06,620 Turns out, using Cassowary, and therefore Auto Layout, 37 00:02:06,620 --> 00:02:11,220 these descriptions can be easily expressed as linear equations. 38 00:02:11,220 --> 00:02:12,640 For the first description, 39 00:02:12,640 --> 00:02:17,410 where we want the label to always be in the horizontal center of the superView, we 40 00:02:17,410 --> 00:02:21,450 can write an equation that looks something like this at its very basic level. 41 00:02:21,450 --> 00:02:25,590 Label.centerX = superview.centerX. 42 00:02:25,590 --> 00:02:26,640 And similarly for 43 00:02:26,640 --> 00:02:30,480 the second description, we can define a linear equation that looks like this. 44 00:02:30,480 --> 00:02:34,220 We can see the labels bottom should be equal to the superView's bottom 45 00:02:34,220 --> 00:02:36,410 minus a certain amount of padding. 46 00:02:36,410 --> 00:02:42,370 In Auto Layout, these descriptive linear equations are what we call constraints. 47 00:02:42,370 --> 00:02:46,990 A constraint provides a fluent layout language that allows us to define 48 00:02:46,990 --> 00:02:51,340 relationships between views in terms of simple linear equations. 49 00:02:51,340 --> 00:02:54,920 While it might seem like there are many different ways to express these 50 00:02:54,920 --> 00:02:59,870 view relationships, it actually all boils down to a simple equation. 51 00:02:59,870 --> 00:03:03,530 The As in this equation refer to view attributes. 52 00:03:03,530 --> 00:03:04,850 What are attributes? 53 00:03:04,850 --> 00:03:06,840 Don't worry, we'll get to that. 54 00:03:06,840 --> 00:03:11,200 If we generically call a view an item, our equation looks like this. 55 00:03:11,200 --> 00:03:13,783 It would say A1 = (M * A2) +C. 56 00:03:13,783 --> 00:03:20,558 Constraints are relationships described either between attributes on a view or 57 00:03:20,558 --> 00:03:26,120 an item or between attributes on two different views. 58 00:03:26,120 --> 00:03:29,440 So A1 can be an attribute on view one. 59 00:03:29,440 --> 00:03:32,150 And A2 can be an attribute on view two. 60 00:03:32,150 --> 00:03:35,790 A2 can also be an attribute on view one itself. 61 00:03:35,790 --> 00:03:39,960 The next part, M in our equation, refers to a multiplier. 62 00:03:39,960 --> 00:03:43,850 This allows us to modify the relationship by a certain amount. 63 00:03:43,850 --> 00:03:47,570 The C in the equation refers to a constant value and 64 00:03:47,570 --> 00:03:50,930 is used to offset the equation by a certain amount. 65 00:03:50,930 --> 00:03:54,120 Now people often joke about the fact that the only thing you can change in 66 00:03:54,120 --> 00:03:58,360 a constraint, once it's created, is this value called constant. 67 00:03:58,360 --> 00:04:01,810 That is essentially the basic premise underlying Auto Layout, 68 00:04:01,810 --> 00:04:03,600 the constraint equation. 69 00:04:03,600 --> 00:04:06,860 Over the next few videos, let's break down each part of this equation 70 00:04:06,860 --> 00:04:09,690 to understand the different types of constraints that we can write.