The document discusses advanced composable collection views, inspired by Apple's iTunes Connect app and information from the WWDC 2014 session on advanced user interfaces. It details the structure and components necessary for implementing a collection view, highlighting its flexibility and the ability to create complex interfaces using reusable building blocks. The talk emphasizes that this structure favors composition over inheritance and provides a framework for developers to build custom interfaces for their apps.

1. Advanced, Composable Collection
Views
Carl Brown
CocoaCoders Feb 11, 2015

2. Housekeeping: A Request
This talk came out of a question from one
of our attendees
We meet a lot (43 meetings in 2014), so
we’re always looking for topics and
speakers
If you would like to speak, lead a
discussion, or just want more information
about a specific topic, please post a
comment to the meetup page, start a
discussion on the message board or send
email to Carl

3. Housekeeping: Logistics
I’ll post the slides tonight, so no
need to take notes
I’m happy to go off-script
Please interrupt if you have
questions
Please try to keep cross-talk to a
minimum, though

4. Inspiration for
tonight
Advanced, Composable
Collection Views
Extracted from (or modeled
on) the iTunes Connect app

5. Example:
Apple Sample
Code
WWDC 2014 Session 232

6. Reference: WWDC 2014 Session 232
“Advanced User Interfaces with Collection Views”
Good session, covers a lot of ground
Sample project: https://developer.apple.com/devcenter/download.action?
path=/wwdc_2014/wwdc_2014_sample_code/
advanceduserinterfacesusingcollectionview.zip
I’m going to talk about a subset of what was covered in that session, but in
more detail

7. About this User Interface
Title

8. About this User Interface
Title
Subtitle

9. About this User Interface
Title
Subtitle
Favorite

10. About this User Interface
Title
Subtitle
Favorite
Segmented Control

11. About this User Interface
Title
Subtitle
Favorite
Segmented Control
2-Column text

12. About this User Interface
Title
Subtitle
Favorite
Segmented Control
2-Column text
Description

13. About this User Interface
Title
Subtitle
Favorite
Segmented Control
2-Column text
Description
TableView-like

14. But with all that, it’s pretty simple*
Just 40 class files, including main and AppDelegate and a bunch of
stuff that’s not UI (like models and such)
*and it’s actually overkill for this sample, but it’s an extract from a shipping, Universal app

15. Structure
AAPLCollectionViewGridLayout
AAPLBasicDataSource
AAPLTextValueDataSource
AAPLDataSource (Abstract)
AAPLSegmentedDataSource
AAPLKeyValueDataSource
AAPLComposedDataSource
AAPLCollectionViewController

16. Quick Review: UICollectionView
Collection Views are like tables with
style, can be grids and have arbitrary
element positioning
Need 3 things to have a Collection
View:
Delegate
DataSource
Layout

17. Delegates are (mostly) Familiar
collectionView:didSelectItemAtIndexPath:
Handle events
touches, drags, interactions
highlighting, disabling, selecting
transitioning to new content
Watch session video for their transitioning (& state machine) work

18. UICollectionView
Need 3 things to have a
Collection View:
Delegate
DataSource
Layout

19. DataSource (Protocol)
numberOfSectionsInCollectionView:
collectionView:numberOfItemsInSection:
collectionView:cellForItemAtIndexPath:
collectionView:viewForSupplementaryElementOfKind:atIndexPath:
(As opposed to Header/Footer from TableView, there can be many kinds)

20. DataSource (This App)
The DataSources in this app are
Composable
The top level is made up of many
different DataSources of different
types
Allows for reusable sections
between different models

21. DataSource Composition Usage
Add a new DataSource to the top-level one with
- (void)addDataSource:(AAPLDataSource *)dataSource
new DataSource is added to an array and mapped to lookup table
numberOfSections returns the sum of the sections in the lookup table
other calls (e.g. cellForItemAtIndexPath:) call the same method in the
mapped DataSource

22. UICollectionView
Need 3 things to have a
Collection View:
Delegate
DataSource
Layout

23. Layout
Layout is where the User Interface
actually gets arranged
Turns out that’s composable, too,
and also informed by the
DataSource
I’m going to ignore Supplementary
Views (Header, Footer, etc), in the
following discussion, but they’re
similar

24. Rough Layout Logic
AAPLCollectionViewGridLayout
prepareLayout
buildLayout
layoutAttributesForElementsInRect:
layoutAttributesForItemAtIndexPath:
(NSDict *)
_layoutAttributesDataSource

25. Focus on Two AAPLDS Methods
@interface AAPLDataSource : NSObject
<UICollectionViewDataSource, AAPLContentLoading>
- (AAPLLayoutSectionMetrics *)
metricsForSectionAtIndex:
(NSInteger)sectionIndex;
- (CGSize)collectionView:
(UICollectionView *)collectionView
sizeFittingSize:(CGSize)size
forItemAtIndexPath:(NSIndexPath *)indexPath;
@end

26. buildLayout
for (NSInteger sectionIndex = 0; sectionIndex < numberOfSections; ++sectionIndex)
{
AAPLGridLayoutSectionInfo *section = [self
sectionInfoForSectionAtIndex:sectionIndex];
[section computeLayoutWithOrigin:start measureItemBlock:
^(NSInteger itemIndex, CGRect frame) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:itemIndex
inSection:sectionIndex];
return [dataSource collectionView:collectionView
sizeFittingSize:frame.size forItemAtIndexPath:indexPath];
}
[self addLayoutAttributesForSection:section atIndex:sectionIndex
dataSource:dataSource];
}

27. UICollectionView
Need 3 things to have a
Collection View:
Delegate
DataSource
Layout

28. So what do you do with this thing?
In theory, you could use the AAPLDataSource, the
AAPLCollectionViewController and the AAPLStateMachine as the core/
engine of your own app’s UI
They seem to be planning for that case
Or, you could use the concepts they introduce here to make your own
(hopefully simpler) implementation to suit your specific use-cases

29. Good News, Everyone!!
This kind of structure lets you make really complicated interfaces out of
reusable building blocks
It mostly favors composition over inheritance, and if you chose, you could do
it all with just @protocols
Since it’s all one collection view, you don’t have to deal with Dueling
ScrollViews
You could embed pretty much any kind of cell/content/layout in this format
you want

30. Questions?
Comments?
Snide Remarks?