Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Introduction to auto layout

566 views

Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Introduction to auto layout

  1. 1. Introduction to Auto Layout July 17th, 2014
  2. 2. So why are we talking about Auto Layout ? ?
  3. 3. New Devices
  4. 4. iWatch
  5. 5. y = m*x + b, where: ● y and x are attributes of views. ● m and b are floating point values. Auto Layout is ….
  6. 6. Constraints
  7. 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. 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. 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. 10. Pin menu
  11. 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. 12. Why Auto Layout? ● Multiple iOS versions (6, 7, 8...) ● Rotation ● Dynamic Content ● Screen sizes
  13. 13. Size classes - Regular - Compact
  14. 14. Size classes
  15. 15. Size classes
  16. 16. 3. Size classes
  17. 17. Demo:
  18. 18. Debugging without running IBDesignables #import <UIKit/UIKit.h> IB_DESIGNABLE @interface TestInspectorView : UIView @end
  19. 19. Debugging without running IBInspectable #import <UIKit/UIKit.h> IB_DESIGNABLE @interface TestInspectorView : UIView @property (nonatomic) IBInspectable UIImage *photo; @property (nonatomic) IBInspectable NSString *title; @end
  20. 20. IBInspectable Runtime attributes: ● boolean, ● number, ● string, ● localized string, ● rectangle, ● point, ● size, ● color, ● range, ● nil
  21. 21. Debugging Views New live views functionality the ability to debug views right in Interface Builder.
  22. 22. Resizable iPhone and iPad simulators
  23. 23. Demo:
  24. 24. 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

×