Living Off the Grid with UICollectionViews

A presentation on using Collection Views and creating custom Collection View Layouts.

Sample code available on Github at: https://github.com/jaythrash/CollectionViewLayoutDemo

Presentation originally given at 360iDev 2013 in Denver, CO

Transcript

1. Living the Grid with UICollectionView Off UICollectionView 360iDev September 2013 Denver, CO Jay Thrash @jaythrash jaythrash.com Wednesday, September 11, 13
2. Agenda •Origin •Organization •Implementation •Customization Wednesday, September 11, 13
3. Origin Wednesday, September 11, 13
4. Origin •Introduced in iOS 6 •New & Improved UITableView •Makes Grid Layouts Very Easy •Implement adaptive layouts Wednesday, September 11, 13
5. Organization Wednesday, September 11, 13
6. Organization Familiar “3D’s” UITableView Patterns • Data Source • Delegate • Dequeing Improves & Extends • New Content View types • Decoupling of layout Wednesday, September 11, 13
7. The 3D’s - Data Source UICollectionView Wednesday, September 11, 13
8. The 3D’s - Data Source UICollectionViewDataSource Wednesday, September 11, 13
9. The 3D’s - Data Source numberOfSectionsInCollectionView: Wednesday, September 11, 13
10. The 3D’s - Data Source collectionView:numberOfItemsInSection: Wednesday, September 11, 13
11. The 3D’s - Data Source Wednesday, September 11, 13
12. The 3D’s - Delegate UICollectionViewDelegate Wednesday, September 11, 13
13. The 3D’s - Delegate collectionView:shouldHighlightItemAtIndexPath: collectionView:didHighlightItemAtIndexPath: Wednesday, September 11, 13
14. The 3D’s - Delegate collectionView:shouldSelectItemAtIndexPath: collectionView:didSelectItemAtIndexPath: Wednesday, September 11, 13
15. The 3D’s - Delegate collectionView:shouldSelectItemAtIndexPath: collectionView:didSelectItemAtIndexPath: Wednesday, September 11, 13
16. The 3D’s - Dequeing •Follows same cell reuse patterns as UITableView •Register class for reuse identifier [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@”My_Cell_Id”]; New Wednesday, September 11, 13
17. 3D’s - Dequeing [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@”My_Cell_Id”]; - (UICollectionView*)collectionView:(UICollectionView*)cv cellForItemAtIndexPath:(NSIndexPath*)indexPath { MyCell *cell = [cv dequeReusableCellWithReuseIdentifier@”My_Cell_Id”]; if (!cell) { .... } // configure cell content cell.actorNameLabel.text = @”Sean Connery”; return cell; } Wednesday, September 11, 13
18. 3D’s - Dequeing [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@”My_Cell_Id”]; - (UICollectionView*)collectionView:(UICollectionView*)cv cellForItemAtIndexPath:(NSIndexPath*)indexPath { MyCell *cell = [cv dequeReusableCellWithReuseIdentifier@”My_Cell_Id”]; if (!cell) { .... } // configure cell content cell.actorNameLabel.text = @”Sean Connery”; return cell; } if (!cell) { .... } Wednesday, September 11, 13
19. Content View Types Set A Set B •Cells •Supplimentary Views •Decoration Views Wednesday, September 11, 13
20. Content View Types Set A Set B •Cells •Supplimentary Views •Decoration Views Wednesday, September 11, 13
21. Content View Types Set A Set B •Cells •Supplimentary Views •Decoration Views Wednesday, September 11, 13
22. Cell Anatomy view Wednesday, September 11, 13
23. Cell Anatomy view backgroundView Wednesday, September 11, 13
24. Cell Anatomy view selectedBackgroundView Wednesday, September 11, 13
25. Cell Anatomy view selectedBackgroundView contentView Wednesday, September 11, 13
26. Cell Anatomy view Casino Royale Daniel Craig, Eva Green, Mads Mikkelsen, Giancarlo Giannini Nov 17, 2006 Wednesday, September 11, 13
27. Get In the Flow UICollectionViewLayout Wednesday, September 11, 13
28. UICollectionView Wednesday, September 11, 13
29. UICollectionView UICollectionViewDataSource Wednesday, September 11, 13
30. UICollectionView UICollectionViewLayout UICollectionViewDataSource Wednesday, September 11, 13
31. UICollectionView UICollectionViewLayout UICollectionViewDataSource layoutAttributesForItemAtIndexPath: layoutAttributesForElementsInRect: Wednesday, September 11, 13
32. UICollectionView UICollectionViewLayout UICollectionViewDataSource layoutAttributesForItemAtIndexPath: layoutAttributesForElementsInRect: Wednesday, September 11, 13
33. UICollectionViewLayoutAttributes center/size frame Wednesday, September 11, 13
34. UICollectionViewLayoutAttributes transform Wednesday, September 11, 13
35. UICollectionViewLayoutAttributes alpha Wednesday, September 11, 13
36. UICollectionViewLayoutAttributes zIndex Wednesday, September 11, 13
37. UICollectionViewLayoutAttributes zIndex .... or make your own! Wednesday, September 11, 13
38. Implementation Wednesday, September 11, 13
39. Wednesday, September 11, 13
40. Wednesday, September 11, 13
41. Wednesday, September 11, 13
42. UICollectionViewFlowLayout Cell Views • Cell Size • Line Spacing • Inter-item Spacing • Register Class Wednesday, September 11, 13
43. UICollectionViewFlowLayout Cell Views • Cell Size • Line Spacing • Inter-item Spacing • Register Class Supplimentary Views • Header Size • Register Class Wednesday, September 11, 13
44. UICollectionViewFlowLayout Cell Views • Cell Size • Line Spacing • Inter-item Spacing • Register Class Supplimentary Views • Header Size • Register Class Decoration Views • Register Class Wednesday, September 11, 13
45. Demo Wednesday, September 11, 13
46. Customization Wednesday, September 11, 13
47. Wednesday, September 11, 13
48. Wednesday, September 11, 13
49. Wednesday, September 11, 13
50. Wednesday, September 11, 13
51. Passbook Layout Cell } Wednesday, September 11, 13
52. Passbook Layout }Stack ‘em Wednesday, September 11, 13
53. Cell Selection Selected Cell Remaining Cells Wednesday, September 11, 13
54. Demo Wednesday, September 11, 13
55. Resources Wednesday, September 11, 13
56. Where to go next? Wednesday, September 11, 13
57. Where to go next? Parallactic Collection Views Rene Cacheaux https://github.com/ RCacheaux/Parallax Introduction to Collection Views Mark Pospesel https://github.com/ mpospese/ IntroducingCollectionViews Wednesday, September 11, 13
58. Mothership • Introducing Collection Views • Advanced Collection Views and Building Custom Layouts • Custom Transitions Using View Controllers Wednesday, September 11, 13
59. Ultimate Source Ash Furrow http://ashfurrow.com Wednesday, September 11, 13
60. Don’t Forget... A+++!!! Would watch again! Wednesday, September 11, 13
61. Don’t Forget... No Cover Flow demo. Lame. Wednesday, September 11, 13
62. 360iDev September 2013 Denver, CO Jay Thrash @jaythrash jaythrash.com Thanks! Wednesday, September 11, 13