iOS Combining Touch and Animation

TOUCH
&
ANIMATION

Saturday, April 6, 13 1

René Cacheaux
Senior iOS Engineer
rene.cacheaux@mutualmobile.com


Touch can
control
anything


Rich experiences

Enhances lives


MAkes apps exciting


Shoulders of giants


The Plan for
today is...


Where to
begin?


Recognizers &
Metrics


1 Location in View:

global
Metrics 2 Number of Touches

3 Location of
Touch in View:


1 Translation in View:

Pan

2 Velocity in View:


1 Scale

Pinch

2 Velocity


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 Parallaxing 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


Banner

Parallaxing Cell

Components
Banner

Parallaxing Cell


rainforest
PXColletionViewController

UIView UICollectionView PXCollectionViewLayout

PXCollectionViewCell
PXCollectionViewCell UICollectionReusableView
UICollectionReusableView
PXBannerView


But First...

UI Collection View
Basics


UI Collection View

UICollectionViewDataSource

UICollectionView UICollectionViewLayout

UICollectionViewDelegate

UICollectionViewCell UICollectionReusableView


UI Collection View
3
1
UICollectionView
2
UICollectionViewLayout




Collection View

1




class hierarchy
NSObject

UIResponder

UIView

UIScrollView

UICollectionView


1 Title

Content Content

A 2 Title

Collection Content

View
3 Title

Content Content


1 Title

Content Content

2 Title

Sections Content

3 Title

Content Content


1 Title

Content Content

2 Title

Cells Content

3 Title

Content Content


1 Title

Content Content

Supplementary
2 Title

Views Content

3 Title

Content Content


Layout


UICollectionView
2
UICollectionViewLayout




Custom
layouts


Layout
Attributes


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


Delegate &
Datasource
3





UI Collection View






Build It


Banner

Parallax
Visible Height
Parallaxing Cell

Components
Banner

Parallaxing Cell


Banner

One Cell per Section
Parallaxing Cell

Components
Banner

Parallaxing Cell


rainforest
Custom Layout


PXBannerView


Px
Collection view
layout


Layout Header


Px 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


A Pattern
1 Author Element View Class

2 Implement DataSource & Delegate

3 Write Layout Algorithm


Step 1
Banners


Banner

Parallaxing Cell

Banners
Banner

Parallaxing Cell


author
Banner view


rainforest


PXBannerView


Banner View
Header


Banner view

#import <UIKit/UIKit.h>

@interface PXBannerView : UICollectionReusableView

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

@end


Banner View
Implementation


Banner view

#import "PXBannerView.h"

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

@implementation PXBannerView
...
@end


Banner view
...
- (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

...

- (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


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


VIEW CONTROLLER
#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

- (void)loadView { ... }

- (void)viewDidLoad { ... }

- (void)loadCollectionView { ... }

- (void)viewWillLayoutSubviews { ... }

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


1 Create Collection View

Creation 2 Set Data Source &
Delegate

3 Register Classes


Create collection view
...

- (void)loadCollectionView {

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

...
}

...
@end



Delegate

3 Register Classes


DATASOURCE & DELEGATE
...

...

// Set DataSource and Delegate.
self.collectionView.dataSource = self;
self.collectionView.delegate = self;

...
}

...
@end



Delegate

3 Register Classes


Register View classes
...
...

// 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


Now we can ...


Implement the data
source and delegate.


1 Number of Sections

Data
Source
2 Number of Items in
Section:


Data source


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

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

...
@end


1 Cell for Item at Index
Path:
Data
Source
2 View for Supplementary
Element of Kind:


Data source


...

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

...
@end


Data source

...

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

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

@end


Delegate


Custom Layout
Collection View Delegate


Px Layout header

static NSString * const kPXBannerSupplementaryViewKind = @"PXBanner";

@protocol PXCollectionViewDelegate <UICollectionViewDelegate>
@optional

heightForBannerInSection:(NSInteger)section;

@end

...


Delegate

#pragma mark PXCollectionView Delegate

heightForBannerInSection:(NSInteger)section {

if (section == 0) {
return 900.0f;
}
return 500.0f;

}

@end


No Banners on Screen Yet.


banner view
Layout


rainforest
Custom Layout




Layout
implementation


px Layout
#import "PXCollectionViewLayout.h" Layout Attributes
@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


- (void)prepareLayout { ... }

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

- (CGSize)collectionViewContentSize { ... }

...

@end


px Layout

...

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

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

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


Remember


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


1 Prepare Layout

Layout
calcs
2 Content Size


Prepare layout
...
- (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


Banner view 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
...
- (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

>

1 Prepare Layout

Layout
calcs
2 Content Size


Layout CONTENT SIZE

...

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

...
@end


And now the core methods....


everything is already
calculated by the time we
hit these methods


1 Elements in Rect:

2
LAYOUT
Item at Index Path:
ATTRIBUTES
For:

3 Supplementary View of
Kind: at Index Path:


1 Title

Content
Rect Content

Elements 2 Title

in Content

Rect
3 Title

Content Content


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


1 Elements in Rect:

2
LAYOUT
Item at Index Path:
ATTRIBUTES
For:

3 Supplementary View of
Kind: at Index Path:


at index path
...

layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {

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

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


Quick tour in Xcode


Step 2
Parallaxing Cells


Banner

Parallaxing Cell

Components
Banner

Parallaxing Cell


author
Collection View Cell


rainforest





Content View

PXCroppedImageContainerView


1 Cropped Image
Container View

Cell

2 Collection View Cell
Subclass


Cropped
Image
Container
Container View

Image View


Cropped
Image
Container
Reference Frame

Image View


Cropped
Image
Container
Container View

Image View


Container View Cropped
Image
Container
Reference Frame

Image View


container view
header


Image container View


@interface PXCroppedImageContainerView : UIView

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


@end


container view
implementation


@implementation PXCroppedImageContainerView
...

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 Cropped Image
Container View

Cell

2 Collection View Cell
Subclass


cell header




@class PXCroppedImageContainerView;

@interface PXCollectionViewCell : UICollectionViewCell

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


@end


cell
implementation



#import "PXCollectionViewCell.h"

#import "PXCroppedImageContainerView.h"

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

@implementation PXCollectionViewCell
...
@end


...

- (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

self.imageContainerView.frame = self.contentView.bounds;
}

...
@end


Don’t forget!


To register the cell class.


Register cell class

...

...

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

}

...
@end


implement the
data source
&
Delegate


rainforest




Cell for index Path
...
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
cellForItemAtIndexPath:(NSIndexPath *)indexPath {
// Dequeue cell.
PXCollectionViewCell *cell =
[collectionView dequeueReusableCellWithReuseIdentifier:kPXParallaxCellReuseID
// 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


Nothing will show yet
because we...


Have to implement the
layout algorithm.


Parallax
Layout


rainforest
Custom Layout




Banner

Parallaxing Cell

Components
Banner

Parallaxing Cell


Banner

Parallaxing Cell

Banners
Banner

Parallaxing Cell


Banner

Cell

Banner

Banner

Banner

Scroll View Contents


Banner

Cell
Cell 2

Banner

Banner

Banner



Banner

Cell
Banner Cell 2

Banner

Banner



Banner

Cell
Banner

Cell 2

Banner

Banner



Banner

Banner

Cell 2

Banner

Banner



Banner

Banner

Cell 2
Cell 3

Banner

Banner



Banner

Banner

Cell 2
Banner
Cell 3

Banner



Banner

Banner

Cell 2
Banner

Cell 3

Banner



Banner

Banner

Banner

Cell 3

Banner



First we have to know
how to...


Anchor scroll view subviews.


Scroll View
Mechanics


BOUNDS

scroll
View
mechanics



Anchoring
Subviews


Subview

BOUNDS

anchoring
subviews



1 Anchor

cell
Layout
steps
2 Crop

3 Parallax


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 -invalidateLayout
-invalidateLayout
-invalidateLayout
-invalidateLayout

BOUNDS

invalidate
layout



AND...


Invalidate layout
will call
prepare layout
and
content size

What’s cool is...


Will pick up scroll view
momentum animations


SO...


return YES


invalidate layout

...

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

@end


On invalidate layout
...
// Clear out old layout.

// Reset content height.

// Get the number of sections from the datasource.
[self.collectionView.dataSource numberOfSectionsInCollectionView:self.collectionView];

// Calculate the layout for each banner.
}
}
...
@end


Now we can implement
the anchoring layout.


Anchor
...
[self.collectionView.dataSource
numberOfSectionsInCollectionView:self.collectionView];

// Layout for Banners.
}

// Layout for Cells. Calculate Each Cell’s Layout
[self prepareLayoutForParallaxCellInSection:i];
}
} ...
@end


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

[self configureLayoutAttributesForParallaxingCellInSection:section
layoutAttributes:parallaxCellAttributes];

self.parallaxCellsLayoutAttributes[section] = parallaxCellAttributes;
}

...
Store Calculate
@end


Where the magic happens
...

