Layout with Stack View, Table View, and Collection View
17
-
Upload
make-school -
Category
Software
-
view
3.228 -
download
2
Transcript of 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
