UICollectionView Basics and Flow Layout

Slide 1

Slide 1 text

UICollectionView #UICollectionViewKrakow

Slide 2

Slide 2 text

@maciejoczko #UICollectionViewKrakow

Slide 3

Slide 3 text

Introduction #UICollectionViewKrakow

Slide 4

Slide 4 text

UI != NS #UICollectionViewKrakow

Slide 5

Slide 5 text

#UICollectionViewKrakow

Slide 6

Slide 6 text

“UICollectionView is the new UITableView. It's that important. NSHipster #UICollectionViewKrakow

Slide 7

Slide 7 text

“UICollectionView is awesome! My Friend #UICollectionViewKrakow

Slide 8

Slide 8 text

“The UICollectionView class manages an ordered collection of data items and presents them using customizable layouts. Apple #UICollectionViewKrakow

Slide 9

Slide 9 text

UICollectionView allows » to have totally custom layout » to dynamically change layouts » to have interactive transitions between layouts #UICollectionViewKrakow

Slide 10

Slide 10 text

UICollectionView is » subclass of UIScrollView » sibling of UITableView #UICollectionViewKrakow

Slide 11

Slide 11 text

UICollectionView Alloc Init » initWithFrame:collectionViewLayout: » UICollectionViewController #UICollectionViewKrakow

Slide 12

Slide 12 text

UICollectionView is mostly about... #UICollectionViewKrakow

Slide 13

Slide 13 text

Grids #UICollectionViewKrakow

Slide 14

Slide 14 text

#UICollectionViewKrakow

Slide 15

Slide 15 text

#UICollectionViewKrakow

Slide 16

Slide 16 text

#UICollectionViewKrakow

Slide 17

Slide 17 text

#UICollectionViewKrakow

Slide 18

Slide 18 text

#UICollectionViewKrakow

Slide 19

Slide 19 text

#UICollectionViewKrakow

Slide 20

Slide 20 text

Anatomy of Collection View #UICollectionViewKrakow

Slide 21

Slide 21 text

Cell Supplementary View Decoration View #UICollectionViewKrakow

Slide 22

Slide 22 text

Cell For Item » Tied to content » No predeﬁned style » New way of creation » UICollectionReusableView subclass #UICollectionViewKrakow

Slide 23

Slide 23 text

Supplementary View » Tied to content but separate from cells » Driven by section data » View of a kind » UICollectionReusableView subclass #UICollectionViewKrakow

Slide 24

Slide 24 text

Decoration View » Not tied to content » Created in layout subclass » UICollectionReusableView subclass #UICollectionViewKrakow

Slide 25

Slide 25 text

Layout #UICollectionViewKrakow

Slide 26

Slide 26 text

Layout: Position #UICollectionViewKrakow

Slide 27

Slide 27 text

Layout: animations & transitions #UICollectionViewKrakow

Slide 28

Slide 28 text

How to create custom layout? #UICollectionViewKrakow

Slide 29

Slide 29 text

Derive from UICollectionViewLayout #UICollectionViewKrakow

Slide 30

Slide 30 text

Override methods collectionViewContentSize layoutAttributesForElementsInRect: layoutAttributesForItemAtIndexPath: layoutAttributesForSupplementaryViewOfKind:atIndexPath: layoutAttributesForDecorationViewOfKind:atIndexPath: shouldInvalidateLayoutForBoundsChange: #UICollectionViewKrakow

Slide 31

Slide 31 text

Override even more... prepareForCollectionViewUpdates: initialLayoutAttributesForAppearingItemAtIndexPath: initialLayoutAttributesForAppearingSupplementaryElementOfKind:atIndexPath: initialLayoutAttributesForAppearingDecorationElementOfKind:atIndexPath: finalLayoutAttributesForDisappearingItemAtIndexPath: finalLayoutAttributesForDisappearingSupplementaryElementOfKind:atIndexPath: finalLayoutAttributesForDisappearingDecorationElementOfKind:atIndexPath: finalizeCollectionViewUpdates #UICollectionViewKrakow

Slide 32

Slide 32 text

Attributes1 Object that manages the layout-related attributes for a given item. 1 UICollectionViewLayoutAttributes #UICollectionViewKrakow

Slide 33

Slide 33 text

Attributes1 » frame, center, size » alpha, hidden » zIndex » transform 3D 1 UICollectionViewLayoutAttributes #UICollectionViewKrakow

Slide 34

Slide 34 text

Layout: Recap » positioning » animations & transitions » subclassing » UICollectionViewLayoutAttributes #UICollectionViewKrakow

Slide 35

Slide 35 text

Data Source Delegate #UICollectionViewKrakow

Slide 36

Slide 36 text

Delegate » Selection & highlight tracking callbacks » Tracking the removal of views » Layout transition callback » Menu actions callbacks #UICollectionViewKrakow

Slide 37

Slide 37 text

Data Source - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath - (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath #UICollectionViewKrakow

Slide 38

Slide 38 text

Data Source - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath #UICollectionViewKrakow

Slide 39

Slide 39 text

collectionView:cellForItemAtIndexPath: MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentiﬁer:@”MY_CELL_ID”]; if (!cell) { cell = . . . } // Conﬁgure the cell's content return cell; #UICollectionViewKrakow

Slide 40

Slide 40 text

collectionView:cellForItemAtIndexPath: MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentiﬁer:@”MY_CELL_ID” forIndexPath:indexPath]; // Conﬁgure the cell's content return cell; #UICollectionViewKrakow

Slide 41

Slide 41 text

View class registration [collectionView registerClass:[MyCell class] forCellWithReuseIdentiﬁer:@“MY_CELL_ID”] [collectionView registerClass:[MySupView class] forSupplementaryViewOfKind:@“MY_KIND” withReuseIdentiﬁer:@“MY_CELL_ID”] [collectionView registerClass:[MyDecoView class] forDecorationViewOfKind:@“MY_KIND”] #UICollectionViewKrakow

Slide 42

Slide 42 text

Flow Layout #UICollectionViewKrakow

Slide 43

Slide 43 text

Flow Layout3 » Line oriented » Grid or group of lines » Predeﬁned supplementary views: header & footer 3 UICollectionViewFlowLayout #UICollectionViewKrakow

Slide 44

Slide 44 text

Flow Layout: Customization » itemsize » inter item spacing » line spacing » scroll direction2 » reference sizes » section insets 2 Can't be set through UICollectionViewDelegateFlowLayout delegate. #UICollectionViewKrakow

Slide 45

Slide 45 text

Flow Layout #UICollectionViewKrakow

Slide 46

Slide 46 text

RECAP UICollectionView Anatomy Layout & Attributes Data Source & Delegate Flow Layout #UICollectionViewKrakow

Slide 47

Slide 47 text

https://github.com/mobile-academy/ ios-uicollectionview-seed #UICollectionViewKrakow

Slide 48

Slide 48 text

Task Create simple CollectionViewController with ﬂow layout and inject it to RootViewController as its content. // AppDelegate.m CollectionViewDataSource *dataSource = [CollectionViewDataSource new]; CollectionViewController *cVC = [[CollectionViewController alloc] initWithDataSource:dataSource]; RootViewController *rootVC = [[RootViewController alloc] initWithContentController:cVC]; self.window.rootViewController = [[UINavigationController alloc] initWithRootViewController:rootVC]; #UICollectionViewKrakow