Autolayout Primer

This is a presentation I gave at an internal meeting at iCapps on 20131204.

Transcript

1. Autolayout Primer Internal presentation @ iCapps, 2013-12-04
2. Introduction
3. Tom Adriaenssen
4. I love... ‣ ... my wife ‣ ... my 4 kids ‣ ... to code ‣ ... to play a game of squash ‣ ... good beer
5. I open sourced... ... some code: ‣ IIViewDeckController: “An implementation of the sliding functionality found in the Path 2.0 or Facebook iOS apps.” ‣ IIDateExtensions ‣ IIPopoverStatusItem See: http://github.com/inferis
6. I made... ... some apps: Butane Drash Hi, @10to1! http://getbutane.com http://dra.sh
7. Agenda
8. Agenda ‣ What is Autolayout? ‣ What is a constraint? ‣ Autolayout in Xcode designer ‣ Autolayout in code
9. Autolayout
10. What is Autolayout? Auto%Layout%is%a%system%that%lets%you%lay%out%your%app’s%user%interface%by% creating%a%mathematical%description%of%the%relationships%between%the% elements.%% According to the Apple Docs: ‣ Keywords: ‣ mathematical ‣ relationships ‣ Eh? ‣ Developer defines constraints on/between elements ‣ constraints translate into mathematical functions ‣ UIKit/Appkit tries to solve these functions
11. What is Autolayout? ‣ Correctly using autolayout requires you to change thinking ‣ Autolayout works in a different way than what you were used to ‣ Don't go calculating frames anymore ‣ Define how an element should behave according to it's peers: ‣ parent ‣ siblings ‣ Don't think in absolute terms, but think in relational terms ‣ Think flexible: it's not because an element has a certain size at one point, it will have the same size at another point
12. Constraints
13. Constraint a%mathematical%representation%of%a%human:expressable%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)
14. //%firstItem.firstAttribute%{==,<=,>=}%secondItem.secondAttribute%*%multiplier%+%constant% ! @property%(readonly,%assign)%id%firstItem;% @property%(readonly)%NSLayoutAttribute%firstAttribute;% @property%(readonly)%NSLayoutRelation%relation;% @property%(readonly,%assign)%id%secondItem;% @property%(readonly)%NSLayoutAttribute%secondAttribute;% @property%(readonly)%CGFloat%multiplier;% ! @property%CGFloat%constant; Constraint ‣ two items with an attribute ‣ constant ‣ relation ‣ multiplier ‣ priority level //%firstItem.firstAttribute%{==,<=,>=}%secondItem.secondAttribute%*%multiplier%+%constant% ! @property%(readonly,%assign)%id%firstItem;% @property%(readonly)%NSLayoutAttribute%firstAttribute;% @property%(readonly)%NSLayoutRelation%relation;% @property%(readonly,%assign)%id%secondItem;% @property%(readonly)%NSLayoutAttribute%secondAttribute;% @property%(readonly)%CGFloat%multiplier;% ! @property%CGFloat%constant;
15. 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
16. Constant? ‣ physical size or offset
17. Multiplier? ‣ Apply modifier to attribute of source item ‣ Cannot be set using the designer ‣ Can be set in code
18. Relation? ‣ equal ‣ less than or equal ‣ greater than or equal ! ‣ if you want just "less than" or "greater than", adjust the constant
19. Priority ‣ constraints with higher priority are satisfied before constraints with lower priority ‣ Default = UILayoutPriorityRequired (1000) ‣ Other predefined priorities ‣ UILayoutPriorityRequired = 1000 ‣ UILayoutPriorityDefaultHigh = 750 ‣ Default content compression priority ‣ UILayoutPriorityDefaultLow = 250 ‣ Default content hugging priority ‣ UILayoutPriorityFittingSizeLevel = 50 ‣ You can use any integer value between 0-1000
20. Pitfalls ‣ constraints are cumulative ‣ constraints do not override each other ‣ adding a second width constraint does not remove or override a previous one ‣ remove first one manually ‣ constraints can cross view hierarchy ‣ add constraint from view to superview of superview ‣ only if scope of view hierarchy uses autolayout! (no custom framesetting)
21. Intrisic Content Size ‣ applicable to leaf views (views with no subviews) ‣ view knows what size it wants to be (eg UIButton) ‣ autolayout will size view to its intristic content size if no constraints control the width/height :%(CGSize)intrinsicContentSize; Returns%the%natural%size%for%the%receiving%view,%considering% only%properties%of%the%view%itself.% ‣ You can override this method in a subclass to change the default behavior ‣ return UIViewNoIntrinsicMetric when there's no intristic size defined for an axis
22. Compression resistance & Content hugging ‣ Content Compression resistance? ‣ defines how the view's frame resist compressing it's content ‣ Content hugging? ‣ defines how the view's frame should hug it's content
23. Compression resistance & Content hugging Say you've got button like this: % |[%%%%%%%Click%Me%%%%%%]|% and you've pinned the edges to a larger superview with priority 500. ! Then, if hugging priority > 500 it'll look like this: % |[Click%Me]%%%%%%%%%%%%%|% If hugging priority < 500 it'll look like this: % |[%%%%%%%Click%Me%%%%%%]|% ! If the superview now shrinks and if the compression resistance priority > 500, it'll look like this % |[Click%|Me]% else if compression resistance priority < 500, it could look like this: % |[Cli..]|
24. Autolayout in Xcode designer
25. Demo
26. Autolayout in code
27. Autolayout in code: 3 options ‣ Write constraints manually ‣ HEAD WILL EXPLODE ‣ Use visual format ‣ HEAD WILL EXPLODE MOAR ‣ Use UIView+AutoLayout Cocoapod ‣ Provides descriptive methods creating constraints ‣ Still verbose but quite readable ‣ Best of both worlds
28. Autolayout in code ‣ Important note when creating constraints in code ‣ If you create a view manually, use: ! ! ‣ if you don’t, you’ll get a lot of constraint errors! view%=%[UIView%new];% view.translatesAutoresizingMaskIntoConstraints%=%NO;
29. UIView+AutoLayout ‣ Available as a CocoaPod ‣ Implements a category on UIView. ‣ Easy creation of 1 or more NSLayoutConstraints. ‣ Some methods return 1 constraint, some an NSArray containing constraints ‣ Does not add constraints, just creates them ‣ you need to add them yourself :(void)addConstraint:(NSLayoutConstraint%*)constraint;% :(void)addConstraints:(NSArray%*)constraints;
30. UIView+AutoLayout ‣ Don't use: translatesAutoresizingMaskIntoConstraints ! % view%=%[UIView%newAutoLayoutView];% % //%or% % view%=%[[UIView%alloc]%initForAutoLayout]; Creating an autolayouted view
31. UIView+AutoLayout :%(NSLayoutConstraint%*)autoPinEdgeToSuperviewEdge:(ALEdge)edge%withInset: (CGFloat)inset;% ‣ Pins the given edge of the view to the same edge of the superview with an inset. ! :%(NSLayoutConstraint%*)autoPinEdgeToSuperviewEdge:(ALEdge)edge%withInset: (CGFloat)inset%relation:(NSLayoutRelation)relation;% ‣ Pins the given edge of the view to the same edge of the superview with an inset as a maximum or minimum. ! :%(NSArray%*)autoPinEdgesToSuperviewEdgesWithInsets:(UIEdgeInsets)insets;% ‣ Pins the edges of the view to the edges of its superview with the given edge insets. Pin to superview edges
32. UIView+AutoLayout :%(NSLayoutConstraint%*)autoPinEdge:(ALEdge)edge%% %%%%%%%%%%%%%%toPositionInSuperview:(CGFloat)value;% ‣ Pins the given edge of the view to a fixed position (X or Y value, depending on edge) in the superview. Pin at point in superview
33. UIView+AutoLayout :%(NSArray%*)autoCenterInSuperview;% ‣ Centers the view in its superview. ! :%(NSLayoutConstraint%*)autoCenterInSuperviewAlongAxis:(ALAxis)axis;% ‣ Centers the view along the given axis (horizontal or vertical) within its superview. ! :%(NSLayoutConstraint%*)autoPinCenterAxis:(ALAxis)axis% %% % % % %%%toPositionInSuperview:(CGFloat)value;% ‣ Pins the given center axis of the view to a fixed position (X or Y value, depending on axis) in the superview. Centering in superview
34. UIView+AutoLayout :%(NSLayoutConstraint%*)autoPinEdge:(ALEdge)edge%toEdge:(ALEdge)toEdge% ofView:(UIView%*)peerView;% ‣ Pins an edge of the view to a given edge of another view. ! :%(NSLayoutConstraint%*)autoPinEdge:(ALEdge)edge%toEdge:(ALEdge)toEdge% ofView:(UIView%*)peerView%withOffset:(CGFloat)offset;% ‣ Pins an edge of the view to a given edge of another view with an offset. ! :%(NSLayoutConstraint%*)autoPinEdge:(ALEdge)edge%toEdge:(ALEdge)toEdge% ofView:(UIView%*)peerView%withOffset:(CGFloat)offset%relation: (NSLayoutRelation)relation;% ‣ Pins an edge of the view to a given edge of another view with an offset as a maximum or minimum. Pin to other views
35. UIView+AutoLayout :%(NSLayoutConstraint%*)autoAlignAxis:(ALAxis)axis%% %%%%%%%%%%%%%%%%%%%%%toSameAxisOfView:(UIView%*)peerView;% ‣ Aligns an axis of the view to the same axis of another view. ! :%(NSLayoutConstraint%*)autoAlignAxis:(ALAxis)axis%% %%%%%%%%%%%%%%%%%%%%%toSameAxisOfView:(UIView%*)peerView%% %% % % % % %%%%%%withOffset:(CGFloat)offset;% ‣ Aligns an axis of the view to the same axis of another view with an offset. Aligning views
36. UIView+AutoLayout :%(NSArray%*)autoSetDimensionsToSize:(CGSize)size;% ‣ Sets the view to a specific size. ! :%(NSLayoutConstraint%*)autoSetDimension:(ALDimension)dimension%% % % % % % % % % %toSize:(CGFloat)size;% ‣ Sets the given dimension of the view to a specific size. ! :%(NSLayoutConstraint%*)autoSetDimension:(ALDimension)dimension%% %%% % % % % % % % %toSize:(CGFloat)size%% % % % % % % % %%%relation:(NSLayoutRelation)relation;% ‣ Sets the given dimension of the view to a specific size as a maximum or minimum. View dimensions
37. UIView+AutoLayout :%(NSLayoutConstraint%*)autoMatchDimension:(ALDimension)dimension%toDimension: (ALDimension)toDimension%ofView:(UIView%*)peerView;% ‣ Matches a dimension of the view to a given dimension of another view. :%(NSLayoutConstraint%*)autoMatchDimension:(ALDimension)dimension%toDimension: (ALDimension)toDimension%ofView:(UIView%*)peerView%withOffset:(CGFloat)offset;% ‣ Matches a dimension of the view to a given dimension of another view with an offset. :%(NSLayoutConstraint%*)autoMatchDimension:(ALDimension)dimension%toDimension: (ALDimension)toDimension%ofView:(UIView%*)peerView%withOffset:(CGFloat)offset%relation: (NSLayoutRelation)relation;% ‣ Matches a dimension of the view to a given dimension of another view with an offset as a maximum or minimum. :%(NSLayoutConstraint%*)autoMatchDimension:(ALDimension)dimension%toDimension: (ALDimension)toDimension%ofView:(UIView%*)peerView%withMultiplier:(CGFloat)multiplier;% ‣ Matches a dimension of the view to a multiple of a given dimension of another view. :%(NSLayoutConstraint%*)autoMatchDimension:(ALDimension)dimension%toDimension: (ALDimension)toDimension%ofView:(UIView%*)peerView%withMultiplier:(CGFloat)multiplier% relation:(NSLayoutRelation)relation;% ‣ Matches a dimension of the view to a multiple of a given dimension of another view as a maximum or minimum. View dimension matching
38. UIView+AutoLayout +%(void)autoSetPriority:(UILayoutPriority)priority%% %%%%%%%%%forConstraints:(ALConstraintsBlock)block;% ‣ Sets the constraint priority to the given value for all constraints created using the UIView+AutoLayout category API within the given constraints block. ‣ NOTE: This method will have no effect (and will NOT set the priority) on constraints created or added using the SDK directly within the block! ‣ Use the auto… methods of UIView+AutoLayout Priorities
39. UIView+AutoLayout :%(void)autoRemoveConstraintsAffectingView;% ‣ Removes all explicit constraints that affect the view. :%(void)autoRemoveConstraintsAffectingViewAndSubviews;% ‣ Recursively removes all explicit constraints that affect the view and its subviews. Additional%methods%if%you%do%want%to%remove%the% :%(void)autoRemoveConstraintsAffectingViewIncludingImplicitConstraints: (BOOL)shouldRemoveImplicitConstraints;% ‣ Removes all constraints that affect the view, optionally including implicit constraints. : (void)autoRemoveConstraintsAffectingViewAndSubviewsIncludingImplicitConstra ints:(BOOL)shouldRemoveImplicitConstraints;% ‣ Recursively removes all constraints from the view and its subviews, optionally including implicit constraints. Removal of constraints
40. UIView+AutoLayout Removal of constraints ‣ A little bit of a warning when removing constraints: ‣ The constraint solving engine is not optimised for the removal of constraints ‣ Removing a lot of constraints can have serious impact on performance ‣ Use with care and in small quantities ‣ You can change the priority of a constraint to “disable” it (but you have to remember the original value to reenable it)
41. UIView+AutoLayout ‣ category on NSArray doing the same for groups of views ‣ category on NSLayoutConstraint to remove a constraint from the view it's attached to Other stuff
42. Protips ‣ 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)
43. Protips ‣ Check for autotranslated autoresizing constraints ‣ don’t forget translatesAutoresizingMaskIntoConstraints ‣ Display the view hierarchy from the root to find where things go wrong ‣ errors don’t provide any context ! ‣ look for address of view giving errors, and then you’ll get an idea of what context the error is happing in po%[[[[UIApplication%sharedApplication]%windows]% objectAtIndex:0]%recursiveDescription]
44. Protips ‣ Don’t assume a view has a fixed size ‣ (unless you give it a size constraint) ‣ initWithFrame: not really useful anymore ‣ Don’t use frame/bounds calculations in constraints ‣ exception: in layoutSubViews ‣ Try to minimalise the number of constraints ‣ solving takes time ‣ more constraints, more complex
45. Protips ‣ 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];% }];
46. Protips ‣ when changing content: ‣ don’t forget to update constraints ‣ call setNeedsUpdateConstraints ‣ let the system decide when to update ‣ or updateConstraintsIfNeeded ‣ immediate action ‣ only needed when your constraint change might affect other constraints ‣ don’t forget to relayout your views ‣ call setNeedsLayout ‣ or layoutIfNeeded
47. Useful References ‣ Apple’s autolayout documentation: ‣ reference: https://developer.apple.com/library/ios/ documentation/userexperience/conceptual/ AutolayoutPG/Introduction/Introduction.html ‣ Martin Pilkington’s iOSDevUK2013 slides on autolayout solving ‣ http://www.iosdevuk.com/storage/talks2013/ MartinPilkington.pdf ‣ UIView+AutoLayout ‣ https://github.com/smileyborg/UIView-AutoLayout
48. Thanks for listening. Twitter: @inferis App.Net: @inferis E-mail: tom@interfaceimplementation.be vCard: http://inferis.org Questions? Contact me: