ios combining touch and animation

TOUCH

&ANIMATION

1Saturday, April 6, 13

René CacheauxSenior iOS Engineer

[email protected]


Touch can control anything


Rich experiences4Saturday, April 6, 13

Enhances lives


MAkes apps exciting


Shoulders of giants


The Plan for today is...


Where to begin?


Recognizers & Metrics


1

3

2globalMetrics

Location of Touch in View:

Number of Touches

Location in View:


1

2Pan

Velocity in View:

Translation in View:


1

2Pinch

Velocity

Scale


Long press


What to Control


Core Animation


Core animation Programming Guide

WWDC Videos

Headers


Core Graphics


Quartz 2D Programming Guide

WWDC Videos

Headers


Core Image


Core Image Programming Guide

WWDC Videos

Headers


real examples


Pull


Drag n Drop


Pinch


Parallactic Sugar


1 Para-what?

2 Parall.ing Rainforest

3 Show Me the Money


1 Para-what?


3 Show Me the Money


Parallaxing rainForest


1 Para-what?


3 Show Me the Money


Parallaxing rainForest

Architecture


Parallaxing Cell

Banner

Parallaxing Cell

Banner

Components


rainforest

PXCollectionViewCell UICollectionReusableView

PXCollectionViewLayout

UICollectionReusableViewUICollectionReusableViewPXBannerView

UICollectionViewUIView

PXCollectionViewCellPXCollectionViewCellPXCollectionViewCell

PXColletionViewController


But 1rst...35Saturday, April 6, 13

UI Collection ViewBasics


UI Collection View

UICollectionViewDataSource

UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView

UICollectionViewLayout

UICollectionReusableViewUICollectionReusableViewUICollectionReusableView

UICollectionView

UICollectionViewDelegate


UI Collection View





UICollectionView


1 23


Collection View





UICollectionView


1


UICollectionView

UIScrollView

UIView

UIResponder

NSObject

class hierarchy


Title1

Title2

Title3

Content Content

Content Content

Content

A Collection

View


Title1

Title2

Title3

Content Content

Content Content

ContentSections


Title1

Title2

Title3

Content Content

Content Content

ContentCells


Title1

Title2

Title3

Content Content

Content Content

Content

Supplementary Views


Layout


UICollectionViewCell UICollectionReusableView

UICollectionViewLayoutUICollectionView


2


Custom layouts


Layout Attributes


@interface UICollectionViewLayoutAttributes : NSObject <NSCopying>

@property (nonatomic) CGRect frame;@property (nonatomic) CGPoint center;@property (nonatomic) CGSize size;@property (nonatomic) CATransform3D transform3D;@property (nonatomic) CGFloat alpha;@property (nonatomic) NSInteger zIndex;@property (nonatomic, getter=isHidden) BOOL hidden;@property (nonatomic, retain) NSIndexPath *indexPath;

@property (nonatomic, readonly) UICollectionElementCategory representedElementCategory;@property (nonatomic, readonly) NSString *representedElementKind;

+ (instancetype)layoutAttributesForCellWithIndexPath:(NSIndexPath *)indexPath;+ (instancetype)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind withIndexPath:(NSIndexPath *)indexPath;+ (instancetype)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind withIndexPath:(NSIndexPath*)indexPath;

@end

Layout Attributes


Delegate & Datasource


UICollectionViewCell UICollectionReusableView

UICollectionViewLayoutUICollectionView


3


UI Collection View





UICollectionView



Build It


Parallaxing Cell

Banner

Parallaxing Cell

Banner

Components

Parallax Visible Height


Parallaxing Cell

Banner

Parallaxing Cell

Banner

Components

One Cell per Section


rainforest

PXCollectionViewCell UICollectionReusableView


UICollectionReusableViewUICollectionReusableViewPXBannerView



PXColletionViewControllerCustom Layout


Px Collection view

layout


Layout Header


static NSString * const kPXBannerSupplementaryViewKind = @"PXBanner";

@protocol PXCollectionViewDelegate <UICollectionViewDelegate>@optional

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout heightForBannerInSection:(NSInteger)section;

@end

...

Px Layout header


...

@interface PXCollectionViewLayout : UICollectionViewLayout

