Introduction to Auto Layout

July 17th, 2014

So why are we talking about Auto

Layout ?

?

New Devices

iWatch

y = m*x + b, where:

● y and x are attributes of views.

● m and b are floating point values.

Auto Layout is ….

Constraints

ConstraintsUIActivityIndicatorView *indecator = [UIActivityIndicatorView new];

indecator.translatesAutoresizingMaskIntoConstraints = NO;

[self addSubview:indecator];

[self addConstraint:[NSLayoutConstraint constraintWithItem:indecator

attribute:NSLayoutAttributeCenterX

relatedBy:NSLayoutRelationEqual

toItem:self

attribute:NSLayoutAttributeCenterX

multiplier:1.

constant:0]];

[self addConstraint:[NSLayoutConstraint constraintWithItem:indecator

attribute:NSLayoutAttributeCenterY

relatedBy:NSLayoutRelationEqual

toItem:self

attribute:NSLayoutAttributeCenterY

multiplier:1.

constant:0]];

Visual format language

Standard Space

[button]-[textField]

Width Constraint

[button(>=50)]

Connection to Superview

|-50-[purpleBox]-50-|

Vertical Layout

V:[topField]-10-[bottomField]

Flush Views

[maroonView][blueView]

Priority

[button(100@20)]

Equal Widths

[button1(==button2)]

Multiple Predicates

[flexibleButton(>=70,<=100)]

Complete Line of Layout

|-[find]-[findNext]-

[findField(>=20)]-|

Visual format language

UIImageView *imageView = [UIImageView new];

imageView.translatesAutoresizingMaskIntoConstraints = NO;

[self addSubview:imageView];

NSDictionary *views = NSDictionaryOfVariableBindings(imageView);

[self addConstraints:[NSLayoutConstraint

constraintsWithVisualFormat:@"V:|[imageView]|"

options:0

metrics:nil

views:views]];

[self addConstraints:[NSLayoutConstraint

constraintsWithVisualFormat:@"H:|[imageView]|"

options:0

metrics:nil

views:views]];

Pin menu

Why Auto Layout?

● Describe how views should be laid out in a relational

manner to their superview & sibling views

● Dynamically respond to application changes

● User provides constraints; system calculates the frames

● More power and control over springs and struts

Why Auto Layout?

● Multiple iOS versions (6, 7, 8...)

● Rotation

● Dynamic Content

● Screen sizes

Size classes

- Regular

- Compact

Size classes

Size classes

3. Size classes

Demo:

Debugging without running

IBDesignables

#import <UIKit/UIKit.h>

IB_DESIGNABLE

@interface TestInspectorView : UIView

@end

Debugging without running

IBInspectable

#import <UIKit/UIKit.h>

IB_DESIGNABLE

@interface TestInspectorView : UIView

@property (nonatomic) IBInspectable UIImage *photo;

@property (nonatomic) IBInspectable NSString *title;

@end

IBInspectable

Runtime attributes:

● boolean,

● number,

● string,

● localized string,

● rectangle,

● point,

● size,

● color,

● range,

● nil

Debugging ViewsNew live views functionality the ability

to debug views right in Interface

Builder.

Resizable iPhone and iPad simulators

Demo:

http://nsscreencast.com/episodes/138-ibdesignable

https://developer.apple.com/library/ios/recipes/xcode_help-

IB_objects_media/chapters/CreatingaLiveViewofaCustomObject.html#//apple_ref/doc/uid/TP40014224-CH41-SW1

https://developer.apple.com/library/ios/recipes/xcode_help-

IB_objects_media/chapters/DebuggingCustomViews.html#//apple_ref/doc/uid/TP40014224-CH42-SW1

https://www.youtube.com/watch?v=ugqFWPsY_A0

http://floriankugler.com/blog/2013/4/21/auto-layout-performance-on-ios

No Auto Layout

https://www.youtube.com/watch?v=I9VNHMbVZX4