Parallactic Collection Views

Parallactic Collection Views

How to add depth into iOS user interfaces

UI Collection View

UICollectionViewDataSource

UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView

UICollectionViewLayout

UICollectionReusableViewUICollectionReusableViewUICollectionReusableView

UICollectionView

UICollectionViewDelegate

Truly Great Apps

What makes an app

truly great?

Fit in

Magical

AmazingFirst Impressions

Experience Matters

Let’s go back in time

AP

Horizontal Navigation

And now...

iOS 7 is Coming

Opportunity

Design for iOS 7

Depth

Navigation

Tools

We Need

UICollectionView

UICollectionView

iOS 7

How to add depth?

parallax

Examples

http://tinyurl.com/360Parallax

Not just cool...

How Parallax Works

Relative Motion

You can do this with UICollection View

Why Collection View?

In this session you will:

Master Adding Parallax to Your Layouts

Let’s Dive In

What are we building?

The Background

Background View1

UI Collection View

UICollectionViewDataSource

UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView

UICollectionViewLayout

UICollectionReusableViewUICollectionReusableViewUICollectionReusableView

UICollectionView

UICollectionViewDelegate

Calculating Layout Metrics

Elements in Rect

- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

Title1

Title2

Title3

Content Content

Content Content

Content

RectElements in Rect

1

2

3

Calculate

Test

Add

Layout Attributes

- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind

atIndexPath:(NSIndexPath *)indexPath

Anchor Background2

UICollectionView

UIScrollView

UIView

UIResponder

NSObject

Class Hierarchy

Scroll View Mechanics

Scroll ViewMechanics

Scroll View Contents

BOUNDS

Scroll ViewMechanics

Scroll View Contents

BOUNDS

Anchor

AnchoringSubviews

Scroll View Contents

Subview

BOUNDS

AnchoringSubviews

Scroll View Contents

Subview

BOUNDS

Need New Layout Metrics on Scroll

Invalidate Layout

- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {

InvalidateLayout

Scroll View Contents

Subview

BOUNDS

-invalidateLayout-invalidateLayout-invalidateLayout-invalidateLayout-invalidateLayout

New Metrics On Invalidation

Layout Attributes

- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind

atIndexPath:(NSIndexPath *)indexPath

Parallax3

It’s about to get complicated

Layout Attributes

- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind

atIndexPath:(NSIndexPath *)indexPath

Parallactic Offset

Percentage Based

Content Offset

Scroll View Contents

BOUNDS

0%

100%

50%

Content Offset

Scroll View Contents

BOUNDS

0%

100%

50%

Content Offset

Scroll View Contents

BOUNDS

100%Bounds Height

Content Offset

Scroll View Contents

BOUNDS

100%

Content Size Height

Content Offset

Scroll View Contents

BOUNDS

100%

Distance to Travel

Percentage

CGFloat percentageComplete = self.collectionView.contentOffset.y / (self.collectionView.contentSize.height - self.collectionView.bounds.size.height);

Calculating Parallactic Offset

DefineOffset

Parallaxing BackgroundBOUNDS

Offset

0%

DefineOffset

Parallaxing Background

BOUNDS

Offset

50%

DefineOffset

Parallaxing Background

BOUNDS

Offset

100%

Offset

CGFloat parallaxShift = 6.0;

CGFloat offset = ([self scrollPercentageComplete] * (2 * parallaxShift)) - parallaxShift;

1

2

3

Inspect Collection View Content Offset

Calculate Current Percentage

Calculate Current Parallactic Offset

4 Apply the Parallax Frame

Build It

We’veGot

Parallax

The Cells

Similar

Build It

YOUNow

can Parallax

One more thing...

Parallactic rainForest

Inspiration

www.spotify.com/us/

Demo

ARCHITECTURE

Parallaxing Cell

Banner

Parallaxing Cell

Banner

Components

Anchor

Cell

Scroll View Contents

Cell 2Cell

Banner

Banner

Banner

Banner

Scroll View Contents

Banner

CellCell 2CellBanner

Banner

Banner

Scroll View Contents

Banner

CellCell 2Cell

Banner

Banner

Banner

Scroll View Contents

Banner

CellCell 2Cell

Banner

Banner

Banner

Scroll View Contents

Banner

CellCell 2Cell

Banner

Banner

Banner

Crop

Scroll View Contents

Cell

Banner

Banner

Banner

Banner

Scroll View Contents

Cell

Banner

Banner

Banner

Banner

Scroll View Contents

Cell 2Cell

Banner

Banner

Banner

Banner

Cell 2

Scroll View Contents

Cell

Banner

Banner

Banner

Banner

Scroll View Contents

Cell 2

Cell

Banner

Banner

Banner

Banner

Scroll View Contents

Cell 2

Banner

Banner

Banner

Banner

Scroll View Contents

Cell 3Cell 2

Banner

Banner

Banner

Banner

Scroll View Contents

Cell 3

Cell 2

Banner

Banner

Banner

Banner

Scroll View Contents

Cell 3

Cell 2

Banner

Banner

Banner

Banner

Scroll View Contents

Cell 3

Banner

Banner

Banner

Banner

Parallax

DefineOffset

Scroll View Contents

Banner

Banner

Parallaxing Cell

Banner

Banner

BOUNDS

DefineOffset

Parallaxing Cell

BOUNDS

DefineOffset

Parallaxing Cell

BOUNDS

Offset

0%

DefineOffset

Parallaxing Cell

BOUNDS

Offset

50%

DefineOffset

Parallaxing CellBOUNDS

Offset

100%

So that’s parallax

Why do this?

Fit In

Get Featured by Apple

And...

delight your users

Resources

/RCacheaux/Parallax

René CacheauxiOS [email protected]

[email protected]@RCachATX