- (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

>

Demo


Why there’s a problem


Banner

Cell 2
Cell
Cell

Banner

Banner

Banner



Banner

Banner Cell 2
Cell
Cell

Banner

Banner



Banner

Banner

Cell 2
Cell
Cell

Banner

Banner



Which Cell is
Parallaxing?


Banner

Banner
BOUNDS Determine
Parallaxing
Banner
Cells

Banner



Parallaxing Window Must
be On Screen


BUT
There’s no frame.


So


Banner

Banner
BOUNDS Determine
Parallaxing
Banner
Cells

Banner



Banner

BOUNDS
About to
Banner show
Determine
CELL
Parallaxing
Banner
Cells

Banner



Banner

Banner
Determine
BOUNDS

CELL
Parallaxing
Banner
About to Cells
disappear
Banner



px Layout
#import "PXCollectionViewLayout.h"
New Property
@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

...
@end


Now we can implement
the logic.


First, we have to look at the
top of the cell.


Banner

BOUNDS
About to
Banner show
Determine
CELL
Parallaxing
Banner
Cells

Banner



Parallaxing indicies
... New Method
- (void)updateParallaxingCellIndicies {
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


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


Banner

Banner
Determine
BOUNDS

CELL
Parallaxing
Banner
About to Cells
disappear
Banner



...

- (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 parallaxing cells.


Anchor Parallaxing
Cells
...
Only Layout Cells on Screen
- (void)prepareLayoutForParallaxCellInSection:(NSUInteger)section {
UICollectionViewLayoutAttributes *parallaxCellAttributes =
layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForItem:0
inSection:section]];
if ([self isParallaxingSection:section]) {
[self configureLayoutAttributesForParallaxingCellInSection:section
layoutAttributes:parallaxCellAttributes];
} else {
parallaxCellAttributes.frame = CGRectZero;
}

self.parallaxCellsLayoutAttributes[section] = parallaxCellAttributes; Calculate
}

...
Store
@end


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


demo


Why there’s a problem


Banner

Cell 2
Cell

Banner

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 3
2

Banner

Banner



Banner

Banner

Banner
Cell 3
2

Banner



Banner

Banner

Banner

Cell 3
2

Banner



Banner

Banner

Banner

Cell 3

Banner



1 Anchor

cell
Layout
steps
2 Crop

3 Parallax


Z-Index Matters!


z-index
...


// Anchor.
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 First One on Top

>

Banner

Cell
Cell 2

Banner

Banner

Banner



Banner

Cell
Banner Cell 2

Banner

Banner



Banner

Cell
Banner

Cell 2

Banner

Banner



Banner

Banner

Cell 2

Banner

Banner



Banner

Banner

Cell 2
Cell 3

Banner

Banner



Banner

Banner

Cell 2
Banner
Cell 3

Banner



Banner

Banner

Cell 2
Banner

Cell 3

Banner



Banner

Banner

Banner

Cell 3

Banner



What’s the logic?


Banner

Cell
Banner Cell 2
Bottom of Banner
Bottom of Anchor
Banner

Banner



Crop
...
// Anchor.
...
// Crop. Test for 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;
}
}

Make Cell Shorter
...
}... @end

>

demo


1 Anchor

cell
Layout
steps
2 Crop

3 Parallax


Banner

Cell
Cell 2

Banner

Banner

Banner



Banner

Cell
Banner Cell 2

Banner

Banner



Banner

Cell
Banner

Cell 2

Banner

Banner



Banner

Banner

Cell 2

Banner

Banner



Banner

Banner

Cell 2
Cell 3

Banner

Banner



Banner

Banner

Cell 2
Banner
Cell 3

Banner



Banner

Banner

Cell 2
Banner

Cell 3

Banner



Banner

Banner

Banner

Cell 3

Banner



1 Determine Percentage

2 Define Offset
Parallax
steps

3 Apply Current Offset


Banner

BOUNDS

Banner

determine
Percentage
0%
Banner

Banner



Banner

Banner

BOUNDS
determine
Percentage
50%
Banner

Banner



Banner

Banner

determine
Percentage
100%
Banner

BOUNDS

Banner



Banner

Current
BOUNDS

Banner Banner
Frame determine
Max Percentage
Banner
Y

Banner



Banner

BOUNDS

Banner

determine
next
Banner Possible Percentage
Banner
Y
Origin
Banner



Banner

BOUNDS

Banner

determine
Banner
+
Percentage

Banner



Banner

Banner

determine
Banner
+
Percentage
BOUNDS
Bounds
Height
Banner



Banner

Banner

determine
Banner Whole Percentage
BOUNDS
Height

Banner



Percentage
...

...

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

...
}... @end

>

Percentage
...

...
// Parallax.
// Determine Percentage.
...
Entire Distance
CGFloat parallaxWholeHeight =
(nextPossibleBannerYOrigin + self.collectionView.bounds.size.height);
parallaxWholeHeight -= CGRectGetMaxY(currentBannerFrame);

...
}
...
@end

>

Banner

Current
BOUNDS

Banner Banner
Frame Starting
Max Point
Banner
Y

Banner



Percentage

...

...

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

...
}... @end

>

1 Determine Percentage

2 Define Offset
Parallax
steps

3 Apply Current Offset


Banner

BOUNDS

Parallaxing Cell

Banner

define
Banner offset
Banner



BOUNDS

Parallaxing Cell

define
offset


BOUNDS

Parallaxing Cell

Offset define
offset

0%


BOUNDS

Parallaxing Cell

Offset define
offset

50%


BOUNDS
Parallaxing Cell

Offset
define
offset

100%


Oﬀset should be
conﬁgurable.


Need a property to store
track of oﬀset.


Px Layout header

@interface PXCollectionViewLayout : UICollectionViewLayout

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

@end


Px Layout

...

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

...
@end


Now we can determine the
current oﬀset.


0%
+ Oﬀset


50%
0 Oﬀset


100%
- Oﬀset


BOUNDS
Parallaxing Cell

Offset
x2


iOS Combining Touch and Animation

iOS Combining Touch and Animation

Recommended

Recommended

More Related Content

Similar to iOS Combining Touch and Animation

Similar to iOS Combining Touch and Animation (8)

Recently uploaded

Recently uploaded (20)

iOS Combining Touch and Animation