Custom Collection View Layouts

Custom Collection View Layouts

Presentation given on UICollectionView workshop in Berlin

15633e65c96546d830fb84ee7fe5db9c?s=128

Pawel Dudek

April 11, 2015
Tweet

Transcript

  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]; }
  34. None
  35. None
  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

  48. None
  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;

  52. None
  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

  57. None
  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];

  74. None
  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

  79. None
  80. TIPS

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

  82. SEPARATORS DECORATION VIEWS

  83. EXAMPLE

  84. None
  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