Layout with Stack View, Table View, and Collection View
2 likes7,846 views
This document provides an overview and comparison of different layout options in iOS including UIStackView, UIScrollView, UITableView, and UICollectionView. It describes UIStackView as a layout mechanism similar to CSS Flexbox that is better than Auto Layout for dynamic layouts. UIScrollView allows displaying content larger than the screen size by allowing the user to scroll. UITableView is ideal for uniform list content while UICollectionView provides a more flexible non-linear layout like filters.
![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](https://image.slidesharecdn.com/layout2-150925052815-lva1-app6891/85/Layout-with-Stack-View-Table-View-and-Collection-View-5-320.jpg)
![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](https://image.slidesharecdn.com/layout2-150925052815-lva1-app6891/85/Layout-with-Stack-View-Table-View-and-Collection-View-8-320.jpg)
![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](https://image.slidesharecdn.com/layout2-150925052815-lva1-app6891/85/Layout-with-Stack-View-Table-View-and-Collection-View-14-320.jpg)
![UICOLLECTIONVIEW
Similar to UITableView but
provides flexible, non-linear
layout
Example: Filter selection from
Makestagram project [4]
[4] UICollectionView implementation in Makestagram Project](https://image.slidesharecdn.com/layout2-150925052815-lva1-app6891/85/Layout-with-Stack-View-Table-View-and-Collection-View-16-320.jpg)
![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](https://image.slidesharecdn.com/layout2-150925052815-lva1-app6891/85/Layout-with-Stack-View-Table-View-and-Collection-View-17-320.jpg)
Layout with Stack View, Table View, and Collection View
- 2. MORE LAYOUT OPTIONS 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