Tweet
Tweet

Slide 1

Slide 1 text

Living the Grid with UICollectionView Off UICollectionView 360iDev September 2013 Denver, CO Jay Thrash @jaythrash jaythrash.com Wednesday, September 11, 13

Slide 2

Slide 2 text

Agenda •Origin •Organization •Implementation •Customization Wednesday, September 11, 13

Slide 3

Slide 3 text

Origin Wednesday, September 11, 13

Slide 4

Slide 4 text

Origin •Introduced in iOS 6 •New & Improved UITableView •Makes Grid Layouts Very Easy •Implement adaptive layouts Wednesday, September 11, 13

Slide 5

Slide 5 text

Organization Wednesday, September 11, 13

Slide 6

Slide 6 text

Organization Familiar “3D’s” UITableView Patterns • Data Source • Delegate • Dequeing Improves & Extends • New Content View types • Decoupling of layout Wednesday, September 11, 13

Slide 7

Slide 7 text

The 3D’s - Data Source UICollectionView Wednesday, September 11, 13

Slide 8

Slide 8 text

The 3D’s - Data Source UICollectionViewDataSource Wednesday, September 11, 13

Slide 9

Slide 9 text

The 3D’s - Data Source numberOfSectionsInCollectionView: Wednesday, September 11, 13

Slide 10

Slide 10 text

The 3D’s - Data Source collectionView:numberOfItemsInSection: Wednesday, September 11, 13

Slide 11

Slide 11 text

The 3D’s - Data Source Wednesday, September 11, 13

Slide 12

Slide 12 text

The 3D’s - Delegate UICollectionViewDelegate Wednesday, September 11, 13

Slide 13

Slide 13 text

The 3D’s - Delegate collectionView:shouldHighlightItemAtIndexPath: collectionView:didHighlightItemAtIndexPath: Wednesday, September 11, 13

Slide 14

Slide 14 text

The 3D’s - Delegate collectionView:shouldSelectItemAtIndexPath: collectionView:didSelectItemAtIndexPath: Wednesday, September 11, 13

Slide 15

Slide 15 text

The 3D’s - Delegate collectionView:shouldSelectItemAtIndexPath: collectionView:didSelectItemAtIndexPath: Wednesday, September 11, 13

Slide 16

Slide 16 text

The 3D’s - Dequeing •Follows same cell reuse patterns as UITableView •Register class for reuse identifier [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@”My_Cell_Id”]; New Wednesday, September 11, 13

Slide 17

Slide 17 text

