Custom Collection View Layouts

Presentation given on UICollectionView workshop in Berlin

Transcript

1. CUSTOM
   UICOLLECTIONVIEW
   LAYOUTS
   

   View Slide

2. UICollectionViewFlowLayout
   

   View Slide

3. WHENEVER YOU CAN USE OR
   SUBCLASS FLOW LAYOUT
   

   View Slide

4. FLOW LAYOUT IS HIGHLY OPTIMIZED AND
   VERSATILE TOOL
   

   View Slide

5. FLOW LAYOUT IS A LINE
   BREAKING LAYOUT
   

   View Slide

6. ANY VARIATION THAT LAYS ITEMS IN A LINE
   AND BREAKS WHEN IT GETS TO AN END CAN
   BE COVERED WITH FLOW LAYOUT
   

   View Slide

7. WHENEVER YOU CAN USE OR SUBCLASS FLOW LAYOUT
   ▸ Add new views
   ▸ Tweak layout attributes
   ▸ New layout attributes
   ▸ Gesture support
   ▸ Custom insert/delete animations
   

   View Slide

8. WHY WOULD I WANT TO BUILD
   A CUSTOM LAYOUT THEN?
   

   View Slide

9. WHO HAS EVER BUILT A CUSTOM LAYOUT?
   THAT DOES NOT INHERIT FROM FLOW LAYOUT?
   

   View Slide

10. WHAT ARE THE TYPES OF
    LAYOUTS?
    

    View Slide

11. LAYOUT DRIVEN
    

    View Slide

12. LAYOUT DRIVEN
    THINK FLOW LAYOUT
    

    View Slide

13. DATA DRIVEN
    

    View Slide

14. DATA DRIVEN
    THINK CALENDAR LAYOUT
    

    View Slide

15. UICOLLECTIONVIEWLAYOUT
    ATTRIBUTES
    

    View Slide

16. DEFINES HOW ITEMS ARE LAID OUT BY YOUR
    COLLECTION VIEW.
    

    View Slide

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;
    

    View Slide

18. YOU CAN PROVIDE YOUR OWN SUBCLASS TO
    PASS ADDITIONAL INFORMATION TO CELLS,
    SUPPLEMENTARY AND DECORATION VIEWS.
    

    View Slide

19. NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionReusableView : UIView
    (…)
    - (void)applyLayoutAttributes:(UICollectionViewLayoutAttributes *)attributes;
    (…)
    @end
    

    View Slide

20. UICollectionView
    LayoutAttributes
    CUSTOM SUBCLASS
    

    View Slide

21. YOU HAVE TO OVERRIDE
    isEqual & copy
    

    View Slide

22. COLLECTION VIEW
    ELEMENTS
    RECAP
    

    View Slide

23. CELLS
    REGISTERED BY OWNER OF
    UICollectinView
    

    View Slide

24. SUPPLEMENTARY VIEW
    REGISTERED BY OWNER OF
    UICollectinView
    

    View Slide

25. DECORATION VIEW
    REGISTERED BY
    UICollcetionViewLayout
    

    View Slide

26. UICOLLECTIONVIEWLAYOUT
    PASSED IN BY OWNER OF COLLECTION VIEW
    IN INIT METHOD
    

    View Slide

27. UICOLLECTIONVIEW
    

    View Slide

28. UICOLLECTIONVIEWLAYOUTAT
    TRIBUTES
    

    View Slide

29. BUILDING CUSTOM
    COLLECTION VIEW LAYOUT
    

    View Slide

30. HOW DOES UICOLLECTIONVIEW PREPARE ITS
    LAYOUT?
    - (void)prepareLayout;
    - (CGSize)collectionViewContentSize;
    - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;
    

    View Slide

31. PREPARE LAYOUT
    - (void)prepareLayout {
    [super prepareLayout];
    (...)
    }
    

    View Slide

32. CONTENT SIZE
    - (CGSize)collectionViewContentSize {
    CGSize myCustomSize = (...)
    return myCustomSize;
    }
    

    View Slide

33. LAYOUT ATTRIBUTES FOR ELEMENTS IN RECT
    - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    return [super layoutAttributesForElementsInRect:rect];
    }
    

    View Slide

34. View Slide

35. View Slide

36. You don't need to return only visible attributes
    

    View Slide

37. UICOLLECTIONVIEW CONSIDERS ITS LAYOUT
    UP AND READY AFTER THESE THREE
    METHODS ARE CALLED.
    

    View Slide

