layout with stack view, table view, and collection view

MORE LAYOUT OPTIONSUIStackView, UIScrollView, UITableView, UICollectionView

AGENDA

UIStackView

UIScrollView

UITableView

UICollectionView

UISTACKVIEW

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

UISTACKVIEWPosition of views in UIStackView is determined by:

axis: horizontal

distribution: fill

alignment: center

spacing: 10

UISTACKVIEWInstead of using constraints, stack different UIStackViews to build layout:

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

UISCROLLVIEW

UISCROLLVIEW

Allows to display

content that is larger

than screen size

User can scroll,

zoom, etc to view

the entire content

UISCROLLVIEW

UITableView and UICollectionView use UIScrollView internally

UITABLEVIEW

UITABLEVIEW

Use for list content, where amount of elements could be arbitrary large

Ideal for uniform content

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

UICOLLECTIONVIEW

UICOLLECTIONVIEW

Similar to UITableView but provides flexible, non-linear layout

Example: Filter selection from Makestagram project [4]

[4] UICollectionView implementation in Makestagram Project

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