1 00:00:00,420 --> 00:00:03,770 Layout isn't a simple thing for a computer to solve and 2 00:00:03,770 --> 00:00:07,620 many people have attempted to solve the problem in different ways. 3 00:00:07,620 --> 00:00:12,460 Back in 2001, two computer scientists at the University of Washington, 4 00:00:12,460 --> 00:00:16,245 Greg Badros and Alan Borning, along with Peter Stuckey 5 00:00:16,245 --> 00:00:20,845 of the University of Melbourne, wrote a paper detailing their approach and 6 00:00:20,845 --> 00:00:25,745 called it The Cassowary Linear Arithmetic Constraint Solving Algorithm. 7 00:00:25,745 --> 00:00:31,375 Cassowary, according to the authors, is an incremental constraint solving toolkit 8 00:00:31,375 --> 00:00:36,650 that efficiently solves systems of linear equalities and equalities. 9 00:00:36,650 --> 00:00:40,040 Auto Layout is actually built on top of this algorithm, and 10 00:00:40,040 --> 00:00:44,810 is pretty good at solving the layout issues in an efficient and rapid manner. 11 00:00:44,810 --> 00:00:48,790 Auto Layout was introduced in 2012 on iOS, and 12 00:00:48,790 --> 00:00:52,510 is a constraint-based, descriptive layout system. 13 00:00:52,510 --> 00:00:55,860 Much of this system is still based on the original premise of 14 00:00:55,860 --> 00:00:57,770 the Cassowary Algorithm, 15 00:00:57,770 --> 00:01:03,670 in that relationships between views can be expressed as linear equations. 16 00:01:03,670 --> 00:01:08,360 Using Auto Layout, rather than specifying coordinate values, we can describe 17 00:01:08,360 --> 00:01:13,880 the position of a view in relation to its superview or neighboring views. 18 00:01:13,880 --> 00:01:19,820 We can say that we want a view or label to be centered horizontally in its superview. 19 00:01:19,820 --> 00:01:25,120 And we want that label to be some distance away from the bottom of its superview. 20 00:01:25,120 --> 00:01:28,890 In Cassaway, and as an extension, Auto Layout, 21 00:01:28,890 --> 00:01:33,980 these relationships can be expressed as a series of linear equations. 22 00:01:33,980 --> 00:01:38,380 For the first description, where we want the label to always be in the horizontal 23 00:01:38,380 --> 00:01:42,978 center of the superview, we can write an equation that looks something like this. 24 00:01:42,978 --> 00:01:48,130 label.centerX = superview.centerX. 25 00:01:48,130 --> 00:01:49,020 And similarly for 26 00:01:49,020 --> 00:01:54,110 the second description, we can define a linear equation that looks like this. 27 00:01:54,110 --> 00:01:59,670 We can say label.bottom = superview.bottom- {padding}. 28 00:01:59,670 --> 00:02:05,220 In Auto Layout, these descriptive linear equations are what we call constraints. 29 00:02:05,220 --> 00:02:09,700 A constraint provides a fluent layout language that allows 30 00:02:09,700 --> 00:02:14,605 us to define relationships between views in terms of linear equations. 31 00:02:14,605 --> 00:02:18,080 While it might seem like there are many different ways to express these 32 00:02:18,080 --> 00:02:22,770 relationships, they all boil down to a simple equation. 33 00:02:22,770 --> 00:02:27,150 The As in this equation refer to view attributes. 34 00:02:27,150 --> 00:02:28,230 What are attributes? 35 00:02:28,230 --> 00:02:29,990 Don't worry, we'll get to that. 36 00:02:29,990 --> 00:02:34,990 If we generically call a view an item, our equation looks like this. 37 00:02:34,990 --> 00:02:40,930 Constraints are relationships described either between attributes on a view, 38 00:02:40,930 --> 00:02:44,540 or between attributes on two different views. 39 00:02:44,540 --> 00:02:51,241 So A1 can be an attribute on view 1, and A2 an attribute on view 2. 40 00:02:51,241 --> 00:02:54,690 A2 can also be an attribute on view 1. 41 00:02:54,690 --> 00:02:58,680 The M in this equation refers to a multiplier. 42 00:02:58,680 --> 00:03:02,560 This allows us to modify the relationship by a certain amount. 43 00:03:02,560 --> 00:03:05,970 The C refers to a constant value, and 44 00:03:05,970 --> 00:03:09,820 is used to offset the equation by a certain amount. 45 00:03:09,820 --> 00:03:13,450 Now, people often joke about the fact that the only thing you can change once 46 00:03:13,450 --> 00:03:18,620 a constraint is created is this value that's called constant. 47 00:03:18,620 --> 00:03:21,230 So this is essentially the basic premise or 48 00:03:21,230 --> 00:03:25,190 building block underlying Auto Layout, a constraint equation.