38. LAYOUT ATTRIBUTES FOR ELEMENT AT INDEX
    PATH
    - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)path {
    return [super layoutAttributesForItemAtIndexPath:indexPath];
    }
    

    View Slide

39. INVALIDATING
    LAYOUT
    WHEN?
    

    View Slide

40. INVALIDATE WHEN A VALUE THAT DRIVES LAYOUT CHANGES
    ▸ Bounds
    ▸ Content offset
    ▸ Data (data driven layouts)
    ▸ Layout-specific
    

    View Slide

41. INVALIDATING LAYOUT
    [layout invalidateLayout];
    

    View Slide

42. INVALIDATING LAYOUT
    - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
    return [super shouldInvalidateLayoutForBoundsChange:newBounds];
    }
    

    View Slide

43. CUSTOM INVALIDATION
    CONTEXT
    

    View Slide

44. QUESTIONS?
    

    View Slide

45. ASSIGNMENT 1
    CAROUSEL LAYOUT
    

    View Slide

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
    

    View Slide

47. EXAMPLE
    

    View Slide

48. View Slide

49. TIPS
    

    View Slide

50. USE TARGET CONTENT OFFSET WITH VELOCITY
    - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset
    withScrollingVelocity:(CGPoint)velocity;
    

    View Slide

51. AND TARGET CONTENT OFFSET
    - (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset;
    

    View Slide

52. View Slide

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
    

    View Slide

54. ASSIGNMENT 2
    CALENDAR LAYOUT
    LET'S TRY SOMETHING HARDER
    

    View Slide

55. GOALS
    ▸ Displays items of different sizes that represent events
    ▸ Displays a 'hand' view that shows current time
    ▸ Does not inherit from flow layout
    

    View Slide

56. EXAMPLE
    

    View Slide

57. View Slide

58. YOU WILL NEED SOME
    ADDITIONAL DATA IN YOUR
    LAYOUT
    

    View Slide

59. TIME TO POSITION HAND VIEW
    

    View Slide

60. EVENTS FOR CALENDAR
    

    View Slide

61. START OF DISPLAYED DAY
    

    View Slide

62. END OF DISPLAYED DATE
    

    View Slide

63. GETTING DATA TO YOUR
    COLLECTION VIEW LAYOUT
    

    View Slide

64. THE EXTENSIBLE DELEGATE
    PATTERN
    

    View Slide

65. @protocol CalendarCollectionViewLayoutDelegate
    

    View Slide

66. HAND VIEW
    CONSIDER IT AS
    A DECORATION VIEW
    

    View Slide

67. REGISTERING A DECORATION VIEW
    [self registerClass:[HandView class]
    forDecorationViewOfKind:DecorationKindHand];
    

    View Slide

68. PROVIDING DECORATION
    LAYOUT ATTRIBUTES
    SAME AS WITH CELL LAYOUT ATTRIBUTES
    

    View Slide

69. - (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)kind
    atIndexPath:(NSIndexPath *)indexPath
    

    View Slide

70. [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:DecorationKindhand
    withIndexPath:indexPath];
    

    View Slide

71. DECORATION LAYOUT ATTRIBUTES HAVE TO
    BE ALSO RETURNED FROM
    layoutAttributesForRect
    

    View Slide

72. 1 MINUTE EQUALS 1 POINT
    

    View Slide

73. [self.startOfDisplayedDay mt_minutesUntilDate:self.endOfDisplayedDay];
    

    View Slide

74. View Slide

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
    

    View Slide

76. ASSIGNMENT 3
    CALENDAR LAYOUT
    SEPARATORS
    

    View Slide

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
    

    View Slide

78. EXAMPLE
    

    View Slide

79. View Slide

80. TIPS
    

    View Slide

81. USE CUSTOM LAYOUT ATTRIBUTES TO GET
    COLOR/TEXT TO SEPARATOR VIEW
    

    View Slide

82. SEPARATORS
    DECORATION VIEWS
    

    View Slide

83. EXAMPLE
    

    View Slide

84. View Slide

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
    

    View Slide

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
    

    View Slide

87. THANK YOU FOR YOUR
    ATTENTION!
    

    View Slide

88. PAWEL DUDEK
    @ELDUDI
    HTTPS://GITHUB.COM/PAWELDUDEK
    

    View Slide