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
- Metrics: iOS 6 to iOS 7, screen sizes, and rotation
- 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]
orControl
+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
, theSimulated 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 informationConflicting Constraints
: Too much informationMisplaced 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)
Creating Equal Spacing Between Views: Constrain the spacer views so that their lengths are equal to each other.