- why we need auto layout; - what UITraitCollection is; - what’s new in interface builder Xcode; - about debugging view without running; - how to debug custom view.

1. Introduction to Auto Layout
July 17th, 2014

2. So why are we talking about Auto
Layout ?
?

3. New Devices

4. iWatch

5. y = m*x + b, where:
● y and x are attributes of views.
● m and b are floating point values.
Auto Layout is ….

6. Constraints

7. Constraints
UIActivityIndicatorView *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]];

8. 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)]-|

9. 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]];

10. Pin menu

11. 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

12. Why Auto Layout?
● Multiple iOS versions (6, 7, 8...)
● Rotation
● Dynamic Content
● Screen sizes

13. Size classes
- Regular
- Compact

14. Size classes

15. Size classes

16. 3. Size classes

18. Demo:

19. Debugging without running
IBDesignables
#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface TestInspectorView : UIView
@end

20. Debugging without running
IBInspectable
#import <UIKit/UIKit.h>
IB_DESIGNABLE
@interface TestInspectorView : UIView
@property (nonatomic) IBInspectable UIImage *photo;
@property (nonatomic) IBInspectable NSString *title;
@end

21. IBInspectable
Runtime attributes:
● boolean,
● number,
● string,
● localized string,
● rectangle,
● point,
● size,
● color,
● range,
● nil

22. Debugging Views
New live views functionality the ability
to debug views right in Interface
Builder.

23. Resizable iPhone and iPad simulators

24. Demo:

25. 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