Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to Auto Layout

Introduction to Auto Layout

Introduction to Auto Layout

975ff6c8166f6f32889f004a904ffa39?s=128

Oursky Limited

August 11, 2014
Tweet

Transcript

  1. Introduction to Auto Layout Edwin Kwok

  2. J.Tune Auto Layout

  3. What are gone in Xcode 5?

  4. None
  5. What is auto layout? a system that lets you lay

    out your app’s user interface by creating a mathematical description of the relationships between the elements define these relationships in terms of constraints either on individual elements, or between sets of elements
  6. Constraints Auto Layout System Layout

  7. CE Level Math… y = 7x + 3 y =

    -8x - 4 How to solve x and y?
  8. What’s Constraint view1.attribute1 = multiplier * view2.attribute2 + constant An

    attribute is one of left, right, top, bottom, leading, trailing, width, height, centerX, centerY, and baseline. e.g. the left edge of the button should be 20 points from the left edge of its containing view button.left = 1 * container.left + 20 y = m x + c
  9. So… Auto Layout is just to solve a large number

    of linear equations Cassowary constraint solver http:/ /www.cs.washington.edu/ research/constraints/cassowary/
  10. Why Auto Layout? One day, designer Frank makes a brilliant

    design All spacings are 20pt width
  11. 成日打code的人, a.k.a. Code guy, Rocky says, “it is easy” (20,

    40), (130, 244) (170, 40), (130, 244) (20, 304), (280, 244)
  12. after rotation… the programmer says, “update the frames after rotation…”

    (20, 40), (238, 130) (311, 40), (238, 130) (20, 166), (528, 134)
  13. Why is that? (20, 40), (130, 244) (20, 40), (238,

    130) Width: 130 * (568 - 20) / (320 - 20) = 237.5 Height: 244 * (320 - 40) / (568 - 40) = 129.4
  14. Auto Layout Demo

  15. CE Level Math Revisit… y = 7x + 3 y

    = 7x + 7 No Solutions
  16. CE Level Math Revisit… y = 7x + 3 2y

    = 14x + 6 Infinite Many Solutions
  17. So What? In Auto Layout More than one solution ambiguities

    No solutions unsatisfiable
  18. Quiz A label is constrained with 8-point offsets from its

    superview’s left and right edges. It is 22 points high. Is this label’s layout ambiguous?
  19. Quiz Is this layout satisfiable? button1.width = 2 * button2.width

    button2.width = 3 * button1.width
  20. Problem is … They all are solution ambiguous!!!!

  21. Key Concept… Correctly using auto layout requires you to change

    thinking Don’t go calculating frames Define how elements are related Describe the layout in a declarative way
  22. Top Layout Guide Top Layout Guide (0,0)

  23. Intrinsic Content Size Some views know their size UIImageVIew same

    as the image UILabel same as size of the text
  24. Alignment Rect UIImage *image = [[UIImage imageNamed:@"Shadowed.png"] imageWithAlignmentRectInsets:UIEdgeInsetsMake(0, 0, 20,

    20)]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
  25. Alignment Rect

  26. view1.attribute1 = multiplier * view2.attribute2 + constant Auto Layout’s true

    colors = equal >= greater than or equal <= less than or equal
  27. Auto Layout’s true colors… x - 4y <= -3 3x

    + 5y <= 25 x >= 1 Linear Programming
  28. Methods of adding constraints Interface Builder NSLayoutConstraint Visual Format Language

  29. NSConstraintLayout [NSLayoutConstraint constraintWithItem:self.button1 attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:self.button2 attribute:NSLayoutAttributeLeft multiplier:1.0 constant:-12.0]; view1.attribute1

    = multiplier * view2.attribute2 + constant
  30. Not verbose … button1.right = button2.left - 12 button2.left =

    button1.right + 12 Need to think carefully which one is on the left
  31. Visual Format Language [button1]-[button2] NSDictionary *viewsDictionary = ! NSDictionaryOfVariableBindings(self.button1, self.button2);

    ! NSArray *constraints = ! [NSLayoutConstraint constraintsWithVisualFormat: @"[button1]-[button2]" ! options:0 metrics:nil views:viewsDictionary];
  32. Migration Do I need to update all views to auto

    layout system in one shot? No Will I miss anything after using auto layout? No, auto layout is more powerful system than struts and springs
  33. Localization An attribute is one of left, right, top, bottom,

    leading, trailing, width, height, centerX, centerY, and baseline.
  34. None
  35. Useful usage

  36. R Y D A E Zero Spacing Constraint Center Vertically

    Constraint Horizontal Vertically Constraint
  37. Useful usage Possible Solution: 1. WebView 2. Attributed String !

    Problem: Note name has to be center horizontally
  38. Auto Layout Solution

  39. Not Mentioned… Priority Content Resistance Content Hugging Animation Layout Debugging

  40. Q & A

  41. Reference Apple Developer Library - Auto Layout Guide https:/ /developer.apple.com/

    library/ios/documentation/ userexperience/conceptual/ AutolayoutPG/Introduction/ Introduction.html