Custom Collection View Layouts

Presentation given on UICollectionView workshop in Berlin

1. CUSTOM UICOLLECTIONVIEW LAYOUTS
2. UICollectionViewFlowLayout
3. WHENEVER YOU CAN USE OR SUBCLASS FLOW LAYOUT
4. FLOW LAYOUT IS HIGHLY OPTIMIZED AND VERSATILE TOOL
5. FLOW LAYOUT IS A LINE BREAKING LAYOUT
6. ANY VARIATION THAT LAYS ITEMS IN A LINE AND BREAKS WHEN IT GETS TO AN END CAN BE COVERED WITH FLOW LAYOUT
7. WHENEVER YOU CAN USE OR SUBCLASS FLOW LAYOUT ▸ Add new views ▸ Tweak layout attributes ▸ New layout attributes ▸ Gesture support ▸ Custom insert/delete animations
8. WHY WOULD I WANT TO BUILD A CUSTOM LAYOUT THEN?
9. WHO HAS EVER BUILT A CUSTOM LAYOUT? THAT DOES NOT INHERIT FROM FLOW LAYOUT?
10. WHAT ARE THE TYPES OF LAYOUTS?
11. LAYOUT DRIVEN
12. LAYOUT DRIVEN THINK FLOW LAYOUT
13. DATA DRIVEN
14. DATA DRIVEN THINK CALENDAR LAYOUT
15. UICOLLECTIONVIEWLAYOUT ATTRIBUTES
16. DEFINES HOW ITEMS ARE LAID OUT BY YOUR COLLECTION VIEW.
17. NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionViewLayoutAttributes : NSObject @property (nonatomic) CGRect frame; @property (nonatomic) CGPoint center; @property (nonatomic) CGSize size; @property (nonatomic) CATransform3D transform3D; @property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0); @property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0); @property (nonatomic) CGFloat alpha; @property (nonatomic) NSInteger zIndex; // default is 0 @property (nonatomic, getter=isHidden) BOOL hidden; @property (nonatomic, retain) NSIndexPath *indexPath; @property (nonatomic, readonly) UICollectionElementCategory representedElementCategory; @property (nonatomic, readonly) NSString *representedElementKind;
18. YOU CAN PROVIDE YOUR OWN SUBCLASS TO PASS ADDITIONAL INFORMATION TO CELLS, SUPPLEMENTARY AND DECORATION VIEWS.
19. NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionReusableView : UIView (…) - (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)attributes; (…) @end
20. UICollectionView LayoutAttributes CUSTOM SUBCLASS
21. YOU HAVE TO OVERRIDE isEqual & copy
22. COLLECTION VIEW ELEMENTS RECAP
23. CELLS REGISTERED BY OWNER OF UICollectinView
24. SUPPLEMENTARY VIEW REGISTERED BY OWNER OF UICollectinView
25. DECORATION VIEW REGISTERED BY UICollcetionViewLayout
26. UICOLLECTIONVIEWLAYOUT PASSED IN BY OWNER OF COLLECTION VIEW IN INIT METHOD
27. UICOLLECTIONVIEW
28. UICOLLECTIONVIEWLAYOUTAT TRIBUTES
29. BUILDING CUSTOM COLLECTION VIEW LAYOUT
30. HOW DOES UICOLLECTIONVIEW PREPARE ITS LAYOUT? - (void)prepareLayout; - (CGSize)collectionViewContentSize; - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
31. PREPARE LAYOUT - (void)prepareLayout { [super prepareLayout]; (...) }
32. CONTENT SIZE - (CGSize)collectionViewContentSize { CGSize myCustomSize = (...) return myCustomSize; }
33. LAYOUT ATTRIBUTES FOR ELEMENTS IN RECT - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { return [super layoutAttributesForElementsInRect:rect]; }
36. You don't need to return only visible attributes
37. UICOLLECTIONVIEW CONSIDERS ITS LAYOUT UP AND READY AFTER THESE THREE METHODS ARE CALLED.
38. LAYOUT ATTRIBUTES FOR ELEMENT AT INDEX PATH - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path { return [super layoutAttributesForItemAtIndexPath:indexPath]; }
39. INVALIDATING LAYOUT WHEN?
40. INVALIDATE WHEN A VALUE THAT DRIVES LAYOUT CHANGES ▸ Bounds ▸ Content offset ▸ Data (data driven layouts) ▸ Layout-specific
41. INVALIDATING LAYOUT [layout invalidateLayout];
42. INVALIDATING LAYOUT - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds { return [super shouldInvalidateLayoutForBoundsChange:newBounds]; }
43. CUSTOM INVALIDATION CONTEXT
44. QUESTIONS?
45. ASSIGNMENT 1 CAROUSEL LAYOUT
46. GOALS ▸ Behaves like paging in scroll view with horizontal scroling ▸ Item is always centered veritcally when scroll rests ▸ When device is rotated the same cell stays in the middle of the screen ▸ No code related to setting up layout in controller ▸ Does not inherit from UICollectionViewFlowLayout
47. EXAMPLE
49. TIPS
50. USE TARGET CONTENT OFFSET WITH VELOCITY - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;
51. AND TARGET CONTENT OFFSET - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset;
53. GOALS ▸ Behaves like paging in scroll view with horizontal scroling ▸ Item is always centered veritcally when scroll rests ▸ When device is rotated the same cell stays in the middle of the screen ▸ No code related to setting up layout in controller ▸ Does not inherit from UICollectionViewFlowLayout
54. ASSIGNMENT 2 CALENDAR LAYOUT LET'S TRY SOMETHING HARDER
55. GOALS ▸ Displays items of different sizes that represent events ▸ Displays a 'hand' view that shows current time ▸ Does not inherit from flow layout
56. EXAMPLE
58. YOU WILL NEED SOME ADDITIONAL DATA IN YOUR LAYOUT
59. TIME TO POSITION HAND VIEW
60. EVENTS FOR CALENDAR
61. START OF DISPLAYED DAY
62. END OF DISPLAYED DATE
63. GETTING DATA TO YOUR COLLECTION VIEW LAYOUT
64. THE EXTENSIBLE DELEGATE PATTERN
65. @protocol CalendarCollectionViewLayoutDelegate <UICollectionViewDelegate>
66. HAND VIEW CONSIDER IT AS A DECORATION VIEW
67. REGISTERING A DECORATION VIEW [self registerClass:[HandView class] forDecorationViewOfKind:DecorationKindHand];
68. PROVIDING DECORATION LAYOUT ATTRIBUTES SAME AS WITH CELL LAYOUT ATTRIBUTES
69. - (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
70. [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:DecorationKindhand withIndexPath:indexPath];
71. DECORATION LAYOUT ATTRIBUTES HAVE TO BE ALSO RETURNED FROM layoutAttributesForRect
72. 1 MINUTE EQUALS 1 POINT
73. [self.startOfDisplayedDay mt_minutesUntilDate:self.endOfDisplayedDay];
75. GOALS ▸ Displays items of different sizes that represent events ▸ Displays a 'hand' view that shows current time ▸ Does not inherit from flow layout REMEMBER 1 MINUTE EQUALS 1 PIXEL
76. ASSIGNMENT 3 CALENDAR LAYOUT SEPARATORS
77. GOALS ▸ Display dark gray line at each hour ▸ Display light gray line at each half an hour ▸ Display hour next to each dark gray line
78. EXAMPLE
80. TIPS
81. USE CUSTOM LAYOUT ATTRIBUTES TO GET COLOR/TEXT TO SEPARATOR VIEW
82. SEPARATORS DECORATION VIEWS
83. EXAMPLE
85. GOALS ▸ Display dark gray line at each hour ▸ Display light gray line at each half an hour ▸ Display hour next to each dark gray line
86. CONCLUSION ▸ Flow layout can be easily modified to developer needs ▸ Building custom layouts is not that hard ▸ Layout attributes are the foundation of collection view ▸ Layout attributes can be a great way of providing additional data to collection view elements
87. THANK YOU FOR YOUR ATTENTION!
88. PAWEL DUDEK @ELDUDI HTTPS://GITHUB.COM/PAWELDUDEK