Practical auto layout

Prac%cal'Autolayout
CocoaHeadsBE+Nov+2014
Prac%cal'Autolayout'-'©'Tom'Adriaenssen,'2014 1

Me
• Tom$Adriaenssen
• Lead&iOS&Dev&at&
• @Inferis&(Twi6er,&app.net)
• h6p://inferis.org

Prac%cal'Autolayout
• Libraries
• Upda,ng/Constraints
• Intrins,c/Content/Size
• Alignment/Rects
• Baseline/alignment
• Priori,es

Libraries
• !"provided*APIs*are*cumbersome
• Wrapper*libraries*make*your*life*easier
• declara9ve*vs*impera9ve
• more*descrip9ve

Libraries
• PureLayout+(Objec've)C,,CocoaPod)
• FLKLayout+(Objec've)C,,CocoaPod)
• Masonry+(Objec've)C,,CocoaPod)
• KeepLayout+(Objec've)C,,CocoaPod)
• Lyt+(Objec've)C,,CocoaPod)
• Cartography+(Swi5)

PureLayout
• Defines'categories'(auto*)'on'UIView/
NSView'&'NSArray
• Code'only,'no'stringAbased'DSL
• Support'for'prioriFes'via'blocks
• Originally'UIView+AutoLayout
• Github:'hNps://github.com/smileyborg/
PureLayout
• CocoaPod:
pod 'PureLayout'

PureLayout
[self.blueView autoCenterInSuperview];
[self.blueView autoSetDimensionsToSize:CGSizeMake(50.0, 50.0)];
s// Red view is positioned at the bottom right corner of the blue view, with the same width, and a height of 40 pt
[self.redView autoPinEdge:ALEdgeTop toEdge:ALEdgeBottom ofView:self.blueView];
[self.redView autoPinEdge:ALEdgeLeft toEdge:ALEdgeRight ofView:self.blueView];
[self.redView autoMatchDimension:ALDimensionWidth toDimension:ALDimensionWidth ofView:self.blueView];
[self.redView autoSetDimension:ALDimensionHeight toSize:40.0];
[@[self.redView, self.yellowView] autoSetViewsDimension:ALDimensionHeight toSize:50.0];
[@[self.blueView, self.greenView] autoSetViewsDimension:ALDimensionHeight toSize:70.0];

FLKAutoLayout
• Category*on*UIView
• uses*predicates*for*priori5es*and*
rela5ons
• Code*&*string9based*DSL*(predicates)
• Github:*hDps://github.com/
floriankugler/FLKAutoLayout
• CocoaPod:
pod 'FLKAutoLayout'

FLKAutoLayout
// align the first label with its superview
[labels[0] alignTop:@"20" leading:@"20" toView:labels[0].superview];
// give it a minimum width of 200 and a maximum width of 300
[labels[0] constrainWidth:@">=200,<=300"];
// now constrain all labels to this size
[UIView alignLeadingAndTrailingEdgesOfViews:labels];
// space the labels out vertically with 10 points in between
[UIView spaceOutViewsVertically:labels predicate:@"10"];
// now let's take care of the text fields.
// the first one has a fixed space of 20 to its label
[textFields[0] constrainLeadingSpaceToView:labels[0] predicate:@"20"];
// constrain the right edge to its superview with 20 points padding
[textFields[0] alignTrailingEdgeWithView:textFields[0].superview predicate:@"20"];

Masonry
• Custom(layout(DSL
• define(constraints(in(
mas_makeConstraints:(block
• Code(only,(no(string:based(DSL
• Github:(h>ps://github.com/Masonry/
Masonry
• CocoaPod:
pod 'Masonry'

Masonry
UIEdgeInsets padding = UIEdgeInsetsMake(10, 10, 10, 10);
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(superview.mas_top).with.offset(padding.top); //with is an optional semantic filler
make.left.equalTo(superview.mas_left).with.offset(padding.left);
make.bottom.equalTo(superview.mas_bottom).with.offset(-padding.bottom);
make.right.equalTo(superview.mas_right).with.offset(-padding.right);
}];
// or even shorter
[view1 mas_makeConstraints:^(MASConstraintMaker *make) {
make.edges.equalTo(superview).with.insets(padding);
}];

KeepLayout
• use%keep*%a*ributes%on%UIView/NSView%
to%define%layout
• Also%works%on%arrays%of%views
• Code%only,%no%stringBbased%DSL
• Github:%h*ps://github.com/iMarLnKiss/
KeepLayout
• CocoaPod:
pod 'KeepLayout'

KeepLayout
// aligns are the same regardless of order
viewOne.keepLeftAlign(viewTwo) == viewTwo.keepLeftAlign(viewOne)
// left offset from 1 to 2 is right offset from 2 to 1
viewOne.keepLeftOffset(viewTwo) == viewTwo.keepRightOffset(viewOne)
// array attributes
NSArray *views = @[ viewOne, viewTwo, viewThree ];
[views keepWidthsEqual];
[views keepHorizontalOffsets:20];
[views keepTopAligned];

Lyt
• Defines'categories'(lyt_*)'on'UIView/
NSView
• Code'only,'no'string?based'DSL
• No'support'for'prioriEes'or'relaEons
• Github:'hIps://github.com/robotmedia/
Lyt
• CocoaPod:
pod 'Lyt'

Lyt
[view lyt_centerInParent];
// instead of
NSLayoutConstraint *centerXConstraint = [NSLayoutConstraint constraintWithItem:view
attribute:NSLayoutAttributeCenterX
relatedBy:NSLayoutRelationEqual
toItem:view.superview
attribute:NSLayoutAttributeCenterX
multiplier:1.0
constant:0];
NSLayoutConstraint *centerYConstraint = [NSLayoutConstraint constraintWithItem:view
attribute:NSLayoutAttributeCenterY
relatedBy:NSLayoutRelationEqual
toItem:view.superview
attribute:NSLayoutAttributeCenterY
multiplier:1.0
constant:0];
[view.superview addConstraints:@[centerXConstraint, centerYConstraint]];

Cartography
• Swi%!
• Leverages.custom.operators.for.a.
declara8ve.API
• Code.only
• Github:.hCps://github.com/robb/
Cartography
• No.CocoaPod.yet

Cartography
layout(view1, view2) { view1, view2 in
view1.width == (view1.superview!.width - 50) * 0.5
view2.width == view1.width - 50
view1.height == 40
view2.height == view1.height
view1.centerX == view1.superview!.centerX
view2.centerX == view1.centerX
view1.top >= view1.superview!.top + 20
view2.top == view1.bottom + 20
}

Libraries
Considera*ons
• does&the&library&give&you&access&to&the&created&constraints&for&
modifica7ons
• do&you&prefer&string&based&DSLs,&code&only&or&a&mix?
• mostly&useful&in&larger&projects&where&you&have&to&manually&
create&constraints
• for&simple&cases/projects&the&na7ve&APIs&might&do&fine

Upda%ng(Constraints

Upda%ng(Constraints
• Don't"update"constraints"all"over"the"place
• "update"="add"/"delete
• changing"constants"is"no"problem
• use"updateConstraints"or"updateViewConstraints
• you"can"create"constraints"on"beforehand,"but"add"or"remove"
them"in"updateConstraints

Upda%ng(Constraints
Example
AutoLayoutAnimation.xcodeproj

Intrins'c)Content)Size

func intrinsicContentSize() -> CGSize
• only&for&"leaf"&views
• tells&the&layout&system&that&there&is&some&content&it&doesn’t&
na7vely&understand&in&a&view
• provides&to&the&layout&system&the&intrinsic&size&of&that&content

• return'UIViewNoIntrinsicMetric'if'you'don't'know'the'size'
for'an'axis
• when'content'changes'the'intrins7c'content'size,'call'
invalidateIntrinsicContentSize()

• you%can%use%constraints%to%provide%an%intrins1c%content%size%for%
containers

Example
IntrinsticContentSize.xcodeproj

Alignment)Rects

Alignment)Rects
• Autolayout)does)not)work)on)frames,)but)on)alignment)rects
• For)most)views,)these)are)the)same)by)default
• a)powerful)tool)to)decouple)a)view’s)layout)alignment)edges)from)
its)visual)appearance
• consider:
• intrinis>c)content)size)should)be)based)of)alignment)rects,)not)
frames

