Learn the options for the Distributions property and the differences to appearance.
- [Instructor] Alignment sets spacing…and alignment perpendicular to the axis.…Distribution sets spacing along the axis.…Though this is a bit more subtle than alignment.…Stop the app.…And take a look at the code for the stack view.…Like fill on the alignment,…fillEqually is the basic automatic mode.…It creates constraints that pin each subview to each other…and sets the size to be equal for all the subviews.…For a vertical axis that's the height,…for a horizontal the width.…
Currently the subviews are flush with one another.…You can add space with the spacing property of UIStackView.…Under distribution here,…add this line.…StackView.spacing…equals 10.…Go ahead and run the app.…Hit Maki Rolls and you'll see you're getting it…at a spacing of 10 between each one of our elements.…
Now you can also get unequal spacing,…and that's a method called setCustomSpacingAfter.…You can go ahead and stop this.…And I'm gonna do another stack view…dot, and this is gonna be setCustomSpacing…with a CGFLoat after UI view.…And we'll do spacing of 20 between backButton and label.…
Author
Released
6/5/2018- When and why to use Auto Layout programmatically
- Creating constraints in Swift
- Resolving errors in Auto Layout
- Using the safe area
- Working with the Visual Format Language
- Adding a stack view
- Harnessing the power of inequalities and priorities in constraints
- Understanding traits and size classes
Skill Level Intermediate
Duration
Views
Related Courses
-
Designing iOS and Android Apps
with Renata Phillippi1h 6m Intermediate
-
Introduction
-
Welcome39s
-
What you should know1m 2s
-
Warming up the simulators2m 19s
-
Using the exercise files1m 36s
-
-
1. Basic Concepts in Auto Layout
-
Views and frames5m 38s
-
Errors in Auto Layout2m 35s
-
The Auto Layout notation3m 33s
-
-
2. Coding Constraints
-
Basic preparation3m 53s
-
Anchors and the safe area5m 54s
-
Align views9m 24s
-
Errors in Auto Layout8m 26s
-
Size views with multipliers5m 40s
-
Solution: Oatmeal7m 29s
-
-
3. The Visual Format Language
-
Visual Format basics5m 28s
-
Visual Format pin constants4m 48s
-
Use sizes with Visual Format8m 40s
-
Errors in Visual Format5m 31s
-
Solution: Peanut butter10m 9s
-
4. Stack Views
-
Add a stack view6m 51s
-
Images in stack views4m 48s
-
Nest stack views8m 33s
-
Solution: Spring rolls7m 9s
-
-
5. Advanced Layout
-
Embed subviews6m 57s
-
Add constraints to subviews7m 42s
-
Intrinsic content size6m 36s
-
Inequalities in constraints8m 23s
-
Size ranges in Visual Format3m 33s
-
Challenge: Pasta56s
-
Solution: Pasta7m 54s
-
-
6. Size Classes
-
Why use size classes?2m 51s
-
Trait collections6m 26s
-
Determine the size class7m 51s
-
Challenge: Cake29s
-
Solution: Cake9m 35s
-
-
Conclusion
-
Next steps1m 42s
-
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: The distribution property and size