Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Custom Collection View Layouts

Custom Collection View Layouts

Presentation given on UICollectionView workshop in Berlin

Pawel Dudek

April 11, 2015
Tweet

More Decks by Pawel Dudek

Other Decks in Programming

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