@property(nonatomic, assign) CGFloat parallaxVisibleHeight;

@end

Px Layout header


1 Author Element View Class

Implement DataSource & Delegate

Write Layout Algorithm

2

3

A Pattern


Step 1Banners


Parallaxing Cell

Banner

Parallaxing Cell

Banner

Banners


author Banner view


rainforest

PXCollectionViewCell

PXCollectionViewLayoutUICollectionViewUIView


UICollectionReusableViewUICollectionReusableViewUICollectionReusableViewPXBannerView


Banner View Header


#import <UIKit/UIKit.h>

@interface PXBannerView : UICollectionReusableView

- (void)setImageToImageNamed:(NSString *)imageNamed;

@end

Banner view


Banner View Implementation


#import "PXBannerView.h"

@interface PXBannerView ()@property(nonatomic, strong) UIImageView *imageView;@end

@implementation PXBannerView...@end

Banner view


@implementation PXBannerView...- (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { self.clipsToBounds = YES; _imageView = [self newImageView]; [self addSubview:_imageView]; } return self;}

- (UIImageView *)newImageView { UIImageView *imageView = [[UIImageView alloc] init]; imageView.contentMode = UIViewContentModeScaleAspectFill; return imageView;}...@end

Banner view


@implementation PXBannerView...

- (void)setImageToImageNamed:(NSString *)imageNamed { UIImage *image = [UIImage imageNamed:imageNamed]; self.imageView.image = image;}

...@end

Banner view



- (void)layoutSubviews { [super layoutSubviews]; self.imageView.frame = CGRectMake(0.0f, 0.0f, self.bounds.size.width, self.bounds.size.height);}

...@end

Banner view



- (void)prepareForReuse { [super prepareForReuse]; self.imageView.image = nil;}

...@end

Banner view


implement the data source

& Delegate


rainforest

PXCollectionViewCell PXBannerView




Before Implementing the Data Source and Delegate...


We have to create the collection view.


view controller implementation


#import "PXCollectionViewController.h"

#import "PXCollectionViewLayout.h"#import "PXBannerView.h"

static NSString * const kPXParallaxCellReuseID = @"PXCellID";static NSString * const kPXBannerReuseID = @"PXBannerID";

@interface PXCollectionViewController ()<UICollectionViewDataSource, PXCollectionViewDelegate>@property(nonatomic, strong) UICollectionView *collectionView;@end

@implementation PXCollectionViewController...@end

VIEW CONTROLLER


@implementation PXCollectionViewController

- (void)loadView { ... }

- (void)viewDidLoad { ... }

- (void)loadCollectionView { ... }

- (void)viewWillLayoutSubviews { ... }

#pragma mark UICollectionView Datasource...#pragma mark PXCollectionView Delegate...@end

VIEW CONTROLLER


1

3

2Creation

Register Classes

Set Data Source & Delegate

Create Collection View


@implementation PXCollectionViewController...

- (void)loadCollectionView {

// Create the Collection View. PXCollectionViewLayout *layout = [[PXCollectionViewLayout alloc] init]; layout.parallaxVisibleHeight = 500.0f; self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];

...}

...@end

Create collection view


1

3

2Creation

Register Classes





- (void)loadCollectionView { ... // Set DataSource and Delegate. self.collectionView.dataSource = self; self.collectionView.delegate = self;

...}

...@end

DATASOURCE & DELEGATE


1

3

2Creation

Register Classes




@implementation PXCollectionViewController...- (void)loadCollectionView { ... // Register Collection Reusable View Classes. [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:kPXParallaxCellReuseID]; [self.collectionView registerClass:[PXBannerView class] forSupplementaryViewOfKind:kPXBannerSupplementaryViewKind withReuseIdentifier:kPXBannerReuseID];

// Install Collection View into View Hierarchy. [self.view addSubview:self.collectionView];}...@end

Register View classes


Now we can ...


Implement the data source and delegate.


1

2Data

SourceNumber of Items in Section:

Number of Sections



#pragma mark UICollectionView Datasource

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return 4;}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 1;}

...@end

Data source


1

2Data

SourceView for Supplementary Element of Kind:

Cell for Item at Ind3 Path:



