Introduction to UIStackView

I made a presentation with this slide at the following meetup.

Tokyo iOS MEETUP: December iOS Meetup
https://www.meetup.com/ja-JP/TokyoiOSMeetup/events/234081164/

Transcript

1. Introduction to UIStackView Dec 10, 2016 TOKYO iOS Meetup
2. Kazunobu Tasaka About Me tasanobu
3. Contents • What’s UIStackView? • How UIStackView positions and sizes its subviews • How to use the Stack View • Conclusion
4. What’s UIStackView?
5. UIStackView • A wrapper class of Auto Layout • Available on iOS 9 or above • Able to lay out its subviews horizontally or vertically
6. How UIStackView positions and sizes its subviews
7. Main Properties for Layout • UIStackView is configured 
 mainly through the following 4 properties • axis • alignment • distribution • spacing
8. axis • The orientation of the subviews var axis: UILayoutConstraintAxis .horizontal .vertical
9. alignment • alignment of the subviews perpendicular to its axis • The size of each subview is calculated based on Intrinsic Content Size. (except for .fill) var alignment: UIStackViewAlignment
10. alignment • axis: .horizontal
 .top, .center, .bottom, .fill
11. alignment • axis: .vertical
 .leading, .center, .trailing, .fill

12. distribution • distribution is how the stack view lays out its subviews along its axis • .fill • .fillEqually • .fillPropotionally • .equalSpacing • .equalCentering var distribution: UIStackViewDistribution
13. distribution .fill Subviews are resized according to 
 their hugging priority, compression resistance priority
14. distribution .fillEqually Subviews are resized so that they are all the same size
15. distribution .fillProposionally Subviews are resized proportionally based on their intrinsic content size
16. distribution .equalSpacing • Subviews are positioned with the space between the views • Subviews are resized based on their intrinsic content size
17. distribution .equalCentering • Subviews are positioned so that they have an equal center- to-center spacing • The spacing are shrinked if the subviews do not fit within the stack view
18. distribution axis: .horizontal axis: .vertical
19. spacing • Spacing between adjacent edges of subviews • When distribution is .equalSpacing and .equalCentering,
 it’s just used as the minimum spacing var spacing: CGFloat distribution: .equalSpacing .fill spacing value is ignored
20. One more important property
21. arrangedSubviews • UIStackView lays out views in this property • Needs to add subviews via addArrangedSubviews() • Notes:
 arrangedSubviews is a subset of subviews.
 However, when adding a view with addSubview(),
 the view is not under control of UIStackView var arrangedSubviews: [UIView]
22. How to use UIStackView
23. Sample let view = UIView(frame: CGRect(x: 0, y: 0, width: 200, height: 50)) view.backgroundColor = UIColor.white /// Instantiate StackView and configure it let stackView = UIStackView(frame: .zero) stackView.axis = .horizontal stackView.alignment = .center stackView.distribution = .fill stackView.spacing = 20 stackView.translatesAutoresizingMaskIntoConstraints = false view.addSubview(stackView) /// Setup StackView's constraints to its superview like // view.topAnchor.constraint(equalTo: stackView.topAnchor).isActive = true // view.bottomAnchor.constraint(equalTo: stackView.bottomAnchor).isActive = true /// Add subviews let switchh = UISwitch() switchh.isOn = true switchh.backgroundColor = UIColor.cyan stackView.addArrangedSubview(switchh) let label = UILabel() label.backgroundColor = UIColor.magenta label.text = "label" stackView.addArrangedSubview(label) let button = UIButton(type: .infoDark) button.backgroundColor = UIColor.yellow stackView.addArrangedSubview(button)
24. Interface Builder
25. Conclusion
26. Thanks
27. Credit • Icons made by Freepik from www.flaticon.com is licensed by CC 3.0 BY • Icons made by Tae S Yang from www.flaticon.com is licensed by CC 3.0 BY