13 - iOS Autolayout
What have we used so far
- Dashed blue lines – edges and vertical/horizontal centers
- Ctrl-drag to edges and other elements (or itself) to set constraints
- Size inspector
- Click on constraint
- Document outline – fundamental to autolayout
Buttons in lower right corner
- Update frames
- Add new constraints
- Resolve auto layout issues
- Embed in
- Recalculates all the positions/sizes and redraws layout
- Align views to each-other
- Or to container
Add new constraints
- To nearest neighbor (click the dashed red line to add)
- Constrain to margins (not edges). Margin is 8dp on both sides of element edge
- Fix width or height
- Equal width or height between elements
- Aspect ratio (1:1 is square)
Resolve auto layout issues
- Either for all the views or just selected
- Add missing constraints
- Xcode trys to do magic - not vey good!
- Reset to Suggested Constraints
- Set everything according to blue dashed lines
- Clear constraints
- Initially we are interested only in Stack View
- Groups selected view elements into new container
- Either horizontal or vertical
- Can control spacing, distribution, etc
- Somewhat similar to Constraint Layout Chains and Linear Layout in Android
But not everything is doable with constraints
- If screen is wildly different - no constraint system can help you
- In these cases we would like to have totally new positions, new constraints, show-or-hide some elements, change colors etc.
Apple has SIZE CLASSES
- Width: Compact or Regular (and Any)
- Heighth: Compact or Regular (and Any)
Size Classes - iPad
Size classes - problem
This is not what we want!
- You can edit many properties separately in different size classes.
- Click on + sign in front of property!
- X to remove
You can do the same with constraints!
TIP! First select correct device in preview (with size class needed) - initial values are taken from preview size.
On older XCode
Select from the device selection the device size configuration you want to vary for From Vary fro Traits choose either Width or Height (or both) Device selection shows affected devices Modify Storyboard to your liking!
Autolayout In code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
Size classes per device