#pragma mark UICollectionView Datasource...

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kPXParallaxCellReuseID forIndexPath:indexPath]; return cell;}

...@end

Data source



#pragma mark UICollectionView Datasource...

- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { PXBannerView *banner = [collectionView dequeueReusableSupplementaryViewOfKind:kPXBannerSupplementaryViewKind withReuseIdentifier:kPXBannerReuseID forIndexPath:indexPath];

[banner setImageToImageNamed:[NSString stringWithFormat:@"B%i.jpg", indexPath.section]]; return banner;}

@end

Data source


Delegate


Custom Layout Collection View Delegate


static NSString * const kPXBannerSupplementaryViewKind = @"PXBanner";

@protocol PXCollectionViewDelegate <UICollectionViewDelegate>@optional

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout heightForBannerInSection:(NSInteger)section;

@end

...

Px Layout header



#pragma mark PXCollectionView Delegate

- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout heightForBannerInSection:(NSInteger)section { if (section == 0) { return 900.0f; } return 500.0f;

}

@end

Delegate


No Banners on Screen Yet.


banner viewLayout


rainforest





Layout implementation


#import "PXCollectionViewLayout.h"

@interface PXCollectionViewLayout ()// Layout Metrics.@property(nonatomic, strong) NSMutableArray *parallaxCellsLayoutAttributes;@property(nonatomic, strong) NSMutableArray *bannersLayoutAttributes;

@property(nonatomic, assign) CGFloat contentHeight;

@end

@implementation PXCollectionViewLayout...@end

px Layout

Layout Attributes


@implementation PXCollectionViewLayout

- (void)prepareLayout { ... }

- (void)prepareLayoutForBannerViewInSection:(NSUInteger)section { ... }

- (CGSize)collectionViewContentSize { ... }

...

@end

px Layout


@implementation PXCollectionViewLayout...

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

- (UICollectionViewLayoutAttributes *) layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { ... }

- (UICollectionViewLayoutAttributes *) layoutAttributesForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { ... }

...@end

px Layout



- (void)clearOutLayoutCalculations { ... }

- (void)setParallaxVisibleHeight:(CGFloat)parallaxVisibleHeight { ... }

@end

px Layout



- (void)clearOutLayoutCalculations { self.bannersLayoutAttributes = [NSMutableArray array]; self.parallaxCellsLayoutAttributes = [NSMutableArray array]; self.parallaxingCellIndicies = [NSMutableArray array];}

- (void)setParallaxVisibleHeight:(CGFloat)parallaxVisibleHeight { _parallaxVisibleHeight = parallaxVisibleHeight; [self invalidateLayout];}

...@end

px Layout


Remember


@interface UICollectionViewLayoutAttributes : NSObject <NSCopying>

@property (nonatomic) CGRect frame;@property (nonatomic) CGPoint center;@property (nonatomic) CGSize size;@property (nonatomic) CATransform3D transform3D;@property (nonatomic) CGFloat alpha;@property (nonatomic) NSInteger zIndex;@property (nonatomic, getter=isHidden) BOOL hidden;@property (nonatomic, retain) NSIndexPath *indexPath;

@property (nonatomic, readonly) UICollectionElementCategory representedElementCategory;@property (nonatomic, readonly) NSString *representedElementKind;

+ (instancetype)layoutAttributesForCellWithIndexPath:(NSIndexPath *)indexPath;+ (instancetype)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind withIndexPath:(NSIndexPath *)indexPath;+ (instancetype)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind withIndexPath:(NSIndexPath*)indexPath;

@end

Layout Attributes


1

2Layoutcalcs

Content S4e

Prepare Layout


