Custom Collection View Layouts

Transcript

1. CUSTOM
   COLLECTION VIEW
   LAYOUTS
   

   View Slide

2. WHO HAS EVER BUILT A
   CUSTOM LAYOUT?
   

   View Slide

3. THAT DOES NOT INHERIT
   FROM FLOW LAYOUT?
   

   View Slide

4. CUSTOM LAYOUT
   VS
   INHERITING FROM FLOW
   LAYOUT
   

   View Slide

5. WHENEVER YOU CAN USE 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

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

   View Slide

7. FLOW LAYOUT IS HIGHLY OPTIMIZED AND
   VERSATILE TOOL
   

   View Slide

8. YOU SHOULD USE IT
   

   View Slide

9. WHY WOULD I WANT TO BUILD
   A CUSTOM 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. YOU HAVE TO OVERRIDE
    isEqual & copy
    

    View Slide

21. BUILDING CUSTOM
    COLLECTION VIEW LAYOUT
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. INVALIDATING
    LAYOUT
    WHEN?
    

    View Slide

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

    View Slide

31. INVALIDATING LAYOUT
    [layout invalidateLayout];
    

    View Slide

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

    View Slide

33. ASSIGNMENT 1
    CAROUSEL LAYOUT
    

    View Slide

34. GOALS
    ▸ Behaves like paging in scroll view with horizontal scroling
    ▸ Item is always centered veritcally when scroll rests
    ▸ When iPad 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

35. EXAMPLE
    

    View Slide

36. View Slide

37. TIPS
    

    View Slide

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

    View Slide

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

    View Slide

40. View Slide

41. LET'S CODE!
    

    View Slide

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

    View Slide

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

44. EXAMPLE
    

    View Slide

45. View Slide

46. GETTING DATA TO YOUR
    COLLECTION VIEW LAYOUT
    

    View Slide

47. THE EXTENSIBLE DELEGATE
    PATTERN
    

    View Slide

48. @protocol CalendarCollectionViewLayoutDelegate
    

    View Slide

49. WHAT DATA WILL YOU NEED?
    

    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. BEAD VIEW
    CONSIDER IT AS
    A DECORATION VIEW
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

59. HAVE TO ALSO BE PASSED IN
    LAYOUT ATTRIBUTES FOR
    RECT
    

    View Slide

60. 1 MINUTE EQUALS 1 PIXEL
    

    View Slide

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

    View Slide

62. View Slide

63. LET'S CODE!
    

    View Slide

64. ASSIGNMENT 3
    CALENDAR LAYOUT
    SEPARATORS
    

    View Slide

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

66. EXAMPLE
    

    View Slide

67. View Slide

68. TIPS
    

    View Slide

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

    View Slide

70. SEPARATORS
    DECORATION VIEWS
    

    View Slide

71. LET'S CODE!
    

    View Slide

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

73. THANK YOU FOR YOUR
    ATTENTION!
    

    View Slide

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

    View Slide