3D’s - Dequeing [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@”My_Cell_Id”]; - (UICollectionView*)collectionView:(UICollectionView*)cv cellForItemAtIndexPath:(NSIndexPath*)indexPath { MyCell *cell = [cv dequeReusableCellWithReuseIdentifier@”My_Cell_Id”]; if (!cell) { .... } // configure cell content cell.actorNameLabel.text = @”Sean Connery”; return cell; } Wednesday, September 11, 13

Slide 18

Slide 18 text

3D’s - Dequeing [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@”My_Cell_Id”]; - (UICollectionView*)collectionView:(UICollectionView*)cv cellForItemAtIndexPath:(NSIndexPath*)indexPath { MyCell *cell = [cv dequeReusableCellWithReuseIdentifier@”My_Cell_Id”]; if (!cell) { .... } // configure cell content cell.actorNameLabel.text = @”Sean Connery”; return cell; } if (!cell) { .... } Wednesday, September 11, 13

Slide 19

Slide 19 text

Content View Types Set A Set B •Cells •Supplimentary Views •Decoration Views Wednesday, September 11, 13

Slide 20

Slide 20 text

Content View Types Set A Set B •Cells •Supplimentary Views •Decoration Views Wednesday, September 11, 13

Slide 21

Slide 21 text

Content View Types Set A Set B •Cells •Supplimentary Views •Decoration Views Wednesday, September 11, 13

Slide 22

Slide 22 text

Cell Anatomy view Wednesday, September 11, 13

Slide 23

Slide 23 text

Cell Anatomy view backgroundView Wednesday, September 11, 13

Slide 24

Slide 24 text

Cell Anatomy view selectedBackgroundView Wednesday, September 11, 13

Slide 25

Slide 25 text

Cell Anatomy view selectedBackgroundView contentView Wednesday, September 11, 13

Slide 26

Slide 26 text

Cell Anatomy view Casino Royale Daniel Craig, Eva Green, Mads Mikkelsen, Giancarlo Giannini Nov 17, 2006 Wednesday, September 11, 13

Slide 27

Slide 27 text

Get In the Flow UICollectionViewLayout Wednesday, September 11, 13

Slide 28

Slide 28 text

UICollectionView Wednesday, September 11, 13

Slide 29

Slide 29 text

UICollectionView UICollectionViewDataSource Wednesday, September 11, 13

Slide 30

Slide 30 text

UICollectionView UICollectionViewLayout UICollectionViewDataSource Wednesday, September 11, 13

Slide 31

Slide 31 text

UICollectionView UICollectionViewLayout UICollectionViewDataSource layoutAttributesForItemAtIndexPath: layoutAttributesForElementsInRect: Wednesday, September 11, 13

Slide 32

Slide 32 text

UICollectionView UICollectionViewLayout UICollectionViewDataSource layoutAttributesForItemAtIndexPath: layoutAttributesForElementsInRect: Wednesday, September 11, 13

Slide 33

Slide 33 text

UICollectionViewLayoutAttributes center/size frame Wednesday, September 11, 13

Slide 34

Slide 34 text

UICollectionViewLayoutAttributes transform Wednesday, September 11, 13

Slide 35

Slide 35 text

UICollectionViewLayoutAttributes alpha Wednesday, September 11, 13

Slide 36

Slide 36 text

UICollectionViewLayoutAttributes zIndex Wednesday, September 11, 13

Slide 37

Slide 37 text

UICollectionViewLayoutAttributes zIndex .... or make your own! Wednesday, September 11, 13

Slide 38

Slide 38 text

Implementation Wednesday, September 11, 13

Slide 39

Slide 39 text

Wednesday, September 11, 13

Slide 40

Slide 40 text

Wednesday, September 11, 13

Slide 41

Slide 41 text

Wednesday, September 11, 13

Slide 42

Slide 42 text

UICollectionViewFlowLayout Cell Views • Cell Size • Line Spacing • Inter-item Spacing • Register Class Wednesday, September 11, 13

Slide 43

Slide 43 text

UICollectionViewFlowLayout Cell Views • Cell Size • Line Spacing • Inter-item Spacing • Register Class Supplimentary Views • Header Size • Register Class Wednesday, September 11, 13

Slide 44

Slide 44 text

UICollectionViewFlowLayout Cell Views • Cell Size • Line Spacing • Inter-item Spacing • Register Class Supplimentary Views • Header Size • Register Class Decoration Views • Register Class Wednesday, September 11, 13

Slide 45

Slide 45 text

Demo Wednesday, September 11, 13

Slide 46

Slide 46 text

Customization Wednesday, September 11, 13

Slide 47

Slide 47 text

Wednesday, September 11, 13

Slide 48

Slide 48 text

Wednesday, September 11, 13

Slide 49

Slide 49 text

Wednesday, September 11, 13

Slide 50

Slide 50 text

Wednesday, September 11, 13

Slide 51

Slide 51 text

Passbook Layout Cell } Wednesday, September 11, 13

Slide 52

Slide 52 text

Passbook Layout }Stack ‘em Wednesday, September 11, 13

Slide 53

Slide 53 text

Cell Selection Selected Cell Remaining Cells Wednesday, September 11, 13

Slide 54

Slide 54 text

Demo Wednesday, September 11, 13

Slide 55

Slide 55 text

Resources Wednesday, September 11, 13

Slide 56

Slide 56 text

Where to go next? Wednesday, September 11, 13

Slide 57

Slide 57 text

Where to go next? Parallactic Collection Views Rene Cacheaux https://github.com/ RCacheaux/Parallax Introduction to Collection Views Mark Pospesel https://github.com/ mpospese/ IntroducingCollectionViews Wednesday, September 11, 13

Slide 58

Slide 58 text

Mothership • Introducing Collection Views • Advanced Collection Views and Building Custom Layouts • Custom Transitions Using View Controllers Wednesday, September 11, 13

Slide 59

Slide 59 text

Ultimate Source Ash Furrow http://ashfurrow.com Wednesday, September 11, 13

Slide 60

Slide 60 text

Don’t Forget... A+++!!! Would watch again! Wednesday, September 11, 13

Slide 61

Slide 61 text

Don’t Forget... No Cover Flow demo. Lame. Wednesday, September 11, 13

Slide 62

Slide 62 text

360iDev September 2013 Denver, CO Jay Thrash @jaythrash jaythrash.com Thanks! Wednesday, September 11, 13