UICollectionView Basics and Flow Layout

Basics of UICollectionView and Flow Layout for workshops in Kraków.

Transcript

1. UICollectionView #UICollectionViewKrakow
2. @maciejoczko #UICollectionViewKrakow
3. Introduction #UICollectionViewKrakow
4. UI != NS #UICollectionViewKrakow
5. #UICollectionViewKrakow
6. “UICollectionView is the new UITableView. It's that important. NSHipster #UICollectionViewKrakow
7. “UICollectionView is awesome! My Friend #UICollectionViewKrakow
8. “The UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Apple #UICollectionViewKrakow
9. UICollectionView allows » to have totally custom layout » to dynamically change layouts » to have interactive transitions between layouts #UICollectionViewKrakow
10. UICollectionView is » subclass of UIScrollView » sibling of UITableView #UICollectionViewKrakow
11. UICollectionView Alloc Init » initWithFrame:collectionViewLayout: » UICollectionViewController #UICollectionViewKrakow
12. UICollectionView is mostly about... #UICollectionViewKrakow
13. Grids #UICollectionViewKrakow
14. #UICollectionViewKrakow
15. #UICollectionViewKrakow
16. #UICollectionViewKrakow
17. #UICollectionViewKrakow
18. #UICollectionViewKrakow
19. #UICollectionViewKrakow
20. Anatomy of Collection View #UICollectionViewKrakow
21. Cell Supplementary View Decoration View #UICollectionViewKrakow
22. Cell For Item » Tied to content » No predefined style » New way of creation » UICollectionReusableView subclass #UICollectionViewKrakow
23. Supplementary View » Tied to content but separate from cells » Driven by section data » View of a kind » UICollectionReusableView subclass #UICollectionViewKrakow
24. Decoration View » Not tied to content » Created in layout subclass » UICollectionReusableView subclass #UICollectionViewKrakow
25. Layout #UICollectionViewKrakow
26. Layout: Position #UICollectionViewKrakow
27. Layout: animations & transitions #UICollectionViewKrakow
28. How to create custom layout? #UICollectionViewKrakow
29. Derive from UICollectionViewLayout #UICollectionViewKrakow
30. Override methods collectionViewContentSize layoutAttributesForElementsInRect: layoutAttributesForItemAtIndexPath: layoutAttributesForSupplementaryViewOfKind:atIndexPath: layoutAttributesForDecorationViewOfKind:atIndexPath: shouldInvalidateLayoutForBoundsChange: #UICollectionViewKrakow
31. Override even more... prepareForCollectionViewUpdates: initialLayoutAttributesForAppearingItemAtIndexPath: initialLayoutAttributesForAppearingSupplementaryElementOfKind:atIndexPath: initialLayoutAttributesForAppearingDecorationElementOfKind:atIndexPath: finalLayoutAttributesForDisappearingItemAtIndexPath: finalLayoutAttributesForDisappearingSupplementaryElementOfKind:atIndexPath: finalLayoutAttributesForDisappearingDecorationElementOfKind:atIndexPath: finalizeCollectionViewUpdates #UICollectionViewKrakow
32. Attributes1 Object that manages the layout-related attributes for a given item. 1 UICollectionViewLayoutAttributes #UICollectionViewKrakow
33. Attributes1 » frame, center, size » alpha, hidden » zIndex » transform 3D 1 UICollectionViewLayoutAttributes #UICollectionViewKrakow
34. Layout: Recap » positioning » animations & transitions » subclassing » UICollectionViewLayoutAttributes #UICollectionViewKrakow
35. Data Source Delegate #UICollectionViewKrakow
36. Delegate » Selection & highlight tracking callbacks » Tracking the removal of views » Layout transition callback » Menu actions callbacks #UICollectionViewKrakow
37. Data Source - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath #UICollectionViewKrakow
38. Data Source - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath #UICollectionViewKrakow
39. collectionView:cellForItemAtIndexPath: MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; if (!cell) { cell = . . . } // Configure the cell's content return cell; #UICollectionViewKrakow
40. collectionView:cellForItemAtIndexPath: MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID” forIndexPath:indexPath]; // Configure the cell's content return cell; #UICollectionViewKrakow
41. View class registration [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@“MY_CELL_ID”] [collectionView registerClass:[MySupView class] forSupplementaryViewOfKind:@“MY_KIND” withReuseIdentifier:@“MY_CELL_ID”] [collectionView registerClass:[MyDecoView class] forDecorationViewOfKind:@“MY_KIND”] #UICollectionViewKrakow
42. Flow Layout #UICollectionViewKrakow
43. Flow Layout3 » Line oriented » Grid or group of lines » Predefined supplementary views: header & footer 3 UICollectionViewFlowLayout #UICollectionViewKrakow
44. Flow Layout: Customization » itemsize » inter item spacing » line spacing » scroll direction2 » reference sizes » section insets 2 Can't be set through UICollectionViewDelegateFlowLayout delegate. #UICollectionViewKrakow
45. Flow Layout #UICollectionViewKrakow
46. RECAP UICollectionView Anatomy Layout & Attributes Data Source & Delegate Flow Layout #UICollectionViewKrakow
47. https://github.com/mobile-academy/ ios-uicollectionview-seed #UICollectionViewKrakow
48. Task Create simple CollectionViewController with flow layout and inject it to RootViewController as its content. // AppDelegate.m CollectionViewDataSource *dataSource = [CollectionViewDataSource new]; CollectionViewController *cVC = [[CollectionViewController alloc] initWithDataSource:dataSource]; RootViewController *rootVC = [[RootViewController alloc] initWithContentController:cVC]; self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:rootVC]; #UICollectionViewKrakow
49. #UICollectionViewKrakow #UICollectionViewKrakow
50. Thanks! @maciejoczko #UICollectionViewKrakow