UIStackView provides a streamlined interface for laying out a collection of views in either a vertical or horizontal orientation. It handles the layout of its arranged subviews and their content sizes, alignments, spacing and distribution. The stack view's position and size must be defined, while it will calculate the frames of its arranged subviews based on constraints and the specified distribution, alignment and spacing attributes.

1. UISTACKVIEW
PROVIDES A STREAMLINED INTERFACE FOR LAYING OUT A COLLECTION OF VIEWS
IN EITHER A COLUMN OR A ROW.

2. DON’T NEED YOU !
I HAVE AUTOLAYOUT FOR THAT…

3. AUTOLAYOUT
AutoLayout !
Auto Layout dynamically calculates the size and
position of all the views in your view hierarchy,
based on constraints placed on those views

4. UISTACKVIEW
The Real AutoLayout
Stack views lets you leverage the power of
Auto Layout, creating user interfaces that can
dynamically adapt to the device’s orientation,
screen size, and any changes in the available
space.

5. INTRINSIC CONTENT SIZE ?????
BEFORE WE BEGIN…
CHCR PRIORITIES ???

6. INTRINSIC CONTENT SIZE
▸ The minimum space needed to express the full view
content without squeezing or clipping that data
https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/AutolayoutPG/
AnatomyofaConstraint.html#//apple_ref/doc/uid/TP40010853-CH9-SW21

7. CONTENT HUGGING, COMPRESSION RESISTANCE PRIORITY
https://littlebitesofcocoa.com/69-compression-resistance-content-hugging
(CHCR PRIORITIES)

8. ATTRIBUTES
▸ Axis
▸ Alignment
▸ Distribution
▸ Spacing

9. ALIGNMENT | DISTRIBUTION | SPACING
Source : https://developer.apple.com/reference/uikit/uistackview

10. AXIS

11. SPACING

12. ALIGNMENT : HORIZONTAL STACKVIEW
▸ Top
▸ Center
▸ Bottom
▸ Fill

13. ALIGNMENT : VERTICAL STACKVIEW
▸ Leading
▸ Center
▸ Trailing
▸ Fill

14. DISTRIBUTION (1/3)
▸ Fill
▸ Fill Equally
▸ Fill Proportionally
(Test in code !)
▸ Equal Centering
▸ Equal Spacing

15. DISTRIBUTION (2/3)
▸ Fill
▸ Attempts to fill the space along the axis with the items.
▸ Sizes each item via its intrinsicContentSize.
▸ Uses each item’s contentCompressionResistancePriority and
contentHuggingPriority to determine which items to grow or shrink.
▸ contentCompressionResistancePriority – The view with the lowest
value gets truncated when there is not enough space to fit
everything’s intrinsicContentSize.
▸ contentHuggingPriority – The view with the lowest value gets
expanded beyond its intrinsicContentSize when there is leftover
space to fill.

16. DISTRIBUTION (3/3)
▸ Fill Equally : Resizes each item equally along the axis to fill the
available space. Also takes into account spacing between items.
▸ Fill Proportionally : Resizes each item by proportionally
distributing the extra space based on their intrinsicContentSize
along the axis.
▸ Equal Centering :Sizes each item based on its
intrinsicContentSize and spaces them all equally along the axis.
Uses spacing as a minimum value.
▸ Equal Spacing : Sizes each item based on its
intrinsicContentSize and spaces them all equally from each
others center along the axis. Uses spacing as a minimum value.

17. POSITIONING AND SIZING THE STACK VIEW
‣ You are responsible for defining the
position and (optionally) the size of the
stack view. The stack view then manages
the layout and size of its content.

18. GETTING HANDS DIRTY !

19. LET’S CODE !
XCode

20. Define the position only.
Define the stack’s size along its axis.
Define the stack’s size perpendicular to its
axis.
Define the size and position of the stack
view
https://developer.apple.com/reference/uikit/uistackview
COMMON UISTACKVIEW LAYOUTS

21. PROGRAMMATICALLY
UIView UIStackView
addSubview: addArrangedSubview:
insertSubview:atIndex: insertArrangedSubview:atIndex:
subviews arrangedSubviews

22. PECULIARITIES
▸ Non-rendering Subclass of UIView
▸ Be careful with removeArrangedSubview: method. (Avoid It)
▸ hidden property is animatable !

23. USEFUL LINKS : UISTACKVIEW
▸ https://www.raywenderlich.com/114552/uistackview-tutorial-
introducing-stack-views
▸ http://www.runtimecrash.com/2015/09/17/exploring-uistackview/
▸ https://developer.apple.com/reference/uikit/uistackview
▸ http://www.thinkandbuild.it/introduction-to-uistackview/
▸ https://www.raizlabs.com/dev/2016/04/uistackview/
▸ https://spin.atomicobject.com/2016/06/22/uistackview-distribution/
▸ http://angelolloqui.com/blog/36-Oddities-of-UIStackView

24. USEFUL LINKS : CHCR PRIORITIES
▸ https://littlebitesofcocoa.com/69-compression-resistance-content-hugging
▸ https://developer.apple.com/library/content/documentation/
UserExperience/Conceptual/AutolayoutPG/AnatomyofaConstraint.html#//
apple_ref/doc/uid/TP40010853-CH9-SW19
▸ https://krakendev.io/blog/autolayout-magic-like-harry-potter-but-real
▸ http://tuchangwei.github.io/2015/09/14/Cocoa-Autolayout-content-
hugging-vs-content-compression-resistance-priority/
▸ http://www.iosinsight.com/content-hugging-and-compression-resistance-
explained/

25. LASTLY, ON A COMPLETELY DIFFERENT NOTE,
ONE IMPORTANT THING…
▸ Don’t use custom views for navigation bar. It leads to
choppy UX !
▸ Use native Navigation bar only and customise if needed !
▸ http://www.appcoda.com/customize-navigation-status-
bar-ios-7/
▸ https://www.natashatherobot.com/navigation-bar-
interactions-ios8/