Downloaded 14 times
Uploaded byCiklum Ukraine
Introduction to auto layout
The document provides an introduction to Auto Layout, emphasizing its importance for adapting layouts across various devices and screen sizes. It discusses how constraints can be used to define the position and size of UI elements relative to each other and their superviews, as well as the benefits of using dynamic content responses in applications. The document also covers debugging techniques in Interface Builder and highlights key elements like Visual Format Language and Size Classes.
More Related Content
Introduction to auto layout
- 1. Introduction to AutoLayout July 17th, 2014
- 2. So why arewe talking about Auto Layout ? ?
- 3.
- 4.
- 5. y = m*x+ b, where: ● y and x are attributes of views. ● m and b are floating point values. Auto Layout is ….
- 6.
- 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 StandardSpace [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.
- 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.
- 15.
- 16.
- 18.
- 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 liveviews functionality the ability to debug views right in Interface Builder.
- 23. Resizable iPhone andiPad simulators
- 24.
- 25.