Layout with Stack View, Table View, and Collection View

2. MORE LAYOUT OPTIONS
UIStackView, UIScrollView, UITableView, UICollectionView

3. AGENDA
UIStackView
UIScrollView
UITableView
UICollectionView

4. UISTACKVIEW

5. UISTACKVIEW
Layout mechanism similar to CSS Flexbox [1]
Better than Auto Layout for dynamic layouts
New in iOS 9
[1] Mozilla Documentation: Using CSS flexible boxes

6. UISTACKVIEW
Position of views in UIStackView is
determined by:
axis: horizontal
distribution: fill
alignment: center
spacing: 10

7. UISTACKVIEW
Instead of using constraints, stack different
UIStackViews to build layout:

8. UISTACKVIEW [2]
Layout is re-calculated when views are
hidden or added
Try to build interface with UIStackView, add
explicit constraints only when necessary
[2] UIStackView class reference

9. UISCROLLVIEW

10. UISCROLLVIEW
Allows to display
content that is larger
than screen size
User can scroll,
zoom, etc to view
the entire content

11. UISCROLLVIEW
UITableView and UICollectionView use
UIScrollView internally

12. UITABLEVIEW

13. UITABLEVIEW
Use for list content, where
amount of elements could be
arbitrary large
Ideal for uniform content

14. UITABLEVIEW
Can be difficult to handle cells with different heights
With iOS 8 + Auto Layout us self-sizing cells, but they
can be tricky to implement [3]
Alternative: tableView:heightForRowAtIndexPath:
in UITableViewDelegate and calculate cell height
manually
[3] Brief Tutorial on self sizing cells in iOS 8

15. UICOLLECTIONVIEW

16. UICOLLECTIONVIEW
Similar to UITableView but
provides flexible, non-linear
layout
Example: Filter selection from
Makestagram project [4]
[4] UICollectionView implementation in Makestagram Project

17. UICOLLECTIONVIEW
Provides default flow layout [5]
Allows to implement custom layouts [6], [7]:
[5] Appled Docs: Using the Flow Layout
[6] Apple Docs: Creating Custom Layouts
[7] Talk: Beyond the Grid — Creating Unique, High Performance Interfaces With UICollectionView