Auto Layouts , NSLayoutConstraint, Traits in iOS , with Objective C examples.

1. Auto Layouts
Lakhdeep Singh Jawandha

2. What is Auto Layout?
Auto Layout is a new way to define dynamic
GUIs. Before, we had autoresizing masks, that
described how a subview will resize or move when
its superview is resized. With Auto Layout you can
do the same and also a lot more complicated GUIs
quite easily.

3. • Auto Layout minimizes your calculation.
• Auto Layout design is indirect, but it’s also more flexible.
• Auto Layout is driven by geometry.
• Auto Layout focuses on relationships.
• Support different screen sizes in your apps .
• Auto Layout seeks optimal solutions.
Features

4. Enable it

5. Constraint
A Mathematical representation of a human : expressible statement
"the left edge should be 20pt of the superviews left
edge"
view.left = (superview.left + 20)
y = m * x+ c
(y = attribute1 = view.left)
(x = attribute2 = superview.left)
(m = multiplier = 1)
(c = constant = 20)

6. Constraint
‣ Two items with an attribute
‣ Constant
‣ Relation
‣ Multiplier
‣ Priority level

7. Attribute?
‣ Left
‣ Right
‣ Top
‣ Bottom
‣ Leading ~ left or right depending on language settings
‣ Trailing ~ right or left depending on language settings ‣ width
‣ Height
‣ CenterX
‣ CenterY
‣ Baseline

10. Constant?
➢ Physical size or offset

11. Relation?
• Equal
• Less than or equal
• Greater than or equal
• If you want just "less than" or "greater than",
adjust the constant

12. Multiplier?
• Multiplier works on 2 objects.
• By Defaul Value is 1.
• It May be Integer ,Float and Ratio .

13. Priority
‣ Constraints with higher priority are satisfied before constraints with lower
priority.
‣ Default = UILayoutPriorityRequired (1000)
‣ Other predefined priorities
‣ UILayoutPriorityRequired = 1000
‣ UILayoutPriorityDefaultHigh = 750
‣ UILayoutPriorityDefaultLow = 250
‣ You can use any integer value between 0-1000

14. Adding Constraints
• Control-Dragging Constraints
To create a constraint between two views,
Control-click one of the views and drag to the
other.
When you release the mouse,
Interface Builder displays a HUD
menu with a list of possible
constraints.

15. • Using the Stack, Align, Pin and Resolve Tools
Interface Builder provides four Auto Layout tools in the bottom-right
corner of the Editor window. These are the Stack, Align, Pin, and Resolve
Auto Layout Issues tools.

16. • Align Tool
The Align tool lets you quickly align items in your layout. Select the items you want to align, and then
click the Align tool. Interface Builder presents a popover view containing a number of possible alignments.

17. • Pin Tool
The Pin tool lets you quickly define a view’s position relative to its neighbors or quickly define its
size. Select the item whose position or size you want to pin, and click the Pin tool. Interface
Builder presents a popover view containing a number of options.

18. • Resolve Auto Layout Issues Tool
The Resolve Auto Layout Issues tool provides a number of options for fixing common Auto
Layout issues. The options in the upper half of the menu affect only the currently selected views.
The options in the bottom half affect all views in the scene.

19. • Finding and Editing Constraints
After you’ve added a constraint, you need to be able to find it, view it, and edit it. There are a
number of options for accessing the constraints. Each option offers a unique method of
organizing and presenting the constraints.
• Viewing Constraints in the Canvas
The editor displays all the constraints affecting the currently selected view as colored lines
on the canvas. The shape, stroke type, and line color can tell you a lot about the current
state of the constraint.
Solid Lines - Solid lines represent required constraints (priority = 1000).
Dashed Lines - Dashed lines represent optional constraints (priority < 1000).
Red Lines - One of the items affected by this constraints has an error.
Orange Lines - Orange lines indicate that the frame of one of the items affected by
this constraint is not in the correct position based on the current set of constraints.

20. Blue Lines - The item’s frame is in the correct position as calculated by the Auto Layout engine.
Equal Badges - Interface Builder shows constraints that give two items an equal width or an
equal height as a separate bar for each item. Both bars are tagged with a blue badge containing an
equal (=) sign inside.
Greater-than-or-equal and less-than-or-equal badges - Interface Builder marks all constraints
representing greater-than-or-equal-to and less-than-or-equal-to relationships with a small blue
badge with a >= or <= symbol inside.

21. Listing Constraints in the Document Outline
• Interface Builder lists all the constraints in the document outline, grouping
them under the view that holds them.
• Also you could link constraint to properties of your controller as you do for
any other components. Just ctrl drag it into your code:

22. Finding Constraints in the Size Inspector
The Size inspector lists all the constraints
affecting the currently selected view. Required
constraints appear with a solid outline, and
optional constraints appear with a dashed outline.
The description lists important information about
the constraint.

23. Tips
➢ Where to add which constraints?
‣ When constraints only apply to 1 view (eg setting dimensions)
‣ create on view
‣ add to view
‣ When constraints apply to more than 1 view (eg pin one view to
another)
‣ Create on target view
‣ Add to common superview of both views (usually the same)
➢ Don't assume a view has a fixed size.
‣ (unless you give it a size constraint)
➢Create constraints between a view and its nearest neighbor.

24. ➢Avoid giving views a fixed height or width.
➢Make sure all the views in your layout have meaningful names. This makes it
much easier to identify your views when using the tools.
➢ Try to minimalise the number of constraints .
‣ Solving takes time.
‣ More Constraints ,more Complex.
➢Create extra container view in Scroll view.
Tips

25. Tips
➢ Animating constraints
‣ Set constraints outside animation block.
‣ call layoutIfNeeded in animation.
‣ Make sure you do this on the correct “top level view” otherwise
nothing will animate!
self.offsetConstraint.constant = [self calculateOffset];
[UIView animationWithDuration:0.3 animations:^{
[self.view layoutIfNeeded];
}];