introduction to auto layout
TRANSCRIPT
y = m*x + b, where:
● y and x are attributes of views.
● m and b are floating point values.
Auto Layout is ….
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]];
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
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
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