232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software...
Transcript of 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software...
![Page 1: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/1.jpg)
© 2014 Apple Inc. All rights reserved. Redistribution or public display not permitted without written permission from Apple.
#WWDC14
Advanced User Interfaceswith Collection ViewsAn iTunes Connect case study
Session 232 Jeff Watkins iOS Software Engineer
Frameworks
![Page 2: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/2.jpg)
Introduction
New designs for iTunes Connect
![Page 3: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/3.jpg)
Introduction
New designs for iTunes Connect
Pay off technical debt
![Page 4: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/4.jpg)
Introduction
New designs for iTunes Connect
Pay off technical debt
Create modern architecture
![Page 5: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/5.jpg)
Introduction
New designs for iTunes Connect
Pay off technical debt
Create modern architecture
Sample code: AdvancedCollectionView-1.0
![Page 6: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/6.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 7: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/7.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 8: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/8.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 9: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/9.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 10: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/10.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 11: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/11.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 12: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/12.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 13: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/13.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 14: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/14.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 15: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/15.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 16: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/16.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 17: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/17.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 18: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/18.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 19: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/19.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 20: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/20.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 21: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/21.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 22: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/22.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 23: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/23.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 24: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/24.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 25: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/25.jpg)
Data SourcesMinimizing complexity
![Page 26: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/26.jpg)
![Page 27: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/27.jpg)
![Page 28: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/28.jpg)
![Page 29: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/29.jpg)
Traditional Data Source
Implemented in UICollectionViewController
Either • One gigantic controller
• One controller per content type
Doesn’t encourage code reuse for similar sections
![Page 30: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/30.jpg)
Aggregate Data Source
Implement data sources as separate objects
Enables code reuse
Single view controller
![Page 31: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/31.jpg)
Aggregate Data Source
AAPLDataSourceThe base data source class
AAPLSegmentedDataSourceMultiple children; only one active at a time
AAPLComposedDataSourceMultiple children; all active at once
AAPLBasicDataSourceOne section; items stored in an NSArray
![Page 32: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/32.jpg)
Segmented Data Source
Details
Episodes
Reviews
Trends
![Page 33: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/33.jpg)
Composed Data Source
Details
Episodes
Reviews
Trends
![Page 34: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/34.jpg)
Composed Data Source
Details • Status
Episodes
Reviews
Trends
![Page 35: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/35.jpg)
Composed Data Source
Details • Status
• Information
Episodes
Reviews
Trends
![Page 36: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/36.jpg)
Composed Data Source
Details • Status
• Information
• Description
Episodes
Reviews
Trends
![Page 37: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/37.jpg)
Basic Data Source
Details
Episodes
Reviews
Trends
![Page 38: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/38.jpg)
Composed Data Source
Details
Episodes
Reviews
Trends
![Page 39: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/39.jpg)
Composed Data Source
Details
Episodes
Reviews • Ratings
Trends
![Page 40: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/40.jpg)
Composed Data Source
Details
Episodes
Reviews • Ratings
• Reviews
Trends
![Page 41: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/41.jpg)
Custom Data Source
Details
Episodes
Reviews
Trends
![Page 42: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/42.jpg)
Custom Data Source
Details
Episodes
Reviews
Trends • Graph
![Page 43: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/43.jpg)
Custom Data Source
Details
Episodes
Reviews
Trends • Graph
• History
![Page 44: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/44.jpg)
Single Loading Indicator
![Page 45: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/45.jpg)
Single Loading Indicator
Data source responsible for loading
![Page 46: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/46.jpg)
Single Loading Indicator
Data source responsible for loading
View controller starts fetch in -viewWillAppear:
![Page 47: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/47.jpg)
Single Loading Indicator
Data source responsible for loading
View controller starts fetch in -viewWillAppear:
Use state machine
![Page 48: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/48.jpg)
Initial Loading Content
Content Loaded
Refresh-ing
Content
NoContent
Error
AAPLLoadableContentStateMachine
![Page 49: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/49.jpg)
Initial Loading Content
Content Loaded
Refresh-ing
Content
No Content
Error
Cat List Data Source
Initial
![Page 50: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/50.jpg)
Initial Loading Content
Content Loaded
Refresh-ing
Content
No Content
Error
Cat List Data Source
GET http://example.com/cats/
Loading Content
![Page 51: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/51.jpg)
Cat List Data Source
200 OK
Initial Loading Content
Content Loaded
Refresh-ing
Content
No Content
Error
![Page 52: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/52.jpg)
Initial Loading Content
Content Loaded
Refresh-ing
Content
No Content
Error
Loading Content
![Page 53: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/53.jpg)
Initial Loading Content
Content Loaded
Refresh-ing
Content
No Content
Error
Content Loaded
![Page 54: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/54.jpg)
Initial Loading Content
Content Loaded
Refresh-ing
Content
No Content
Error
Loading Content
![Page 55: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/55.jpg)
Initial Loading Content
Content Loaded
Refresh-ing
Content
No Content
Error
No Content
![Page 56: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/56.jpg)
Initial Loading Content
Content Loaded
Refresh-ing
Content
No Content
Error
Loading Content
![Page 57: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/57.jpg)
Initial Loading Content
Content Loaded
Refresh-ing
Content
No Content
ErrorError
![Page 58: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/58.jpg)
Aggregate Data Sources
Ratings Data Source
Reviews Data Source
Composed Data Source
Initial
Initial
Initial
![Page 59: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/59.jpg)
Aggregate Data Sources
Ratings Data Source
Reviews Data Source
Composed Data Source
Loading Content
Loading Content
Loading Content
![Page 60: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/60.jpg)
Aggregate Data Sources
Ratings Data Source
Reviews Data Source
GET http://example.com/ratings/
GET http://example.com/reviews/
Composed Data Source
Loading Content
Loading Content
Loading Content
![Page 61: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/61.jpg)
Aggregate Data Sources
Ratings Data Source
Reviews Data Source
GET http://example.com/ratings/
GET http://example.com/reviews/
200 OK
Composed Data Source
Content Loaded
Loading Content
Loading Content
![Page 62: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/62.jpg)
Aggregate Data Sources
Ratings Data Source
Reviews Data Source
GET http://example.com/ratings/
GET http://example.com/reviews/
200 OK
Composed Data Source
^{…}Content Loaded
Loading Content
Loading Content
![Page 63: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/63.jpg)
Aggregate Data Sources
Ratings Data Source
Reviews Data Source
200 OKComposed
Data Source
GET http://example.com/ratings/
GET http://example.com/reviews/
200 OK
Content Loaded
Content Loaded
Loading Content
^{…}
![Page 64: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/64.jpg)
Aggregate Data Sources
Ratings Data Source
Reviews Data Source
200 OKComposed
Data Source
GET http://example.com/ratings/
GET http://example.com/reviews/
200 OK
Content Loaded
Content Loaded
Loading Content
^{…}^{…}
![Page 65: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/65.jpg)
Aggregate Data Sources
Ratings Data Source
Reviews Data Source
Composed Data Source
Content Loaded
Content Loaded
Content Loaded
^{…}^{…}[collectionView performBatchUpdates:^{ !
!
!
!
} completion:nil];
![Page 66: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/66.jpg)
Aggregate Data Sources
Ratings Data Source
Reviews Data Source
Composed Data Source
Content Loaded
Content Loaded
Content Loaded^{…}
^{…}
[collectionView performBatchUpdates:^{ !
!
!
!
} completion:nil];
![Page 67: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/67.jpg)
Aggregate Data SourcesRecap
Reduce view controller complexity
Promotes code reuse
Isolates task specific logic
Enables unified loading indicator
![Page 68: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/68.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 69: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/69.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 70: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/70.jpg)
Custom UICollectionViewLayoutComplete flexibility and power
![Page 71: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/71.jpg)
Design Metrics
What information did we need? • Per section?
• Per header and footer?
Where does it go?
![Page 72: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/72.jpg)
Section Metrics
OcelotThe Ocelot is also known as the dwarf leopard.
Big Cats See All
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 73: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/73.jpg)
Section Metrics
OcelotThe Ocelot is also known as the dwarf leopard.rowHeight
Big Cats See All
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 74: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/74.jpg)
Section Metrics
OcelotThe Ocelot is also known as the dwarf leopard.rowHeight backgroundColor
Big Cats See All
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 75: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/75.jpg)
Section Metrics
OcelotThe Ocelot is also known as the dwarf leopard.rowHeight
separatorColor andseparatorInsets
backgroundColor
Big Cats See All
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 76: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/76.jpg)
Section Metrics
OcelotThe Ocelot is also known as the dwarf leopard.rowHeight
separatorColor andseparatorInsets
backgroundColor
selectedBackgroundColor
Big Cats See All
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 77: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/77.jpg)
Section Metrics
OcelotThe Ocelot is also known as the dwarf leopard.
LeopardThe leopard is the smallest of the four big cats.
numberOfColumns
TigerThe tiger is the largest of the cat species.
LionThe male lion is easily recognized by its mane.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
CheetahThe cheetah can run faster than any other land animal.
Big Cats See All
![Page 78: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/78.jpg)
Section Metrics
OcelotThe Ocelot is also known as the dwarf leopard.
LeopardThe leopard is the smallest of the four big cats.
numberOfColumns
showsColumnSeparator
TigerThe tiger is the largest of the cat species.
LionThe male lion is easily recognized by its mane.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
CheetahThe cheetah can run faster than any other land animal.
Big Cats See All
![Page 79: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/79.jpg)
Header and Footer Metrics
OcelotThe Ocelot is also known as the dwarf leopard.
Big Cats See All
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 80: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/80.jpg)
Header and Footer Metrics
OcelotThe Ocelot is also known as the dwarf leopard.
Big Cats See Allheight
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 81: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/81.jpg)
Header and Footer Metrics
OcelotThe Ocelot is also known as the dwarf leopard.
Big Cats See All backgroundColorheight
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 82: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/82.jpg)
Header and Footer Metrics
OcelotThe Ocelot is also known as the dwarf leopard.
Big Cats See All backgroundColorheight
paddingTigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 83: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/83.jpg)
Custom Attributes
backgroundColor
selectedBackgroundColor
padding
pinnedHeader
![Page 84: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/84.jpg)
Global Headers
NSIndexPath normally has two indexes • Section
• Item
![Page 85: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/85.jpg)
Global Headers
NSIndexPath normally has two indexes • Section
• Item
NSIndexPath with only one index [NSIndexPath indexPathWithIndex:0]
![Page 86: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/86.jpg)
Global Headers
NSIndexPath normally has two indexes • Section
• Item
NSIndexPath with only one index [NSIndexPath indexPathWithIndex:0]
Need to ensure code checks length of index paths
![Page 87: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/87.jpg)
Build the Layout
if data source changed snapshot data source if collection view width changed or data source changed regenerate layout attributes & special layout attributes if collection view origin changed update special layout attributes
![Page 88: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/88.jpg)
Build the Layout
if data source changed snapshot data source if collection view width changed or data source changed regenerate layout attributes & special layout attributes if collection view origin changed update special layout attributes
![Page 89: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/89.jpg)
Build the Layout
if data source changed snapshot data source if collection view width changed or data source changed regenerate layout attributes & special layout attributes if collection view origin changed update special layout attributes
![Page 90: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/90.jpg)
Build the Layout
if data source changed snapshot data source if collection view width changed or data source changed regenerate layout attributes & special layout attributes if collection view origin changed update special layout attributes
![Page 91: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/91.jpg)
Snapshot Metrics
Status Data Source
Information Data Source
Composed Data Source
Segmented Data Source
Description Data Source
![Page 92: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/92.jpg)
Snapshot MetricsSection 0
Status Data Source
Information Data Source
Composed Data Source
Segmented Data Source
Description Data Source
![Page 93: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/93.jpg)
Snapshot Metrics
rowHeight = 44backgroundColor = light- Grey
Section 0
Status Data Source
Information Data Source
Composed Data Source
Segmented Data Source
Description Data Source
![Page 94: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/94.jpg)
Snapshot MetricsSection 0
rowHeight = 44backgroundColor = lightGrey
Status Data Source
Information Data Source
Composed Data Source
Segmented Data Source
Description Data Source
![Page 95: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/95.jpg)
Snapshot MetricsSection 0
rowHeight = 44backgroundColor = lightGrey
Status Data Source
Information Data Source
Composed Data Source
Segmented Data Source
Description Data Source
![Page 96: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/96.jpg)
Snapshot Metrics
rowHeight = 60selectedBackgroundColor = mediumGrey
Section 0
rowHeight = 44backgroundColor = lightGrey
Status Data Source
Information Data Source
Composed Data Source
Segmented Data Source
Description Data Source
![Page 97: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/97.jpg)
Snapshot MetricsSection 0
rowHeight = 60backgroundColor = lightGreyselectedBackgroundColor = mediumGrey
Status Data Source
Information Data Source
Composed Data Source
Segmented Data Source
Description Data Source
![Page 98: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/98.jpg)
Optional Layout Methods
Critical to getting our layout just right -prepareLayout -prepareForCollectionViewUpdates: -targetContentOffsetForProposedContentOffset: -initialLayoutAttributes* and -finalLayoutAttributes*
![Page 99: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/99.jpg)
Optional Layout Methods
Critical to getting our layout just right -prepareLayout -prepareForCollectionViewUpdates: -targetContentOffsetForProposedContentOffset: -initialLayoutAttributes* and -finalLayoutAttributes*
![Page 100: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/100.jpg)
-prepareLayout
![Page 101: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/101.jpg)
-prepareLayout
NewOld
![Page 102: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/102.jpg)
-prepareForCollectionViewUpdates:
Deletions
Insertions
NewOld
![Page 103: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/103.jpg)
-prepareForCollectionViewUpdates:
Deletions
Insertions
NewOld
![Page 104: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/104.jpg)
-prepareForCollectionViewUpdates:
Deletions
Insertions
NewOld
![Page 105: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/105.jpg)
-prepareForCollectionViewUpdates:
Deletions
Insertions
NewOld
![Page 106: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/106.jpg)
Target Content Offset-targetContentOffsetForProposedContentOffset:
Adjusts scroll offset
Used by layout to calculate• Pinning offset
• Delta to prevent unwanted motion
![Page 107: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/107.jpg)
Target Content Offset-targetContentOffsetForProposedContentOffset:
Adjusts scroll offset
Used by layout to calculate• Pinning offset
• Delta to prevent unwanted motion
Get this calculation correct—use it in many places
![Page 108: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/108.jpg)
ligula. Ut nec sapien sed lorem feugiat porttitor. Donec vitae posuere erat. Ut eu nisl ultrices, laoreet ligula ac, bibendum diam. Cras purus massa, vulputate a accumsan quis, tempor sed sem. In quis turpis enim. In gravida, purus at scelerisque eleifend, ante augue blandit dui, id pulvinar justo nibh non dolor. Duis scelerisque urna et enim hendrerit ullamcorper. Nam porta rutrum urna, viverra tincidunt velit ultricies mattis. Sed in dui sed lorem varius sollicitudin. Pellentesque sed malesuada nibh, vel pretium tellus. Sed arcu dolor, gravida eget lacus at, posuere malesuada dolor. Proin at dui gravida dui facilisis consectetur sit amet eu mauris. Donec sed felis facilisis, congue nisl at, gravida diam.
contentSize: 320x1000 contentOffset: 0, 432
Before
![Page 109: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/109.jpg)
ham hock ground round bresaola meatloaf pig spare ribs short ribs short loin beef ribs kielbasa. Frankfurter meatloaf short ribs shank hamburger salami bacon tail ham pork belly. Short loin swine cow ham, venison porchetta beef ribs corned beef flank. Filet mignon ground round andouille tri-tip. Kevin andouille pastrami jerky ground round, sirloin ham hock.
Before
contentSize: 320x645 contentOffset: 0, 432
![Page 110: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/110.jpg)
Bacon ipsum dolor sit amet tri-tip beef ribs brisket sirloin turkey venison prosciutto shoulder swine. Jerky pastrami turkey kielbasa, venison pig meatloaf fatback capicola. Cow pancetta swine, ham hock ground round bresaola meatloaf pig spare ribs short ribs short loin beef ribs kielbasa. Frankfurter meatloaf short ribs shank hamburger salami bacon tail ham pork belly. Short loin swine cow ham, venison porchetta beef ribs corned beef flank. Filet mignon ground round andouille tri-tip. Kevin andouille pastrami jerky ground round, sirloin ham hock.
Before
contentSize: 320x645 contentOffset: 0, 165
![Page 111: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/111.jpg)
ligula. Ut nec sapien sed lorem feugiat porttitor. Donec vitae posuere erat. Ut eu nisl ultrices, laoreet ligula ac, bibendum diam. Cras purus massa, vulputate a accumsan quis, tempor sed sem. In quis turpis enim. In gravida, purus at scelerisque eleifend, ante augue blandit dui, id pulvinar justo nibh non dolor. Duis scelerisque urna et enim hendrerit ullamcorper. Nam porta rutrum urna, viverra tincidunt velit ultricies mattis. Sed in dui sed lorem varius sollicitudin. Pellentesque sed malesuada nibh, vel pretium tellus. Sed arcu dolor, gravida eget lacus at, posuere malesuada dolor. Proin at dui gravida dui facilisis consectetur sit amet eu mauris. Donec sed felis facilisis, congue nisl at, gravida diam.
contentSize: 320x1000 contentOffset: 0, 432
After
![Page 112: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/112.jpg)
ham hock ground round bresaola meatloaf pig spare ribs short ribs short loin beef ribs kielbasa. Frankfurter meatloaf short ribs shank hamburger salami bacon tail ham pork belly. Short loin swine cow ham, venison porchetta beef ribs corned beef flank. Filet mignon ground round andouille tri-tip. Kevin andouille pastrami jerky ground round, sirloin ham hock.
After
contentSize: 320x645 contentOffset: 0, 0
![Page 113: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/113.jpg)
Bacon ipsum dolor sit amet tri-tip beef ribs brisket sirloin turkey venison prosciutto shoulder swine. Jerky pastrami turkey kielbasa, venison pig meatloaf fatback capicola. Cow pancetta swine, ham hock ground round bresaola meatloaf pig spare ribs short ribs short loin beef ribs kielbasa. Frankfurter meatloaf short ribs shank hamburger salami bacon tail ham pork belly. Short loin swine cow ham, venison porchetta beef ribs corned beef flank. Filet mignon ground round andouille tri-tip. Kevin andouille pastrami jerky ground round, sirloin ham hock.
After
contentSize: 320x645 contentOffset: 0, 0
![Page 114: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/114.jpg)
Initial and Final Layout Attributes-initialLayoutAttributes* and -finalLayoutAttributes*
-initialLayoutAttributes*: called if the view will be on screen after the update
-finalLayoutAttributes*: called if the view was on the screen before the update
Both methods will be called for a view that remains on screen
Simple once update information processed
![Page 115: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/115.jpg)
bresaola meatloaf pig spare ribs short ribs short loin beef ribs kielbasa. Frankfurter meatloaf short ribs shank hamburger salami bacon tail ham pork belly. Short loin swine cow ham, venison porchetta beef ribs corned beef flank. Filet mignon ground round andouille tri-tip. Kevin andouille pastrami jerky ground round, sirloin ham hock.
Without Initial Layout Attributes
size: 320x645 origin: 0, 0
![Page 116: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/116.jpg)
Bacon ipsum dolor sit amet tri-tip beef ribs brisket sirloin turkey venison prosciutto shoulder swine. Jerky pastrami turkey kielbasa, venison pig meatloaf fatback capicola. Cow pancetta swine, ham hock ground round bresaola meatloaf pig spare ribs short ribs short loin beef ribs kielbasa. Frankfurter meatloaf short ribs shank hamburger salami bacon tail ham pork belly. Short loin swine cow ham, venison porchetta beef ribs corned beef flank. Filet mignon ground round andouille tri-tip. Kevin andouille pastrami jerky ground round, sirloin ham hock.
Without Initial Layout Attributes
size: 320x645 origin: 0, 0
![Page 117: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/117.jpg)
Bacon ipsum dolor sit amet tri-tip beef ribs brisket sirloin turkey venison prosciutto shoulder swine. Jerky pastrami turkey kielbasa, venison pig meatloaf fatback capicola. Cow pancetta swine, ham hock ground round bresaola meatloaf pig spare ribs short ribs short loin beef ribs kielbasa. Frankfurter meatloaf short ribs shank hamburger salami bacon tail ham pork belly. Short loin swine cow ham, venison porchetta beef ribs corned beef flank. Filet mignon ground round andouille tri-tip. Kevin andouille pastrami jerky ground round, sirloin ham hock.
With Initial Layout Attributes
size: 320x645 origin: 0, 432
![Page 118: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/118.jpg)
Bacon ipsum dolor sit amet tri-tip beef ribs brisket sirloin turkey venison prosciutto shoulder swine. Jerky pastrami turkey kielbasa, venison pig meatloaf fatback capicola. Cow pancetta swine, ham hock ground round bresaola meatloaf pig spare ribs short ribs short loin beef ribs kielbasa. Frankfurter meatloaf short ribs shank hamburger salami bacon tail ham pork belly. Short loin swine cow ham, venison porchetta beef ribs corned beef flank. Filet mignon ground round andouille tri-tip. Kevin andouille pastrami jerky ground round, sirloin ham hock.
With Initial Layout Attributes
size: 320x645 origin: 0, 0
![Page 119: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/119.jpg)
-initialLayoutAttributesForAppearingItemAtIndexPath:
NSInteger section = indexPath.section; !
AAPLCollectionViewGridLayoutAttributes *result = [self.indexPathToItemAttributes[indexPath] copy]; !
BOOL inserted = [self.insertedSections containsIndex:section] || [self.insertedIndexPaths containsObject:indexPath]; BOOL reloaded = [self.reloadedSections containsIndex:section];
!
…
![Page 120: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/120.jpg)
-initialLayoutAttributesForAppearingItemAtIndexPath:
NSInteger section = indexPath.section; !
AAPLCollectionViewGridLayoutAttributes *result = [self.indexPathToItemAttributes[indexPath] copy]; !
BOOL inserted = [self.insertedSections containsIndex:section] || [self.insertedIndexPaths containsObject:indexPath]; BOOL reloaded = [self.reloadedSections containsIndex:section];
!
…
![Page 121: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/121.jpg)
-initialLayoutAttributesForAppearingItemAtIndexPath:
NSInteger section = indexPath.section; !
AAPLCollectionViewGridLayoutAttributes *result = [self.indexPathToItemAttributes[indexPath] copy]; !
BOOL inserted = [self.insertedSections containsIndex:section] || [self.insertedIndexPaths containsObject:indexPath]; BOOL reloaded = [self.reloadedSections containsIndex:section];
!
…
![Page 122: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/122.jpg)
-initialLayoutAttributesForAppearingItemAtIndexPath:
NSInteger section = indexPath.section; !
AAPLCollectionViewGridLayoutAttributes *result = [self.indexPathToItemAttributes[indexPath] copy]; !
BOOL inserted = [self.insertedSections containsIndex:section] || [self.insertedIndexPaths containsObject:indexPath]; BOOL reloaded = [self.reloadedSections containsIndex:section];
!
…
![Page 123: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/123.jpg)
-initialLayoutAttributesForAppearingItemAtIndexPath:
… !
if (inserted) result.alpha = 0; !
if (reloaded && !self.oldIndexPathToItemAttributes[indexPath]) result.alpha = 0; !
results.frame = CGRectOffset(results.frame, -self.contentOffsetDelta.x, -self.contentOffsetDelta.y); return results;
![Page 124: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/124.jpg)
-initialLayoutAttributesForAppearingItemAtIndexPath:
… !
if (inserted) result.alpha = 0; !
if (reloaded && !self.oldIndexPathToItemAttributes[indexPath]) result.alpha = 0; !
results.frame = CGRectOffset(results.frame, -self.contentOffsetDelta.x, -self.contentOffsetDelta.y); return results;
![Page 125: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/125.jpg)
-initialLayoutAttributesForAppearingItemAtIndexPath:
… !
if (inserted) result.alpha = 0; !
if (reloaded && !self.oldIndexPathToItemAttributes[indexPath]) result.alpha = 0; !
results.frame = CGRectOffset(results.frame, -self.contentOffsetDelta.x, -self.contentOffsetDelta.y); return results;
![Page 126: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/126.jpg)
UICollectionViewLayoutRecap
Book keeping is critical
Optional methods make a big difference
![Page 127: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/127.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 128: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/128.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 129: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/129.jpg)
Swipe to Edit and Drag ReorderingJust a little something extra
![Page 130: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/130.jpg)
Swipe to Edit
Add AAPLAction instances to cells
!
NSString *favoriteTitle = NSLocalizedString(@“★”, @“Favorite action”); NSString *deleteTitle = NSLocalizedString(@“Delete”, @“Delete action”); !
cell.editActions = @[ [AAPLAction actionWithTitle:favoriteTitle selector:@selector(makeFavorite:)], [AAPLAction destructiveActionWithTitle:deleteTitle selector:@selector(swipeToDeleteCell:)] ];
![Page 131: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/131.jpg)
Additional Custom Attributes
columnIndex
editing
movable
![Page 132: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/132.jpg)
Swipe to EditOne column
Delete★
OcelotThe Ocelot is also known as the dwarf leopard.
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 133: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/133.jpg)
Swipe to EditOne column
Delete★
OcelotThe Ocelot is also known as the dwarf leopard.
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
![Page 134: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/134.jpg)
Delete★
LeopardThe leopard is the smallest of the four big cats.
LionThe male lion is easily recognized by its mane.
Swipe to EditTwo column
Delete★
OcelotThe Ocelot is also known as the dwarf leopard.
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
CheetahThe cheetah can run faster than any other land animal.
![Page 135: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/135.jpg)
Delete★
LeopardThe leopard is the smallest of the four big cats.
LionThe male lion is easily recognized by its mane.
Swipe to EditTwo column
Delete★
OcelotThe Ocelot is also known as the dwarf leopard.
TigerThe tiger is the largest of the cat species.
Mountain LionLike almost all cats, the mountain lion is a solitary animal.
CheetahThe cheetah can run faster than any other land animal.
![Page 136: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/136.jpg)
Delete★
Batch Editing
OcelotThe Ocelot is also known as the dwarf leopard.
LionThe male lion is easily recognized by its mane.
TigerThe tiger is the largest of the cat species.
editing = NO
![Page 137: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/137.jpg)
Delete★
Batch Editing
OcelotThe Ocelot is also known as the dwarf leopard.
LionThe male lion is easily recognized by its mane.
TigerThe tiger is the largest of the cat species.
editing = YES movable = YES
![Page 138: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/138.jpg)
Batch Editing
Delete★
OcelotThe Ocelot is also known as the dwarf leopard.
LionThe male lion is easily recognized by its mane.
TigerThe tiger is the largest of the cat species.
![Page 139: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/139.jpg)
Batch Editing
Delete★
OcelotThe Ocelot is also known as the dwarf leopard.
LionThe male lion is easily recognized by its mane.
TigerThe tiger is the largest of the cat species.
![Page 140: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/140.jpg)
AAPLSwipeToEditStateMachine
Manages gesture recognizers • UIPanGestureRecognizer
• UILongPressGestureRecognizer
States are somewhat complex
Works with our layout and cells Nothing
Tracking
Animating Open
Editing
Animating Shut
![Page 141: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/141.jpg)
Drag to Reorder
Required layout changes • Layout gap
• Hidden cells
• Fast layout calculation
Requires data source support • Can move item at indexPath?
• May move item from indexPath to indexPath?
• Move item at indexPath to indexPath
![Page 142: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/142.jpg)
Drag to Reorder
Required layout changes • Layout gap
• Hidden cells
• Fast layout calculation
Requires data source support • Can move item at indexPath?
• May move item from indexPath to indexPath?
• Move item at indexPath to indexPath
![Page 143: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/143.jpg)
Our Requirements
Complex data sources
Single loading indicator
Looked like UITableView
Multiple columns on iPad
Global headers
Pinning headers
Swipe to edit
Batch edit
Drag reordering
![Page 144: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/144.jpg)
Summary
Aggregate data sources simplify complex designs
Proper bookkeeping makes UICollectionViewLayout easy
Swipe to Edit and Drag Reordering are incremental additions
![Page 145: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/145.jpg)
More Information
Jake Behrens App Frameworks Evangelist [email protected]
Documentation Collection View Programming Guide for iOS http://developer.apple.com/ios
Apple Developer Forums http://devforums.apple.com
![Page 146: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/146.jpg)
Related Sessions
• What's New in Table and Collection Views Presidio Thursday 10:15AM
![Page 147: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/147.jpg)
Labs
• Table View and Collection View Lab Frameworks Lab A Thursday 11:30AM
![Page 148: 232 Advanced User Interfaces DF - devstreaming-cdn.apple.com...Session 232 Jeff Watkins iOS Software Engineer Frameworks. Introduction New designs for iTunes Connect. Introduction](https://reader030.fdocuments.us/reader030/viewer/2022040210/5e63327d0c5f88162b7497f4/html5/thumbnails/148.jpg)