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

Custom Collection View Layouts

Custom Collection View Layouts

Custom Collection View Layouts workshop. Kraków 28.11.2014

Pawel Dudek

November 28, 2014
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
    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