Alignment)Rects
• bu$on'with'ornaments'(eg'badge)'▶️'larger'alignment'rect
• align'to'smaller'view'content'▶️'smaller'alignment'rect

Alignment)Rects
Example
AutoLayoutAlignmentRects.xcodeproj
AlignmentRectExamples.xcodeproj

Baseline(alignment

Baseline(alignment
func viewForBaselineLayout() -> UIView?
• by$default,$AutoLayout$aligns$view$by$baseline$using$the$bo7om$
of$the$view
• can$specify$any$child$view$of$view
• autolayout$will$use$this$view$for$baseline$aligment
• view$aligned$on$bo7om$of$view$returned$by$this$method

Baseline(alignment
• viewForBaselineLayout"works"only"on"iOS
• for"OSX"use"baselineOffsetFromBottom:
var baselineOffsetFromBottom: CGFloat { get }

Baseline(alignment
Some%issues
• dynamically*changing*this*view*is*not*possible
• have*to*remove*and*re6add*a*baseline*constraint
• buggy

Baseline(alignment
Example
AutolayoutBaselineAlignment.xcodeproj

Priori%es

Priori%es
• Using'priori+es'is'the'key'in'powerful'AutoLayout
• Define'mul+ple'constraints'on'the'same'a<ribute'with'different'
priori+es
• if'possible'all'will'be'matched,'otherwise'those'with'lower'
priori+es'are'dropped
• use'in'combina+on'with'hugging'priority'and'compression'
priority

Pi#alls'&'Tips

Pi#alls
• constraints*are*cumula/ve
• constraints*do*not*override*each*other
• adding*a*second*width*constraint*does*not*remove*or*override*
a*previous*one
• remove*first*one*manually

Pi#alls
• be$careful$with$default$priori2es
• eg:$pinning$with$insets$7>$what$if$external$view$is$too$small$to$
fit$insets?

Tips
• constraints*can*cross*view*hierarchy
• add*constraint*from*view*to*superview*of*superview
• only*if*scope*of*view*hierarchy*uses*autolayout!*(no*custom*
framese8ng*inbetween)

Tips
Autoresizing,masks
• when&crea*ng&views&in&code,&set&
translatesAutoresizingMaskIntoConstraints&to&NO.
• UIKit&will&not&add&equivalent&constraints&for&the&
autoresizingMask&of&the&view
• these&(very&likely)&will&clash&with&your&own&constraints
• or,&clear&autoresizing&mask

Tips
Think&rela+onal,&not&absolute
• some&mes'absolute'values'are'necessary
• most'of'the'&me'you'want'views'to'size'according'to'content
• content'is'(probably)'not'fixed
• views'are'o>en'not'the'sizes'you'expect'(iPhone6/6+!)

Tips
• Autolayout)is)not)a)holy)grail
• Autolayout)seems)"easy")but)is)tricky)to)get)right
• frame)based)layout)is)o8en)faster)and)more)finetuned
• when)doing)frame)based)layout,)do)it)correctly
• in)layoutSubviews
• don't)confuse)bounds)and)frame

Thanks!

Examples
Can$be$found$here:
h"ps://github.com/Inferis/Prac7cal9AutoLayout

Practical auto layout

More Related Content

Similar to Practical auto layout

Recently uploaded

Practical auto layout