Custom Collection View Layouts

Custom Collection View Layouts workshop. Kraków 28.11.2014

Transcript

1. CUSTOM
   UICOLLECTIONVIEW
   LAYOUTS
   

   View Slide

2. UICollectionViewFlowLayout
   

   View Slide

3. WHENEVER YOU CAN USE OR SUBCLASS FLOW LAYOUT
   Flow layout is a line breaking layout.
   Any variation that lays items in a line
   and breaks when it gets to an end can be covered with flow layout.
   

   View Slide

4. 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

5. FLOW LAYOUT IS HIGHLY OPTIMIZED AND
   VERSATILE TOOL
   

   View Slide

6. YOU SHOULD USE IT
   

   View Slide

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

   View Slide

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

   View Slide

9. WHAT ARE THE TYPES OF
   LAYOUTS?
   

   View Slide

10. LAYOUT DRIVEN
    

    View Slide

11. LAYOUT DRIVEN
    THINK FLOW LAYOUT
    

    View Slide

12. DATA DRIVEN
    

    View Slide

13. DATA DRIVEN
    THINK CALENDAR LAYOUT
    

    View Slide

14. UICOLLECTIONVIEWLAYOUT
    ATTRIBUTES
    

    View Slide

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

    View Slide

16. 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

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

    View Slide

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

    View Slide

19. YOU HAVE TO OVERRIDE
    isEqual & copy
    

    View Slide

20. COLLECTION VIEW
    UI ELEMENTS
    RECAP
    

    View Slide

21. CELLS
    REGISTERED BY OWNER OF
    UICollectinView
    CAN PASS ADDITIONAL DATA VIA ATTRIBUTES
    

    View Slide

22. SUPPLEMENTARY VIEW
    REGISTERED BY ONWER OF
    UICollectinView
    CAN PASS ADDITIONAL DATA VIA ATTRIBUTES
    

    View Slide

23. DECORATION VIEW
    REGISTERED BY
    UICollcetionViewLayout
    CAN PASS ADDITIONAL DATA VIA ATTRIBUTES
    

    View Slide

24. BUILDING CUSTOM
    COLLECTION VIEW LAYOUT
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. The rect parameter does not define whole bounds of collection view.
    

    View Slide

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

    View Slide

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

    View Slide

32. INVALIDATING
    LAYOUT
    WHEN?
    

    View Slide

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

    View Slide

34. INVALIDATING LAYOUT
    [layout invalidateLayout];
    

    View Slide

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

    View Slide

36. ASSIGNMENT 1
    CAROUSEL LAYOUT
    

    View Slide

37. 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 (optional)
    

    View Slide

38. EXAMPLE
    

    View Slide

39. View Slide

40. TIPS
    

    View Slide

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

    View Slide

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

    View Slide

43. View Slide

44. LET'S CODE!
    

    View Slide

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

    View Slide

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

    View Slide

47. EXAMPLE
    

    View Slide

48. View Slide

49. YOU WILL NEED SOME
    ADDITIONAL DATA IN YOUR
    LAYOUT
    

    View Slide

50. TIME TO POSITION BEAD VIEW
    

    View Slide

51. EVENTS FOR CALENDAR
    

    View Slide

52. START OF DISPLAYED DAY
    

    View Slide

53. END OF DISPLAYED DATE
    

    View Slide

54. GETTING DATA TO YOUR
    COLLECTION VIEW LAYOUT
    

    View Slide

55. THE EXTENSIBLE DELEGATE
    PATTERN
    

    View Slide

56. @protocol CalendarCollectionViewLayoutDelegate
    

    View Slide

57. BEAD VIEW
    CONSIDER IT AS
    A DECORATION VIEW
    

    View Slide

58. REGISTERING A DECORATION VIEW
    [self registerClass:[BeadView class]
    forDecorationViewOfKind:DecorationKindBead];
    

    View Slide

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

    View Slide

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

    View Slide

61. [UICollectionViewLayoutAttributes layoutAttributesForDecorationViewOfKind:DecorationKindBead
    withIndexPath:indexPath];
    

    View Slide

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

    View Slide

63. 1 MINUTE EQUALS 1 PIXEL
    

    View Slide

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

    View Slide

65. View Slide

66. LET'S CODE!
    REMEMBER 1 MINUTE EQUALS 1 PIXEL
    

    View Slide

67. ASSIGNMENT 3
    CALENDAR LAYOUT
    SEPARATORS
    

    View Slide

68. 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

69. EXAMPLE
    

    View Slide

70. View Slide

71. TIPS
    

    View Slide

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

    View Slide

73. SEPARATORS
    DECORATION VIEWS
    

    View Slide

74. LET'S CODE!
    

    View Slide

75. CONCLUSION
    ▸ Flow layout can be easily modified to developer needs
    ▸ Building custom layouts is not that hard
    ▸ Layout attributes can be a great way of providing additional data to
    collection view elements
    

    View Slide

76. THANK YOU FOR YOUR
    ATTENTION!
    

    View Slide

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

    View Slide