@implementation PXCollectionViewLayout...- (void)prepareLayout { [super prepareLayout]; // Clear out old layout. [self clearOutLayoutCalculations]; // Reset content height. self.contentHeight = 0.0f; // Get the number of sections from the datasource. NSUInteger numberOfSections = [self.collectionView.dataSource numberOfSectionsInCollectionView:self.collectionView]; // Calculate the layout for each banner. for (int i = 0; i < numberOfSections; i++) { [self prepareLayoutForBannerViewInSection:i]; }}...@end

Prepare layout



- (void)prepareLayoutForBannerViewInSection:(NSUInteger)section { id<PXCollectionViewDelegate> delegate = (id<PXCollectionViewDelegate>)self.collectionView.delegate; CGFloat contentWidth = self.collectionView.frame.size.width; CGFloat bannerHeight = [delegate collectionView:self.collectionView layout:self heightForBannerInSection:section];... }

...@end

Banner view layout

>109Saturday, April 6, 13

@implementation PXCollectionViewLayout...- (void)prepareLayoutForBannerViewInSection:(NSUInteger)section {...// Banner Layout attributes. UICollectionViewLayoutAttributes *bannerAttributes = [UICollectionViewLayoutAttributes layoutAttributesForSupplementaryViewOfKind:kPXBannerSupplementaryViewKind withIndexPath:[NSIndexPath indexPathForItem:0 inSection:section]]; bannerAttributes.frame = CGRectMake(0.0f, self.contentHeight, contentWidth, bannerHeight); bannerAttributes.zIndex = 1; self.bannersLayoutAttributes[section] = bannerAttributes; self.contentHeight += (bannerHeight + self.parallaxVisibleHeight);}

...@end

Banner view layout


1

2Layoutcalcs

Content S4e

Prepare Layout



- (CGSize)collectionViewContentSize { return CGSizeMake(self.collectionView.frame.size.width, self.contentHeight);}

...@end

Layout CONTENT SIZE


And now the core methods....


everything is already calculated by the time we

hit these methods


1

3

2LAYOUTATTRIBUTES

For:

Supplementary View of Kind: at Ind3 Path:

Item at Ind3 Path:

Elements in Rect:


Title1

Title2

Title3

Content Content

Content Content

Content

Rect

Elements in

Rect



- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { NSMutableArray *layoutAttributesInRect = [NSMutableArray array]; // Banners. for (UICollectionViewLayoutAttributes *layoutAttributes in self.bannersLayoutAttributes) { if (CGRectIntersectsRect(layoutAttributes.frame, rect)) { [layoutAttributesInRect addObject:layoutAttributes]; } } return [layoutAttributesInRect copy];}

...@end

Elements in rect


1

3

2LAYOUTATTRIBUTES

For:

Supplementary View of Kind: at Ind3 Path:

Item at Ind3 Path:

Elements in Rect:



- (UICollectionViewLayoutAttributes *) layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {

UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath]; return layoutAttributes;}

- (UICollectionViewLayoutAttributes *) layoutAttributesForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { UICollectionViewLayoutAttributes *layoutAttributes = self.bannersLayoutAttributes[indexPath.section]; return layoutAttributes;}...@end

at index path


Quick tour in Xcode


Step 2Parall.ing Cells


Parallaxing Cell

Banner

Parallaxing Cell

Banner

Components


authorCollection View Cell


rainforest



PXBannerView






PXCroppedImageContainerView

Content View


1

2Cell

Collection View Cell Subclass

Cropped Image Container View


CroppedImage

Container

Image View

Container View


CroppedImage

Container

Image View

Reference Frame


CroppedImage

Container

Image View

Container View


CroppedImage

Container

Image View

Container View

Reference Frame


container view header



@interface PXCroppedImageContainerView : UIView

@property(nonatomic, assign) CGRect referenceFrame;@property(nonatomic, strong, readonly) UIImageView *imageView;@property(nonatomic, assign) CGFloat imageViewScale;


@end

Image container View


container view implementation


@implementation PXCroppedImageContainerView...

- (void)layoutSubviews { [super layoutSubviews]; if (CGRectEqualToRect(self.referenceFrame, CGRectZero)) { return; } // Size. CGSize imageViewSize = [self sizeForImageViewForScale:self.imageViewScale]; self.imageView.frame = CGRectMake(0.0f, 0.0f, imageViewSize.width, imageViewSize.height); // Position. CGPoint imageViewCenter = [self centerPointForImageView]; self.imageView.center = imageViewCenter;}

...@end



@implementation PXCroppedImageContainerView...

- (CGSize)sizeForImageViewForScale:(CGFloat)scale { CGSize imageViewSize = [self multiplySizeOfRect:self.referenceFrame byFactor:(scale * 3.0f)]; if (imageViewSize.width < self.referenceFrame.size.width) { imageViewSize = self.referenceFrame.size; } return imageViewSize;}

- (CGPoint)centerPointForImageView { return [self centerPointOfRect:self.referenceFrame];}

...@end



1

2Cell

Collection View Cell Subclass

Cropped Image Container View


cell header



@class PXCroppedImageContainerView;

@interface PXCollectionViewCell : UICollectionViewCell

@property(nonatomic, strong, readonly) PXCroppedImageContainerView *imageContainerView;


@end

Collection View Cell


cell implementation


#import "PXCollectionViewCell.h"

#import "PXCroppedImageContainerView.h"

@interface PXCollectionViewCell ()@property(nonatomic, strong, readwrite) PXCroppedImageContainerView *imageContainerView;@end

@implementation PXCollectionViewCell...@end



@implementation PXCollectionViewCell...

- (id)initWithFrame:(CGRect)frame { self = [super initWithFrame:frame]; if (self) { _imageContainerView = [self newCroppedImageContainerView]; [self.contentView addSubview:_imageContainerView]; } return self;}

- (PXCroppedImageContainerView *)newCroppedImageContainerView { PXCroppedImageContainerView *containerView = [[PXCroppedImageContainerView alloc] init]; return containerView;}

...@end




- (void)setImageToImageNamed:(NSString *)imageNamed { [self.imageContainerView setImageToImageNamed:imageNamed];}

...@end




- (void)prepareForReuse { [super prepareForReuse]; self.imageContainerView.imageView.image = nil;}

...@end




#pragma mark Layout

- (void)layoutSubviews { [super layoutSubviews]; self.imageContainerView.frame = self.contentView.bounds;}

...@end



Don’t forget!


To register the cell class.



- (void)loadCollectionView {...

[self.collectionView registerClass:[PXCollectionViewCell class] forCellWithReuseIdentifier:kPXParallaxCellReuseID];

}

...@end

Register cell class


implement the data source

& Delegate


rainforest





@implementation PXCollectionViewController...- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { // Dequeue cell. PXCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kPXParallaxCellReuseID forIndexPath:indexPath]; // Configure cell. cell.backgroundColor = [UIColor lightGrayColor]; cell.imageContainerView.referenceFrame = CGRectMake(0.0f, 0.0f, self.collectionView.frame.size.width, self.collectionView.frame.size.height); [cell setImageToImageNamed: [NSString stringWithFormat:@"%i.jpg", indexPath.section]]; return cell;}...@end

Cell for index Path


Nothing will show yet because we...


Have to implement the layout algorithm.


Parallax Layout


rainforest





Parallaxing Cell

Banner

Parallaxing Cell

Banner

Components


Parallaxing Cell

Banner

Parallaxing Cell

Banner

Banners


Scroll View Contents

Cell

Banner

Banner

Banner

Banner



Cell 2Cell

Banner

Banner

Banner

Banner


Cell 2


Cell

Banner

Banner

Banner

Banner



Cell 2

Cell

Banner

Banner

Banner

Banner



Cell 2

Banner

Banner

Banner

Banner



Cell 3Cell 2

Banner

Banner

Banner

Banner



Cell 3

Cell 2

Banner

Banner

Banner

Banner



Cell 3

Banner

Banner

Banner

Banner


1rst we have to know how to...


Anchor scroll view subviews.


Scroll View Mechanics


scrollView

mechanics


BOUNDS


Anchoring Subviews


anchoringsubviews


Subview

BOUNDS


1

3

2cellLayoutsteps

Parall.

Crop

Anchor


Anchor collection view cells using custom layout...


Every time the bounds changes,

update the subview frame


So we need a hook!


Should Invalidate Layout for Bounds Change:


Returning YES will invalidate your layout


So, on bounds changes...


invalidatelayout


Subview

BOUNDS

-invalidateLayout-invalidateLayout-invalidateLayout-invalidateLayout-invalidateLayout


AND...


Invalidate layoutwill call

prepare layoutand

content s4e


What’s cool is...


Will pick up scroll view momentum animations


SO...


return YES



- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds { return YES;}..

@end

invalidate layout


@implementation PXCollectionViewLayout...- (void)prepareLayout { [super prepareLayout]; // Clear out old layout. [self clearOutLayoutCalculations]; // Reset content height. self.contentHeight = 0.0f; // Get the number of sections from the datasource. NSUInteger numberOfSections = [self.collectionView.dataSource numberOfSectionsInCollectionView:self.collectionView]; // Calculate the layout for each banner. for (int i = 0; i < numberOfSections; i++) { [self prepareLayoutForBannerViewInSection:i]; }}...@end

On invalidate layout


Now we can implement the anchoring layout.


@implementation PXCollectionViewLayout...- (void)prepareLayout { [super prepareLayout]; [self clearOutLayoutCalculations]; self.contentHeight = 0.0f; NSUInteger numberOfSections = [self.collectionView.dataSource numberOfSectionsInCollectionView:self.collectionView]; // Layout for Banners. for (int i = 0; i < numberOfSections; i++) { [self prepareLayoutForBannerViewInSection:i]; } // Layout for Cells. for (int i = 0; i < numberOfSections; i++) { [self prepareLayoutForParallaxCellInSection:i]; }} ...@end

Anchor

Calculate Each Cell’s Layout



- (void)prepareLayoutForParallaxCellInSection:(NSUInteger)section { UICollectionViewLayoutAttributes *parallaxCellAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForItem:0 inSection:section]];

[self configureLayoutAttributesForParallaxingCellInSection:section layoutAttributes:parallaxCellAttributes]; self.parallaxCellsLayoutAttributes[section] = parallaxCellAttributes;}

...@end

Anchor

Create Layout Attributes

CalculateStore



- (void)configureLayoutAttributesForParallaxingCellInSection:(NSUInteger)section layoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes { // Anchor. CGFloat bottomOfBounds = CGRectGetMaxY(self.collectionView.bounds); CGRect newImageFrame = CGRectMake(0.0f, (bottomOfBounds - self.collectionView.bounds.size.height), self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);

layoutAttributes.frame = newImageFrame; layoutAttributes.zIndex = -1 * section;}

...@end

Where the magic happens


Demo


Why there’s a problem


Cell


Cell 2Cell

Banner

Banner

Banner

Banner



Banner

CellCell 2CellBanner

Banner

Banner



Banner

CellCell 2Cell

Banner

Banner

Banner


Which Cell is Parallaxing?


DetermineParallaxing

Cells


Banner

Banner

Banner

Banner

BOUNDS


Parall.ing Window Must be On Screen


BUT6ere’s no frame.


So



Cells


Banner

Banner

Banner

Banner

BOUNDS



Cells


Banner

Banner

Banner

Banner

CELL

About toshow

BOUNDS



Cells


Banner

Banner

Banner

Banner

CELL

About todisappear

BOUNDS


#import "PXCollectionViewLayout.h"

@interface PXCollectionViewLayout ()// Layout Metrics.@property(nonatomic, strong) NSMutableArray *parallaxCellsLayoutAttributes;@property(nonatomic, strong) NSMutableArray *bannersLayoutAttributes;

@property(nonatomic, assign) CGFloat contentHeight;@property(nonatomic, strong) NSMutableArray *parallaxingCellIndicies;

@end

@implementation PXCollectionViewLayout...@end

px Layout

New Property


Now we can implement the logic.


1rst, we have to look at the top of the cell.



Cells


Banner

Banner

Banner

Banner

BOUNDS

CELL

About toshow


@implementation PXCollectionViewLayout...- (void)updateParallaxingCellIndicies { CGFloat bottomOfBounds = CGRectGetMaxY(self.collectionView.bounds); CGFloat topOfBounds = CGRectGetMinY(self.collectionView.bounds); NSMutableArray *parallaxingIndicies = [NSMutableArray array]; // Look for Cells that are Parallaxing or have Parallaxed. for (int i = 0; i < [self.bannersLayoutAttributes count]; i++) { UICollectionViewLayoutAttributes *bannerLayoutAttributes = self.bannersLayoutAttributes[i]; CGFloat bottomOfBanner = CGRectGetMaxY(bannerLayoutAttributes.frame); if (bottomOfBanner <= bottomOfBounds) { [parallaxingIndicies addObject:@(i)]; } }

...} ...@end

Parallaxing indicies

New Method


Second, we have to look at the bottom of the cell.



Cells


Banner

Banner

Banner

Banner

CELL

About todisappear

BOUNDS



- (void)updateParallaxingCellIndicies { ...

// Remove Cells which are not Parallaxing. for (int i = 0; i < [self.bannersLayoutAttributes count]; i++) { UICollectionViewLayoutAttributes *bannerLayoutAttributes = self.bannersLayoutAttributes[i]; CGFloat topOfBanner = CGRectGetMinY(bannerLayoutAttributes.frame); if (topOfBanner <= topOfBounds) { [parallaxingIndicies removeObject:@(i - 1)]; } }! self.parallaxingCellIndicies = parallaxingIndicies;}

...@end



Now we have an array of indices


A helper method.



- (BOOL)isParallaxingSection:(NSUInteger)section { if ([self.parallaxingCellIndicies containsObject:@(section)]) { return YES; } return NO;}

...@end



Last step to anchor,non parall.ing cells.



- (void)prepareLayoutForParallaxCellInSection:(NSUInteger)section { UICollectionViewLayoutAttributes *parallaxCellAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForItem:0 inSection:section]]; if ([self isParallaxingSection:section]) { [self configureLayoutAttributesForParallaxingCellInSection:section layoutAttributes:parallaxCellAttributes]; } else { parallaxCellAttributes.frame = CGRectZero; } self.parallaxCellsLayoutAttributes[section] = parallaxCellAttributes;}

...@end

Anchor Parallaxing Cells

Only Layout Cells on Screen

CalculateStore


We have anchored cells and only the ones that are parall.ing are laid out.


demo


Why there’s a problem



Cell 2Cell

Banner

Banner

Banner

Banner


Cell 2


Cell

Banner

Banner

Banner

Banner



Cell 2Cell

Banner

Banner

Banner

Banner



Cell 2

Banner

Banner

Banner

Banner



Cell 3Cell 2

Banner

Banner

Banner

Banner



Cell 3

Banner

Banner

Banner

Banner


1

3

2cellLayoutsteps

Parall.

Crop

Anchor


Z-Ind3 Matters!



- (void)configureLayoutAttributesForParallaxingCellInSection:(NSUInteger)section layoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes { // Anchor. CGFloat bottomOfBounds = CGRectGetMaxY(self.collectionView.bounds); CGRect newImageFrame = CGRectMake(0.0f, (bottomOfBounds - self.collectionView.bounds.size.height), self.collectionView.bounds.size.width, self.collectionView.bounds.size.height);


...@end

z-index

>1rst One on Top



Cell 2Cell

Banner

Banner

Banner

Banner


Cell 2


Cell

Banner

Banner

Banner

Banner



Cell 2

Cell

Banner

Banner

Banner

Banner



Cell 2

Banner

Banner

Banner

Banner



Cell 3Cell 2

Banner

Banner

Banner

Banner



Cell 3

Cell 2

Banner

Banner

Banner

Banner



Cell 3

Banner

Banner

Banner

Banner


What’s the logic?


Cell 2


Cell

Banner

Banner

Banner

Banner

Bottom of Banner

Bottom of Anchor


@implementation PXCollectionViewLayout...- (void)configureLayoutAttributesForParallaxingCellInSection:(NSUInteger)section layoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes { // Anchor. ... // Crop. // If there's a next banner. if (section < [self.bannersLayoutAttributes count] - 1) { UICollectionViewLayoutAttributes *nextCellsBannerLayoutAttributes = self.bannersLayoutAttributes[section + 1]; CGRect nextBannerFrame = nextCellsBannerLayoutAttributes.frame; // Crop if necessary. if (CGRectGetMaxY(newImageFrame) > CGRectGetMaxY(nextBannerFrame)) { CGFloat amountToCrop = CGRectGetMaxY(newImageFrame) - CGRectGetMaxY(nextBannerFrame); newImageFrame.size.height -= amountToCrop; } } ...}... @end

Crop

>

Test for Crop

Make Cell Shorter


demo


1

3

2cellLayoutsteps

Parall.

Crop

Anchor



Cell 2Cell

Banner

Banner

Banner

Banner


Cell 2


Cell

Banner

Banner

Banner

Banner



Cell 2

Cell

Banner

Banner

Banner

Banner



Cell 2

Banner

Banner

Banner

Banner



Cell 3Cell 2

Banner

Banner

Banner

Banner



Cell 3

Cell 2

Banner

Banner

Banner

Banner



Cell 3

Banner

Banner

Banner

Banner


1

3

2 Parallaxsteps

Apply Current Offset

Define Offset

Determine Percentage


determinePercentage


Banner

Banner

Banner

Banner

BOUNDS

0%


determinePercentage


Banner

Banner

Banner

Banner

BOUNDS

50%


determinePercentage


Banner

Banner

Banner

Banner

BOUNDS 100%


determinePercentage


Banner

Banner

Banner

Banner

Current Banner Frame Max Y

BOUNDS


determinePercentage


Banner

Banner

Banner

Banner

nextPossibleBannerYOrigin

BOUNDS


determinePercentage


Banner

Banner

Banner

Banner

+

BOUNDS


determinePercentage


Banner

Banner

Banner

Banner

+

BOUNDSBounds Height


determinePercentage


Banner

Banner

Banner

Banner

BOUNDS

Whole Height



- (void)configureLayoutAttributesForParallaxingCellInSection:(NSUInteger)section layoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes { ...

// Parallax. // Determine Percentage. UICollectionViewLayoutAttributes *thisCellsBannerLayoutAttributes = self.bannersLayoutAttributes[section]; CGRect currentBannerFrame = thisCellsBannerLayoutAttributes.frame; // Get the Whole Height. CGFloat nextPossibleBannerYOrigin = CGRectGetMaxY(currentBannerFrame) + self.parallaxVisibleHeight;

...}... @end

Percentage



- (void)configureLayoutAttributesForParallaxingCellInSection:(NSUInteger)section layoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes { ... // Parallax. // Determine Percentage. ...

CGFloat parallaxWholeHeight = (nextPossibleBannerYOrigin + self.collectionView.bounds.size.height); parallaxWholeHeight -= CGRectGetMaxY(currentBannerFrame); ...}... @end

Percentage

>

Entire Distance


StartingPoint


Banner

Banner

Banner

Banner

Current Banner Frame Max Y

BOUNDS




// Parallax. ... // Calculate Percentage. CGFloat percentParallax = (bottomOfBounds - CGRectGetMaxY(currentBannerFrame)) / parallaxWholeHeight;

...}... @end

Percentage

>

Percentage


1

3

2 Parallaxsteps


Define Offset



defineoffset


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%


Offset should be configurable.


Need a property to store track of offset.


@interface PXCollectionViewLayout : UICollectionViewLayout

@property(nonatomic, assign) CGFloat parallaxVisibleHeight;@property(nonatomic, assign) CGFloat parallaxOffset;

@end

Px Layout header



- (void)setParallaxOffset:(CGFloat)parallaxOffset { _parallaxOffset = parallaxOffset; [self invalidateLayout];}

...@end

Px Layout


Now we can determine the current offset.


0% + Offset


50% 0 Offset


100% - Offset


x2

Parallaxing CellBOUNDS

Offset




// Parallax. ...

// Determine Current Offset. CGFloat parallaxRange = self.parallaxOffset * 2; CGFloat parallaxCurrentOffset = self.parallaxOffset - (parallaxRange * percentParallax);

...}

...@end

offset


1

3

2 Parallaxsteps


Define Offset





// Parallax. ...

// Apply Parallax. newImageFrame.origin.y += parallaxCurrentOffset;


...@end

Apply current offset


We’veGot

Parallax


DEMO


YOUNow

can Parall.


remember


delight your users


Stand out, its crowded


More downloads


people will love your app


USE TOUCH!!


Resources


/RCacheaux/Parallax


René CacheauxSenior iOS [email protected]

[email protected]@RCachATX


mailto:[email protected]






TOUCH&ANIMATION


ios combining touch and animation

Technology

property nonatomic cgsize

parallaxing rainforest3

title content contentsaturday

parallaxing rainforestsaturday

core animationsaturday

core graphicssaturday

core imagesaturday

readonly nsstring