![Page 1: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/1.jpg)
Giuseppe AriciiOS & OS X Developer
Auto Layout Under Control
![Page 2: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/2.jpg)
Speaker•Giuseppe Arici
• #pragma mark § Founder, Preacher & VP ;-)
•Tiltap & Superpartes § iOS & (OS X) Developer
• [ lk | tt | fb ] / giuseppearici § [email protected]
![Page 3: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/3.jpg)
Session1. Auto Layout Theory
2. Interface Builder Practice
3. Coding Practice
4. Special Cases
5. Compatibility & Migration
6. Final Thoughts
![Page 4: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/4.jpg)
1/6 Auto Layout Theory
![Page 5: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/5.jpg)
History•Display Form Factor Evolution:
• iPhone, iPad, iPhone Retina, iPad Retina, iPhone 4-inch Display !
• Inspired by: Cassowary A Constraint Solving Toolkit• http://www.cs.washington.edu/research/constraints/cassowary/
•Auto Layout Evolution:• OS X Lion 10.7 ~ iOS 6.0 ~ Xcode 5
5
![Page 6: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/6.jpg)
Old Buzzword: Absolute•Springs & Struts Approach:
• Set the Frame
• Set the AutoresizingMask
•Springs & Struts Limits:• Can be applied only between the view and the superview
• Cannot express relationships between two views
• Sometimes needs tweaking code
![Page 7: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/7.jpg)
New Buzzword: Dynamic•Auto Layout loves Dynamism:
• Improved responsiveness to changes in the application
•Auto Layout loves Relationships: •Codifying the relative way we describe user interfaces
•Auto Layout loves Expressiveness: •Can specify powerful relationships between views
![Page 8: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/8.jpg)
Definition
Auto Layout is aconstraint-based,
descriptive layout system.
![Page 9: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/9.jpg)
Mathematical Background•System of Linear Equations: Linear Algebra
•System of Linear Equations: Cartesian Plane
a₁₁x + a₁₂y = b₁a₂₁x + a₂₂y = b₂{
{y = m₁x + c₁y = m₂x + c₂
![Page 10: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/10.jpg)
1 Solution
![Page 11: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/11.jpg)
Ø Solution
![Page 12: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/12.jpg)
Solutions∞
![Page 13: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/13.jpg)
Constraint Basics
• y and x are attributes of views:• left, right, top, bottom, leading, trailing
• width, height, centerX, centerY, baseline
•m and c are floating point values:• m is the multiplier: the ratio between the attributes
• c is the constant: the size or offset in points
•☺ is the relation: =, <=, >=
y ☺ mx + c
![Page 14: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/14.jpg)
Constraint Basics
•Constraints are cumulative and do not override each other
•Constraints can cross the view hierarchy
•↳ but in the same window
•↳ with some exceptions:• cannot cross if the hierarchy includes a view that sets the subviews frames manually
• cannot cross if the hierarchy includes a view that have a bounds transform (scrollview)
view.leading >= (superview.leading + 20)
![Page 15: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/15.jpg)
Constraint Priority
•Constraints with higher priority levels are satisfied before constraints with lower priority level
enum { UILayoutPriorityRequired = 1000, UILayoutPriorityDefaultHigh = 750, UILayoutPriorityDefaultLow = 250, UILayoutPriorityFittingSizeLevel = 50, }; typedef float UILayoutPriority; // for OS X see NSLayoutPriority
nameView ageView
@750 @250
![Page 16: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/16.jpg)
•How large is intrinsically the content of a leaf-level view, such a button, a label, an imageView, … ?
Intrinsic Content Size
- (CGSize)intrinsicContentSize { NSDictionary *attributes = @{ NSFontAttributeName : [UIFont systemFontOfSize:17.0f], }; return [self.text sizeWithAttributes:attributes]; }
Follow us @pragmamarkorg
![Page 17: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/17.jpg)
Compression Resistance
•Which of two views will shrink to fit into this space?
nameView ageView
[self.nameView setContentCompressionResistancePriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
![Page 18: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/18.jpg)
Hugging
•Which of two views will expand to fill the space?
nameView ageView
[self.nameView setContentHuggingPriority:UILayoutPriorityDefaultLow forAxis:UILayoutConstraintAxisHorizontal];
![Page 19: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/19.jpg)
• Install constraints on views
•Convert constraints into inequalities
•Solve system of inequalities all at once
•Update views frames
•Display layers on screen
How Auto Layout Works
{ y = m₁x + c₁y = m₂x + c₂
![Page 20: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/20.jpg)
The Rendering Process
Constraints Layout Display
3 PHASES
![Page 21: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/21.jpg)
Constraints Phase•From subview to superview
•Trigger via setNeedsUpdateConstraints
•Add custom view constraints via updateConstraints
•Prepares each view with the values it needs to set frames
main view
subview
superview
container view
label view
![Page 22: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/22.jpg)
Layout Phase•From superview to subview
•Can be triggered via setNeedsLayout
•Force instant-refresh via layoutIfNeeded
•Applies the frames from the previous step to each view
main view
subview
superview
container view
label view
![Page 23: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/23.jpg)
Display Phase•From superview to subview
•Can be triggered via setNeedsDisplay
•Same as Springs & Struts
•drawRect: lives here
main view
subview
superview
container view
label view
![Page 24: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/24.jpg)
2/6 Interface Builder Practice
![Page 25: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/25.jpg)
Why ?•Easier to understand than Auto Layout code
•Easier to implement than Auto Layout code
•Easier to debug than Auto Layout code
![Page 26: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/26.jpg)
Why Not ?•Xcode 4 (FOUR) Interface Builder can be a real pain in the …
•Some complex views are hard to work with !
•Why Not Storyboards ?
![Page 27: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/27.jpg)
Use Auto Layout
![Page 28: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/28.jpg)
New Age
5
![Page 29: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/29.jpg)
Maintain
Debug & Resolve
Add Constraints
New WorkflowInitial Layout
5
![Page 30: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/30.jpg)
Initial Layout
•Add, dispose and resize views
•Add constraints when you are ready
•Fix position and size
Initial Layout
![Page 31: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/31.jpg)
Add Constraints
•Add Constraints with Control-Drag
•Add Constraints with Align and Pin Menus
•Add Missing or Suggested Constraints Add Constraints
![Page 32: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/32.jpg)
Control-DRAG (or mouse right button)
•Control-Drag from an element to itself, to its container or to another element
•Auto Layout limits the possibilities of constraints appropriately, depending on what you drag
•To select multiple constraints at a time hold down the Command or Shift key
![Page 33: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/33.jpg)
Align and Pin Menus
•Align: create alignment constraints:• Edges, Center and Baseline
•Pin: create spacing constraints:• Width, Height and Distance from another view
![Page 34: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/34.jpg)
Missing or Suggested
•Use Add Missing Constraints to add a non-ambiguous set of constraints
•Use Reset to Suggested Constraints to remove erroneous constraints and add a non-ambiguous set of constraints
![Page 35: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/35.jpg)
Editing Constraints
•Change the constant, relation and priority of a constraint• by double-clicking the constraint on the canvas
• by selecting the constraint and using the Attributes inspector
•The type of a constraint cannot be changed
![Page 36: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/36.jpg)
Wrong Intermediate States
•Ambiguous Layout: Not enough information { ∞ solutions
•Conflicting Constraints: Too much information { Ø solution
•Misplaced Views: Mismatched position or size
![Page 37: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/37.jpg)
Debug & Resolve
•See Xcode Issues Navigator
•Get detailed help using the outline view
•Follow canvas decorations
•Fix constraint via resolving menu
Debug & Resolve
![Page 38: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/38.jpg)
Identifying Issues
!In the Issues
Navigator
!In the Interface Builder
outline view
On the canvasMisplaced or ambiguous
constraints are shown in orange, conflicting constraints are red
![Page 39: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/39.jpg)
Ambiguous Layout
• Interface Builder shows ambiguity by drawing frames with orange borders
•The way you resolve ambiguity depends on the condition that’s causing it:• One or More Constraints Are Missing
• Content Size Is Undefined
• The Size of Custom View Content Is Unknown
![Page 40: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/40.jpg)
Missing Constraints
•To add missing constraints:Choose Issues > Add Missing Constraints
![Page 41: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/41.jpg)
Undefined Content Size
•Some container views depend on the size of their content
•The size is unknown at design time
•You should set placeholder constraints
•This placeholder is removed at build time
Select the constraint !
![Page 42: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/42.jpg)
Custom View Unknown
•A Custom View can have a intrinsic content size
•The content size is unknown at design time
•You should set a placeholder intrinsic content size
•The view will not have this intrinsic content size at runtime
Select the view !
![Page 43: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/43.jpg)
Conflicting Constraints
•A set of constraints that Auto Layout can’t satisfy
•Conflicting constraints show up on the canvas in red
•To remove all constraints choose:Issues > Clear Constraints
![Page 44: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/44.jpg)
Misplaced Views
• In Interface Builder constraints and frames are separate
• If there is a mismatch you have view misplacement
•Not satisfied constraints show up in orange, with a delta
•A dotted red frame show where the view will be at runtime
![Page 45: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/45.jpg)
Misplaced Views
•Choose Issues > Update Frames• The element moves back to where it was before it was misplaced
• The frames change to satisfy existing constraints
•Choose Issues > Update Constraints• The constraints are updated to the new location of the element
• The constraints change to match the current frames
![Page 46: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/46.jpg)
Maintain
•Keep your customers happy :-)
Maintain
![Page 47: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/47.jpg)
3/6 Coding Practice
![Page 48: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/48.jpg)
NSLayoutConstraint
2 methods only !
![Page 49: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/49.jpg)
[NSLayoutConstraint constraintWithItem:self.nameView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.ageView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:-20.0];
WithItem
nameView ageView20
nameView.right = ageView.left - 20
![Page 50: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/50.jpg)
NSDictionary *views = ↳ NSDictionaryOfVariableBindings(self.nameView, self.ageView); !NSArray *constraints = [NSLayoutConstraint ↳ constraintsWithVisualFormat:@"[nameView]-20-[ageView]" options:0 metrics:nil views:views];
WithVisualFormat
nameView ageView20
nameView.right = ageView.left - 20
![Page 51: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/51.jpg)
Visual Format Language
•VFL aka ASCII Art ;-)
•Orientation: V or H
•Superview: | |
•Relation: >=, <=, ==
•Priority:•[view(<=width@contentHugging)] •[view(>=width@contentCompressionResistance)]
@"H:|[nameView]-20-[ageView]|"
![Page 52: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/52.jpg)
Visual Format Language•Standard Space: [button1]-[button2]
•Width Constraint: [label(>=50)]
•Connection to Superview: |-50-[centerField]-50-|
•Vertical Layout: V:[topField]-10-[bottomField]
•Flush Views: [leftLabel][rightLabel]
•Priority: [button(100@20)]
•Equal Widths: [button1(==button2)]
•Multiple Predicates: [flexibleButton(>=70,<=100)]
•A Line of Layout: |-[f1]-[f2]-[f3(>=20)]-|
![Page 53: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/53.jpg)
Visual Format Language•The notation prefers good visualization over completeness
•Some constraints cannot be expressed using VFL• fixed aspect ratio: nameView.width = 3 * nameView.height
• use constraintWithItem:attribute:relatedBy:toItem:attribute:multiplier:constant:
nameView
3 * H
H
![Page 54: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/54.jpg)
Installing Constraints•To make a constraint active, you must add it to a view
•The view that holds the constraint:• must be an ancestor of the views the constraint involves
• should usually be the closest common ancestor (where a view is an ancestor of itself)
NSArray *constraints = [NSLayoutConstraint ↳ constraintsWithVisualFormat:@"[nameView]-20-[ageView]" options:0 metrics:nil views:views]; ![[self.nameView superview] addConstraints:constraints];
![Page 55: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/55.jpg)
Debugging Code• In lldb shell call the method _autolayoutTrace to find issues
(lldb) po [[UIWindow keyWindow] _autolayoutTrace] !*<UIWindow:0x8d6de00> - AMBIGUOUS LAYOUT | *<UIView:0x8b24ad0> | | *<UIButton:0x8b24cb0> | | | <UIButtonLabel:0x8b2c080> | | *<_UILayoutGuide:0x8b27050> - AMBIGUOUS LAYOUT | | *<_UILayoutGuide:0x8b275a0> - AMBIGUOUS LAYOUT
![Page 56: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/56.jpg)
• In lldb shell change the color of a view to find it by memory
Debugging Code
(lldb) expr ((UIView *)0x8b24cb0).backgroundColor = [UIColor redColor] (id) $1 = 0x08c1f190
![Page 57: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/57.jpg)
Debugging Code• In lldb shell log constraints with methods:
• constraints
• constraintsAffectingLayoutForAxis: in iOS | constraintsAffectingLayoutForOrientation: in OS X
(lldb) po [[self button1] constraints]
<__NSArrayM 0x8d1b980>(
<NSLayoutConstraint:0x8c28620 V:[UIButton:0x8c28df0(30)]>,
<NSLayoutConstraint:0x8c28480 H:[UIButton:0x8c28df0(80)]>,
<NSContentSizeLayoutConstraint:0x8c2f990 H:[UIButton:0x8c28df0(55)] Hug:250 CompressionResistance:750>,
<NSContentSizeLayoutConstraint:0x8c2fab0 V:[UIButton:0x8c28df0(30)] Hug:250 CompressionResistance:750>,
<NSLayoutConstraint:0x8c309b0 UIButtonLabel:0x8c2da00.centerX == UIButton:0x8c28df0.centerX>,
<NSLayoutConstraint:0x8c309f0 UIButtonLabel:0x8c2da00.centerY == UIButton:0x8c28df0.centerY>,
<NSLayoutConstraint:0x8c30a20 UIButtonLabel:0x8c2da00.width <= UIButton:0x8c28df0.width>,
<NSLayoutConstraint:0x8c30a50 UIButtonLabel:0x8c2da00.height <= UIButton:0x8c28df0.height>
)
(lldb) po [[self button1] constraintsAffectingLayoutForAxis:0]
<__NSArrayM 0x8a2e1d0>(
<NSLayoutConstraint:0x8c2c2b0 H:|-(20)-[UIButton:0x8c28df0] (Names: '|':UIView:0x8c2b1c0 )>,
<NSLayoutConstraint:0x8c28480 H:[UIButton:0x8c28df0(80)]>
)
Log uses VFL !
![Page 58: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/58.jpg)
4/6 Special Cases
![Page 59: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/59.jpg)
Equal Spacing Views
•Tip: create spacer views between the visible views !
• spacer1 | view1 | spacer2 | view2 | spacer3
![Page 60: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/60.jpg)
Custom View•A view can specify its intrinsic content size
• implement method intrinsicContentSize
• return CGSize {NSViewNoInstrinsicMetric, …} to indicate no intrinsic metric for a dimension
•Views must notify auto layout if their intrinsic size changes• call method invalidateIntrinsicContentSize
•Views indicate baseline offsets• implement method viewForBaselineLayout (iOS)
• Layout operates on alignment rectangles, not on frames
![Page 61: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/61.jpg)
Best Practices•Add constraints in updateConstraints
• Always call [super updateConstraints]
•Store constraints in strong ivars
•Remove constraints before calling setNeedsUpdateConstraints
•Don’t remove constraints unnecessarily• Updating faster than removing/re-adding
![Page 62: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/62.jpg)
[containerView layoutSubtreeIfNeeded]; [UIView animateWithDuration:1.0 animations:^{ self.nameViewWidthConstraint.constant = finalConstant; [containerView layoutSubtreeIfNeeded]; }];
Animations
•make constraint changes
•don’t animate the frame
• call layoutSubtreeIfNeeded
•change only the constant !
y ☺ multiplier * x + constant
![Page 63: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/63.jpg)
5/6 Compatibility & Migration
![Page 64: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/64.jpg)
Compatibility•Deployable to previous versions
of OS X (10.7+) and iOS (6+)
•Features requiring Xcode 5• iOS 7 support
• New Auto Layout workflow
• Readable and diffable XIB
![Page 65: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/65.jpg)
Migration Rules•Start using Auto Layout today for all new User Interfaces
•Use Auto Layout when it makes sense
•Don’t use setFrame:
view.frame = CGRectMake(x, y, width, height);
![Page 66: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/66.jpg)
Migration Workflow•Stop and think
• Don’t try to replicate what the existing code is doing
• Think about the underlying layout
•Try replacing it with nothing!• Are you working around a limitation of springs and struts?
• Does the code implement a relationship?
•Otherwise, add some constraint• Prefer adding constraints via Interface Builder
• Think about which component should own each constraint
• Consider centralising it in updateConstraints
•Verify the layout is correct• Fix issues you may have
![Page 67: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/67.jpg)
translatesAutoresizingMaskIntoConstraints
•Views that are aware of Auto Layout can coexist in a window with views that are not
• If this is value is YES, the view’s superview looks at the view’s autoresizing mask, produces constraints that implement it, and adds those constraints to itself
•Set to NO for most views that are aware of Auto Layout• the constraints generated by translating the autoresizing mask are already sufficient to
completely specify the frame of a view given its superview’s frame
• Too much information can prevent a view from automatically assuming its optimal size
![Page 68: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/68.jpg)
6/6 Final Thoughts
![Page 69: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/69.jpg)
Features•Auto Layout is declarative
•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
•Auto Layout allows and even encourages conflicting rules
•Auto Layout expresses natural content
•Auto Layout seeks optimal solutions
•Auto Layout is distributed
![Page 70: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/70.jpg)
Why ?•Replace Springs & Struts with something better
•Easily handle a variety of display sizes
•Moving view logic back to the view
•Dynamically calculate the user interface
•Prioritise portions of the user interface
•Extend the usefulness of Interface Builder
• Improve layout related code
![Page 71: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/71.jpg)
Why Not ?•A whole new way of thinking about layout
•Steep learning curve when working with code
•Xcode 4 support was frustrating
•Few cases are more difficult to handle
•Spring & Struts has not been deprecated
![Page 72: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/72.jpg)
Video References•WWDC11/103: Cocoa Autolayout
•WWDC12/202: Introduction to Auto Layout for iOS and OS X
•WWDC12/228: Best Practices for Mastering Auto Layout
•WWDC12/232: Auto Layout by Example
•WWDC13/406: Taking Control of Auto Layout in Xcode 5
•NSScreencast #87: Xcode 5 Autolayout Improvements
•NSScreencast #35: Autolayout Fun
• Justin Williams @ 360 iDev 2013
•Cesare Rocchi @ UIKonf 2013
![Page 73: Auto Layout Under Control @ Pragma conference 2013](https://reader033.vdocuments.site/reader033/viewer/2022052822/554d1d1fb4c905c5208b47f7/html5/thumbnails/73.jpg)
Book References• iOS Developer Library
Auto Layout Guide
•Any new book on iOS 6 | 7
• iOS Auto Layout Demystified By Erica Sadun
Available: Oct 31, 2013 !