Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our User Agreement and Privacy Policy.

Slideshare uses cookies to improve functionality and performance, and to provide you with relevant advertising. If you continue browsing the site, you agree to the use of cookies on this website. See our Privacy Policy and User Agreement for details.

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
‣
Deﬁne how an element should behave according to it's
peers:
‣
parent
‣
siblings
‣
Don't think in absolute terms, but think in relational terms
‣
Think ﬂexible: it's not because an element has a certain
size at one point, it will have the same size at another point

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 ﬁrst 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 deﬁned
for an axis

28.
Autolayout in code
‣
Important note when creating constraints in code
‣
If you create a view manually, use:
!
view%=%[UIView%new];%
view.translatesAutoresizingMaskIntoConstraints%=%NO;
!
‣
if you don’t, you’ll get a lot of constraint errors!

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;

31.
UIView+AutoLayout
Pin to superview edges
:%(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.

32.
UIView+AutoLayout
Pin at point in superview
:%(NSLayoutConstraint%*)autoPinEdge:(ALEdge)edge%%
%%%%%%%%%%%%%%toPositionInSuperview:(CGFloat)value;%
‣
Pins the given edge of the view to a ﬁxed position (X or Y value, depending on
edge) in the superview.

33.
UIView+AutoLayout
Centering in superview
:%(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 ﬁxed position (X or Y value,
depending on axis) in the superview.

34.
UIView+AutoLayout
Pin to other views
:%(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.

35.
UIView+AutoLayout
Aligning views
:%(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.

37.
UIView+AutoLayout
View dimension matching
:%(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.

38.
UIView+AutoLayout
Priorities
+%(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

39.
UIView+AutoLayout
Removal of constraints
:%(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.

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
Other stuff
‣
category on NSArray doing the same for groups of
views
‣
category on NSLayoutConstraint to remove a
constraint from the view it's attached to

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 ﬁnd where
things go wrong
‣
errors don’t provide any context
!
‣
po%[[[[UIApplication%sharedApplication]%windows]%
objectAtIndex:0]%recursiveDescription]
look for address of view giving errors, and then
you’ll get an idea of what context the error is
happing in

44.
Protips
‣
Don’t assume a view has a ﬁxed 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