UICollectionView Introduction

Presentation prepared for UICollectionView workshop in Warsaw.

Transcript

1. UICollectionView
2. @maciejoczko #UICollectionViewWarsaw
3. INTRO
4. UICollectionView
5. UICollectionView + Flow Layout
6. iOS 6 Introduced in
7. UI != NS
8. UITableView New
9. UITableView Sibling of
10. UIScrollView UICollectionView UITableView
11. is mostly about UICollectionView
12. GRIDS
13. GRIDS
14. GRIDS
18. MORE GRIDS
23. OTHERS
26. UI
27. cell supplementary view decoration view
28. cell No predefined cell styles New way of creation Tied to content
29. supplementary view Tied to data but separate from cells View of a kind
30. decoration view Not tied to content
31. cell supplementary view decoration view recap
32. Layout UICollectionView
33. Layout animations
34. Layout transitions
35. Layout posi tion
36. Layout Subclassing
37. UICollectionViewLayoutAttributes
38. UICollectionViewLayoutAttributes frame
39. UICollectionViewLayoutAttributes frame alpha
40. UICollectionViewLayoutAttributes frame alpha zIndex
41. UICollectionViewLayoutAttributes frame alpha zIndex center
42. UICollectionViewLayoutAttributes frame alpha zIndex center size
43. UICollectionViewLayoutAttributes frame alpha zIndex center size hidden
44. UICollectionViewLayoutAttributes frame alpha zIndex center size hidden transform 3D
45. Layout animations recap transitions positioning subclassing
46. Collection
47. UICollectionView DataSource
48. DataSource collectionView:cellForItemAtIndexPath: collectionView:numberOfItemsInSection: collectionView:viewForSupplementaryElementOfKind: atIndexPath: numberOfSectionsInCollectionView:
49. DataSource collectionView:cellForItemAtIndexPath: collectionView:numberOfItemsInSection: collectionView:viewForSupplementaryElementOfKind: atIndexPath: numberOfSectionsInCollectionView:
50. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; if (!cell) { cell = . . . } // Configure the cell's content return cell; }
51. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; if (!cell) { cell = . . . } // Configure the cell's content return cell; }
52. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; // Configure the cell's content return cell; }
53. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; // Configure the cell's content return cell; }
54. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID” forIndexPath:indexPath]; // Configure the cell's content return cell; }
55. collectionView:cellForItemAtIndexPath: { MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID” forIndexPath:indexPath]; // Configure the cell's content return cell; }
56. [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@“MY_CELL_ID”]
57. [collectionView registerClass:[MyCell class] forSupplementaryViewOfKind:@“MY_KIND” withReuseIdentifier:@“MY_CELL_ID”]
58. [collectionView registerClass:[MyCell class] forDecorationViewOfKind:@“MY_KIND”
59. The same pattern in UITableView since iOS6
60. View
61. UICollectionView Delegate
62. Delegate Layout transition callback Tracking the removal of views Menu actions callbacks Selection & highlight tracking callbacks
63. Layout Flow
64. Layout Flow UICollectionView
65. Layout Line oriented
66. group of lines grid OR
67. Predefined supplementary views HEADER FOOTER
68. Customization
69. itemSize
70. minimum inter item spacing 10 10
71. minimum line spacing 10 10
72. scroll direction HORIZONTAL VERTICAL
73. HEADER FOOTER reference sizes
74. section insets
75. UICollectionViewFlowLayout instance properties setting values UICollectionViewDelegateFlowLayout
76. Powerful Flow Layout is
77. Thanks! @maciejoczko
78. CREDITS screenshots: native apps & AppStore color palette: electrikmonk http://www.colourlovers.com/palette/1930/cheer_up_emo_kid Q&A
79. https://github.com/literator/ UICollectionViewWorkshop