Auto Layout Tips

AutoLayout.md

Auto Layout is a contraint-based, descriptive layout system. Describe the layout with constraints, and frames are calculated automatically.

Whay Auto Layout?

• Relational: Codifying the relative way we describe interfaces
• Dynamism: Improved responsiveness to changges
  • Metrics: iOS 6 to iOS 7, screen sizes, and rotation
    • The user can actually change the size of the font on the fly.
    • Using Auto Layout and using relationships to describe things like spacings, alignments, equal size, these are the things that are going to translate regardless of what the size of the container is, so the size of the control, the size of your contents. *Content: Localization
• Expressiveness: Can specify powerful relationships between views.

Adopting Auto Layout
Auto Layout can be adopted incrementally. With Auto Layout, the kind of granularity is per view conroller or per Interface Builder document. In code, you can actually get down to the level of adopting it per view.

• Update Interface Builder documents
  • Enable Auto Layout
  • Add contraints
• When adding subviews in code
  • Add or update contraints instead of calling -setFrame:
  • Disable translatesAutoresizingMaskIntoConstraints property. It ask the system to generating constraints that exactly mimic the Autoresizing Mask. The default is yes.

---

####1. Initial Layout

• First adding views, positioning, and resizing
• Add constraints when you are ready. Interface Builder is not going to add any constraints when you first add a view.
• Fixed position and size. With Xcode 5, if you haven't added any constraints to the view yet, Xcode will at Build Time add fix position and size constraints. This allows you to seperate your Layout and Interface Builder with your layout at runtime. What you are dragging around and resizing an Interface Builder could be independent of how you're thinking about things at runtime and then you get to decide when you want to sync that up.

---

####2. Adding Constraints

• Direct manipulation: Control drag between views
• Auto Layout resolving menu
• Constraint addition popovers: Double-clicking the constraint.

Preview the Result: (Option + [Click] or Option + Shift + [click])

Tips:

• Shift + [Right Click] or Control + Shift + Left + Click: Get a popup of all the views under the click and can choose any of them (to edit properties or what not).
• Under Attributes Inspector, the Simulated Metrics Option area can change Orientation value
• In File inspector, enable or diable Auto Layout

---

####3. Debug & Resolve

Intermediate States(Show as orange color)

• Ambiguous Frames: Not enough information
• Conflicting Constraints: Too much information
• Misplaced Views: Mismatched position or size

This Red Button means you have unresolved Auto Layout issues in the scene.

Debugging

• Canvas decorations
• Xcode Issues Navigator
• Quick fixes via the canvas resolving menu
• Detailed help using the outline view

---

WWDC 2012 sessions on Auto Layout

• Introduction to Auto Layout for iOS and OS X
• Best Practices for Mastering Auto Layout
• Auto Layout by Example

WWDC 2013

• WWDC2013 Session 406 - Taking Control of Auto Layout in Xcode 5 (this note was based on)

Using AutoLayout in UIScrollView:
You must pin the right and/or bottom of the last subview to the right and/or bottom of the scroll view. This is how the scroll view knows the content size.

via UIScrollView doesn't use autolayout constraints

Creating Equal Spacing Between Views: Constrain the spacer views so that their lengths are equal to each other.

spacer1 | view1 | spacer2 | view2 | spacer3

Center Two Adjacent Views

Animating Changes Made by Auto Layout

If you need full control over animating changes made by Auto Layout, you must make your constraint changes programmatically.

[UIView animateWithDuration:1.0 animations:^{
     // Make all constraint changes here
     [containerView layoutIfNeeded]; // Forces the layout of the subtree animation block and then captures all of the frame changes
}];

设高度为 1 的线时，必须用高度除以 [UIScreen mainScreen].scale，如：

NSLayoutConstraint *constraint = [NSLayoutConstraint constraintWithItem:self.lineView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual  toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1 constant:1/[UIScreen mainScreen].scale];
[self.lineView addConstraint:constraint];