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

Introduction to Auto Layout

Introduction to Auto Layout

Introduction to Auto Layout

Oursky Limited

August 11, 2014
Tweet

More Decks by Oursky Limited

Other Decks in Programming

Transcript

  1. 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
  2. CE Level Math… y = 7x + 3 y =

    -8x - 4 How to solve x and y?
  3. 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
  4. So… Auto Layout is just to solve a large number

    of linear equations Cassowary constraint solver http:/ /www.cs.washington.edu/ research/constraints/cassowary/
  5. 成日打code的人, a.k.a. Code guy, Rocky says, “it is easy” (20,

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

    (20, 40), (238, 130) (311, 40), (238, 130) (20, 166), (528, 134)
  7. 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
  8. CE Level Math Revisit… y = 7x + 3 2y

    = 14x + 6 Infinite Many Solutions
  9. 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?
  10. 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
  11. Intrinsic Content Size Some views know their size UIImageVIew same

    as the image UILabel same as size of the text
  12. view1.attribute1 = multiplier * view2.attribute2 + constant Auto Layout’s true

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

    + 5y <= 25 x >= 1 Linear Programming
  14. Not verbose … button1.right = button2.left - 12 button2.left =

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

    ! NSArray *constraints = ! [NSLayoutConstraint constraintsWithVisualFormat: @"[button1]-[button2]" ! options:0 metrics:nil views:viewsDictionary];
  16. 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
  17. Localization An attribute is one of left, right, top, bottom,

    leading, trailing, width, height, centerX, centerY, and baseline.
  18. R Y D A E Zero Spacing Constraint Center Vertically

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

    Problem: Note name has to be center horizontally
  20. Reference Apple Developer Library - Auto Layout Guide https:/ /developer.apple.com/

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