iOS Combining Touch and Animation
-
Upload
rene-cacheaux -
Category
Technology
-
view
1.247 -
download
1
description
Transcript of iOS Combining Touch and Animation
TOUCH
&ANIMATION
1Saturday, April 6, 13
Touch can control anything
3Saturday, April 6, 13
Rich experiences4Saturday, April 6, 13
Enhances lives
5Saturday, April 6, 13
MAkes apps exciting
6Saturday, April 6, 13
Shoulders of giants
7Saturday, April 6, 13
The Plan for today is...
8Saturday, April 6, 13
Where to begin?
9Saturday, April 6, 13
Recognizers & Metrics
10Saturday, April 6, 13
1
3
2globalMetrics
Location of Touch in View:
Number of Touches
Location in View:
11Saturday, April 6, 13
1
2Pan
Velocity in View:
Translation in View:
12Saturday, April 6, 13
1
2Pinch
Velocity
Scale
13Saturday, April 6, 13
Long press
14Saturday, April 6, 13
What to Control
15Saturday, April 6, 13
Core Animation
16Saturday, April 6, 13
Core animation Programming Guide
WWDC Videos
Headers
17Saturday, April 6, 13
Core Graphics
18Saturday, April 6, 13
Quartz 2D Programming Guide
WWDC Videos
Headers
19Saturday, April 6, 13
Core Image
20Saturday, April 6, 13
Core Image Programming Guide
WWDC Videos
Headers
21Saturday, April 6, 13
real examples
22Saturday, April 6, 13
Pull
23Saturday, April 6, 13
Drag n Drop
24Saturday, April 6, 13
Pinch
25Saturday, April 6, 13
Parallactic Sugar
26Saturday, April 6, 13
1 Para-what?
2 Parall.ing Rainforest
3 Show Me the Money
27Saturday, April 6, 13
1 Para-what?
2 Parall.ing Rainforest
3 Show Me the Money
28Saturday, April 6, 13
1 Para-what?
2 Parall.ing Rainforest
3 Show Me the Money
29Saturday, April 6, 13
Parallaxing rainForest
30Saturday, April 6, 13
1 Para-what?
2 Parall.ing Rainforest
3 Show Me the Money
31Saturday, April 6, 13
Parallaxing rainForest
Architecture
32Saturday, April 6, 13
Parallaxing Cell
Banner
Parallaxing Cell
Banner
Components
33Saturday, April 6, 13
rainforest
PXCollectionViewCell UICollectionReusableView
PXCollectionViewLayout
UICollectionReusableViewUICollectionReusableViewPXBannerView
UICollectionViewUIView
PXCollectionViewCellPXCollectionViewCellPXCollectionViewCell
PXColletionViewController
34Saturday, April 6, 13
But 1rst...35Saturday, April 6, 13
UI Collection ViewBasics
36Saturday, April 6, 13
UI Collection View
UICollectionViewDataSource
UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView
UICollectionViewLayout
UICollectionReusableViewUICollectionReusableViewUICollectionReusableView
UICollectionView
UICollectionViewDelegate
37Saturday, April 6, 13
UI Collection View
UICollectionViewDataSource
UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView
UICollectionViewLayout
UICollectionReusableViewUICollectionReusableViewUICollectionReusableView
UICollectionView
UICollectionViewDelegate
1 23
38Saturday, April 6, 13
Collection View
UICollectionViewDataSource
UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView
UICollectionViewLayout
UICollectionReusableViewUICollectionReusableViewUICollectionReusableView
UICollectionView
UICollectionViewDelegate
1
39Saturday, April 6, 13
UICollectionView
UIScrollView
UIView
UIResponder
NSObject
class hierarchy
40Saturday, April 6, 13
Title1
Title2
Title3
Content Content
Content Content
Content
A Collection
View
41Saturday, April 6, 13
Title1
Title2
Title3
Content Content
Content Content
ContentSections
42Saturday, April 6, 13
Title1
Title2
Title3
Content Content
Content Content
ContentCells
43Saturday, April 6, 13
Title1
Title2
Title3
Content Content
Content Content
Content
Supplementary Views
44Saturday, April 6, 13
Layout
UICollectionViewDataSource
UICollectionViewCell UICollectionReusableView
UICollectionViewLayoutUICollectionView
UICollectionViewDelegate
2
45Saturday, April 6, 13
Custom layouts
46Saturday, April 6, 13
Layout Attributes
47Saturday, April 6, 13
@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
48Saturday, April 6, 13
Delegate & Datasource
UICollectionViewDataSource
UICollectionViewCell UICollectionReusableView
UICollectionViewLayoutUICollectionView
UICollectionViewDelegate
3
49Saturday, April 6, 13
UI Collection View
UICollectionViewDataSource
UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView
UICollectionViewLayout
UICollectionReusableViewUICollectionReusableViewUICollectionReusableView
UICollectionView
UICollectionViewDelegate
50Saturday, April 6, 13
Build It
51Saturday, April 6, 13
Parallaxing Cell
Banner
Parallaxing Cell
Banner
Components
Parallax Visible Height
52Saturday, April 6, 13
Parallaxing Cell
Banner
Parallaxing Cell
Banner
Components
One Cell per Section
53Saturday, April 6, 13
rainforest
PXCollectionViewCell UICollectionReusableView
PXCollectionViewLayout
UICollectionReusableViewUICollectionReusableViewPXBannerView
UICollectionViewUIView
PXCollectionViewCellPXCollectionViewCellPXCollectionViewCell
PXColletionViewControllerCustom Layout
54Saturday, April 6, 13
Px Collection view
layout
55Saturday, April 6, 13
Layout Header
56Saturday, April 6, 13
static NSString * const kPXBannerSupplementaryViewKind = @"PXBanner";
@protocol PXCollectionViewDelegate <UICollectionViewDelegate>@optional
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout heightForBannerInSection:(NSInteger)section;
@end
...
Px Layout header
57Saturday, April 6, 13
...
@interface PXCollectionViewLayout : UICollectionViewLayout
@property(nonatomic, assign) CGFloat parallaxVisibleHeight;
@end
Px Layout header
58Saturday, April 6, 13
1 Author Element View Class
Implement DataSource & Delegate
Write Layout Algorithm
2
3
A Pattern
59Saturday, April 6, 13
Step 1Banners
60Saturday, April 6, 13
Parallaxing Cell
Banner
Parallaxing Cell
Banner
Banners
61Saturday, April 6, 13
author Banner view
62Saturday, April 6, 13
rainforest
PXCollectionViewCell
PXCollectionViewLayoutUICollectionViewUIView
PXColletionViewController
UICollectionReusableViewUICollectionReusableViewUICollectionReusableViewPXBannerView
63Saturday, April 6, 13
Banner View Header
64Saturday, April 6, 13
#import <UIKit/UIKit.h>
@interface PXBannerView : UICollectionReusableView
- (void)setImageToImageNamed:(NSString *)imageNamed;
@end
Banner view
65Saturday, April 6, 13
Banner View Implementation
66Saturday, April 6, 13
#import "PXBannerView.h"
@interface PXBannerView ()@property(nonatomic, strong) UIImageView *imageView;@end
@implementation PXBannerView...@end
Banner view
67Saturday, April 6, 13
@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
68Saturday, April 6, 13
@implementation PXBannerView...
- (void)setImageToImageNamed:(NSString *)imageNamed { UIImage *image = [UIImage imageNamed:imageNamed]; self.imageView.image = image;}
...@end
Banner view
69Saturday, April 6, 13
@implementation PXBannerView...
- (void)layoutSubviews { [super layoutSubviews]; self.imageView.frame = CGRectMake(0.0f, 0.0f, self.bounds.size.width, self.bounds.size.height);}
...@end
Banner view
70Saturday, April 6, 13
@implementation PXBannerView...
- (void)prepareForReuse { [super prepareForReuse]; self.imageView.image = nil;}
...@end
Banner view
71Saturday, April 6, 13
implement the data source
& Delegate
72Saturday, April 6, 13
rainforest
PXCollectionViewCell PXBannerView
PXCollectionViewLayoutUICollectionViewUIView
PXColletionViewController
73Saturday, April 6, 13
Before Implementing the Data Source and Delegate...
74Saturday, April 6, 13
We have to create the collection view.
75Saturday, April 6, 13
view controller implementation
76Saturday, April 6, 13
#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
77Saturday, April 6, 13
@implementation PXCollectionViewController
- (void)loadView { ... }
- (void)viewDidLoad { ... }
- (void)loadCollectionView { ... }
- (void)viewWillLayoutSubviews { ... }
#pragma mark UICollectionView Datasource...#pragma mark PXCollectionView Delegate...@end
VIEW CONTROLLER
78Saturday, April 6, 13
1
3
2Creation
Register Classes
Set Data Source & Delegate
Create Collection View
79Saturday, April 6, 13
@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
80Saturday, April 6, 13
1
3
2Creation
Register Classes
Set Data Source & Delegate
Create Collection View
81Saturday, April 6, 13
@implementation PXCollectionViewController...
- (void)loadCollectionView { ... // Set DataSource and Delegate. self.collectionView.dataSource = self; self.collectionView.delegate = self;
...}
...@end
DATASOURCE & DELEGATE
82Saturday, April 6, 13
1
3
2Creation
Register Classes
Set Data Source & Delegate
Create Collection View
83Saturday, April 6, 13
@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
84Saturday, April 6, 13
Now we can ...
85Saturday, April 6, 13
Implement the data source and delegate.
86Saturday, April 6, 13
1
2Data
SourceNumber of Items in Section:
Number of Sections
87Saturday, April 6, 13
@implementation PXCollectionViewController
#pragma mark UICollectionView Datasource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{ return 4;}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 1;}
...@end
Data source
88Saturday, April 6, 13
1
2Data
SourceView for Supplementary Element of Kind:
Cell for Item at Ind3 Path:
89Saturday, April 6, 13
@implementation PXCollectionViewController
#pragma mark UICollectionView Datasource...
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kPXParallaxCellReuseID forIndexPath:indexPath]; return cell;}
...@end
Data source
90Saturday, April 6, 13
@implementation PXCollectionViewController
#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
91Saturday, April 6, 13
Delegate
92Saturday, April 6, 13
Custom Layout Collection View Delegate
93Saturday, April 6, 13
static NSString * const kPXBannerSupplementaryViewKind = @"PXBanner";
@protocol PXCollectionViewDelegate <UICollectionViewDelegate>@optional
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout heightForBannerInSection:(NSInteger)section;
@end
...
Px Layout header
94Saturday, April 6, 13
@implementation PXCollectionViewController
#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
95Saturday, April 6, 13
No Banners on Screen Yet.
96Saturday, April 6, 13
banner viewLayout
97Saturday, April 6, 13
rainforest
PXCollectionViewCell PXBannerView
PXCollectionViewLayoutUICollectionViewUIView
PXColletionViewControllerCustom Layout
98Saturday, April 6, 13
Layout implementation
99Saturday, April 6, 13
#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
100Saturday, April 6, 13
@implementation PXCollectionViewLayout
- (void)prepareLayout { ... }
- (void)prepareLayoutForBannerViewInSection:(NSUInteger)section { ... }
- (CGSize)collectionViewContentSize { ... }
...
@end
px Layout
101Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect { ... }
- (UICollectionViewLayoutAttributes *) layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath { ... }
- (UICollectionViewLayoutAttributes *) layoutAttributesForSupplementaryViewOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath { ... }
...@end
px Layout
102Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (void)clearOutLayoutCalculations { ... }
- (void)setParallaxVisibleHeight:(CGFloat)parallaxVisibleHeight { ... }
@end
px Layout
103Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
104Saturday, April 6, 13
Remember
105Saturday, April 6, 13
@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
106Saturday, April 6, 13
1
2Layoutcalcs
Content S4e
Prepare Layout
107Saturday, April 6, 13
@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
108Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
>110Saturday, April 6, 13
1
2Layoutcalcs
Content S4e
Prepare Layout
111Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (CGSize)collectionViewContentSize { return CGSizeMake(self.collectionView.frame.size.width, self.contentHeight);}
...@end
Layout CONTENT SIZE
112Saturday, April 6, 13
And now the core methods....
113Saturday, April 6, 13
everything is already calculated by the time we
hit these methods
114Saturday, April 6, 13
1
3
2LAYOUTATTRIBUTES
For:
Supplementary View of Kind: at Ind3 Path:
Item at Ind3 Path:
Elements in Rect:
115Saturday, April 6, 13
Title1
Title2
Title3
Content Content
Content Content
Content
Rect
Elements in
Rect
116Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
117Saturday, April 6, 13
1
3
2LAYOUTATTRIBUTES
For:
Supplementary View of Kind: at Ind3 Path:
Item at Ind3 Path:
Elements in Rect:
118Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
119Saturday, April 6, 13
Quick tour in Xcode
120Saturday, April 6, 13
Step 2Parall.ing Cells
121Saturday, April 6, 13
Parallaxing Cell
Banner
Parallaxing Cell
Banner
Components
122Saturday, April 6, 13
authorCollection View Cell
123Saturday, April 6, 13
rainforest
PXCollectionViewCell
PXCollectionViewLayout
PXBannerView
UICollectionViewUIView
PXCollectionViewCellPXCollectionViewCellPXCollectionViewCell
PXColletionViewController
124Saturday, April 6, 13
PXCollectionViewCell
PXCroppedImageContainerView
Content View
125Saturday, April 6, 13
1
2Cell
Collection View Cell Subclass
Cropped Image Container View
126Saturday, April 6, 13
CroppedImage
Container
Image View
Container View
127Saturday, April 6, 13
CroppedImage
Container
Image View
Reference Frame
128Saturday, April 6, 13
CroppedImage
Container
Image View
Container View
129Saturday, April 6, 13
CroppedImage
Container
Image View
Container View
Reference Frame
130Saturday, April 6, 13
container view header
131Saturday, April 6, 13
#import <UIKit/UIKit.h>
@interface PXCroppedImageContainerView : UIView
@property(nonatomic, assign) CGRect referenceFrame;@property(nonatomic, strong, readonly) UIImageView *imageView;@property(nonatomic, assign) CGFloat imageViewScale;
- (void)setImageToImageNamed:(NSString *)imageNamed;
@end
Image container View
132Saturday, April 6, 13
container view implementation
133Saturday, April 6, 13
@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
Image container View
134Saturday, April 6, 13
@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
Image container View
135Saturday, April 6, 13
1
2Cell
Collection View Cell Subclass
Cropped Image Container View
136Saturday, April 6, 13
cell header
137Saturday, April 6, 13
#import <UIKit/UIKit.h>
@class PXCroppedImageContainerView;
@interface PXCollectionViewCell : UICollectionViewCell
@property(nonatomic, strong, readonly) PXCroppedImageContainerView *imageContainerView;
- (void)setImageToImageNamed:(NSString *)imageNamed;
@end
Collection View Cell
138Saturday, April 6, 13
cell implementation
139Saturday, April 6, 13
#import "PXCollectionViewCell.h"
#import "PXCroppedImageContainerView.h"
@interface PXCollectionViewCell ()@property(nonatomic, strong, readwrite) PXCroppedImageContainerView *imageContainerView;@end
@implementation PXCollectionViewCell...@end
Collection View Cell
140Saturday, April 6, 13
@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
Collection View Cell
141Saturday, April 6, 13
@implementation PXCollectionViewCell...
- (void)setImageToImageNamed:(NSString *)imageNamed { [self.imageContainerView setImageToImageNamed:imageNamed];}
...@end
Collection View Cell
142Saturday, April 6, 13
@implementation PXCollectionViewCell...
- (void)prepareForReuse { [super prepareForReuse]; self.imageContainerView.imageView.image = nil;}
...@end
Collection View Cell
143Saturday, April 6, 13
@implementation PXCollectionViewCell...
#pragma mark Layout
- (void)layoutSubviews { [super layoutSubviews]; self.imageContainerView.frame = self.contentView.bounds;}
...@end
Collection View Cell
144Saturday, April 6, 13
Don’t forget!
145Saturday, April 6, 13
To register the cell class.
146Saturday, April 6, 13
@implementation PXCollectionViewController...
- (void)loadCollectionView {...
[self.collectionView registerClass:[PXCollectionViewCell class] forCellWithReuseIdentifier:kPXParallaxCellReuseID];
}
...@end
Register cell class
147Saturday, April 6, 13
implement the data source
& Delegate
148Saturday, April 6, 13
rainforest
PXCollectionViewCell PXBannerView
PXCollectionViewLayoutUICollectionViewUIView
PXColletionViewController
149Saturday, April 6, 13
@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
150Saturday, April 6, 13
Nothing will show yet because we...
151Saturday, April 6, 13
Have to implement the layout algorithm.
152Saturday, April 6, 13
Parallax Layout
153Saturday, April 6, 13
rainforest
PXCollectionViewCell PXBannerView
PXCollectionViewLayoutUICollectionViewUIView
PXColletionViewControllerCustom Layout
154Saturday, April 6, 13
Parallaxing Cell
Banner
Parallaxing Cell
Banner
Components
155Saturday, April 6, 13
Parallaxing Cell
Banner
Parallaxing Cell
Banner
Banners
156Saturday, April 6, 13
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
157Saturday, April 6, 13
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner
158Saturday, April 6, 13
Cell 2
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
159Saturday, April 6, 13
Scroll View Contents
Cell 2
Cell
Banner
Banner
Banner
Banner
160Saturday, April 6, 13
Scroll View Contents
Cell 2
Banner
Banner
Banner
Banner
161Saturday, April 6, 13
Scroll View Contents
Cell 3Cell 2
Banner
Banner
Banner
Banner
162Saturday, April 6, 13
Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner
163Saturday, April 6, 13
Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner
164Saturday, April 6, 13
Scroll View Contents
Cell 3
Banner
Banner
Banner
Banner
165Saturday, April 6, 13
1rst we have to know how to...
166Saturday, April 6, 13
Anchor scroll view subviews.
167Saturday, April 6, 13
Scroll View Mechanics
168Saturday, April 6, 13
scrollView
mechanics
Scroll View Contents
BOUNDS
169Saturday, April 6, 13
Anchoring Subviews
170Saturday, April 6, 13
anchoringsubviews
Scroll View Contents
Subview
BOUNDS
171Saturday, April 6, 13
1
3
2cellLayoutsteps
Parall.
Crop
Anchor
172Saturday, April 6, 13
Anchor collection view cells using custom layout...
173Saturday, April 6, 13
Every time the bounds changes,
update the subview frame
174Saturday, April 6, 13
So we need a hook!
175Saturday, April 6, 13
Should Invalidate Layout for Bounds Change:
176Saturday, April 6, 13
Returning YES will invalidate your layout
177Saturday, April 6, 13
So, on bounds changes...
178Saturday, April 6, 13
invalidatelayout
Scroll View Contents
Subview
BOUNDS
-invalidateLayout-invalidateLayout-invalidateLayout-invalidateLayout-invalidateLayout
179Saturday, April 6, 13
AND...
180Saturday, April 6, 13
Invalidate layoutwill call
prepare layoutand
content s4e
181Saturday, April 6, 13
What’s cool is...
182Saturday, April 6, 13
Will pick up scroll view momentum animations
183Saturday, April 6, 13
SO...
184Saturday, April 6, 13
return YES
185Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds { return YES;}..
@end
invalidate layout
186Saturday, April 6, 13
@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
187Saturday, April 6, 13
Now we can implement the anchoring layout.
188Saturday, April 6, 13
@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
189Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
190Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
>191Saturday, April 6, 13
Demo
192Saturday, April 6, 13
Why there’s a problem
193Saturday, April 6, 13
Cell
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner
194Saturday, April 6, 13
Scroll View Contents
Banner
CellCell 2CellBanner
Banner
Banner
195Saturday, April 6, 13
Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner
196Saturday, April 6, 13
Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner
197Saturday, April 6, 13
Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner
198Saturday, April 6, 13
Which Cell is Parallaxing?
199Saturday, April 6, 13
DetermineParallaxing
Cells
Scroll View Contents
Banner
Banner
Banner
Banner
BOUNDS
200Saturday, April 6, 13
Parall.ing Window Must be On Screen
201Saturday, April 6, 13
BUT6ere’s no frame.
202Saturday, April 6, 13
So
203Saturday, April 6, 13
DetermineParallaxing
Cells
Scroll View Contents
Banner
Banner
Banner
Banner
BOUNDS
204Saturday, April 6, 13
DetermineParallaxing
Cells
Scroll View Contents
Banner
Banner
Banner
Banner
CELL
About toshow
BOUNDS
205Saturday, April 6, 13
DetermineParallaxing
Cells
Scroll View Contents
Banner
Banner
Banner
Banner
CELL
About todisappear
BOUNDS
206Saturday, April 6, 13
#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
207Saturday, April 6, 13
Now we can implement the logic.
208Saturday, April 6, 13
1rst, we have to look at the top of the cell.
209Saturday, April 6, 13
DetermineParallaxing
Cells
Scroll View Contents
Banner
Banner
Banner
Banner
BOUNDS
CELL
About toshow
210Saturday, April 6, 13
@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
211Saturday, April 6, 13
Second, we have to look at the bottom of the cell.
212Saturday, April 6, 13
DetermineParallaxing
Cells
Scroll View Contents
Banner
Banner
Banner
Banner
CELL
About todisappear
BOUNDS
213Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
Parallaxing indicies
214Saturday, April 6, 13
Now we have an array of indices
215Saturday, April 6, 13
A helper method.
216Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (BOOL)isParallaxingSection:(NSUInteger)section { if ([self.parallaxingCellIndicies containsObject:@(section)]) { return YES; } return NO;}
...@end
Parallaxing indicies
217Saturday, April 6, 13
Last step to anchor,non parall.ing cells.
218Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
219Saturday, April 6, 13
We have anchored cells and only the ones that are parall.ing are laid out.
220Saturday, April 6, 13
demo
221Saturday, April 6, 13
Why there’s a problem
222Saturday, April 6, 13
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner
223Saturday, April 6, 13
Cell 2
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
224Saturday, April 6, 13
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner
225Saturday, April 6, 13
Scroll View Contents
Cell 2
Banner
Banner
Banner
Banner
226Saturday, April 6, 13
Scroll View Contents
Cell 3Cell 2
Banner
Banner
Banner
Banner
227Saturday, April 6, 13
Scroll View Contents
Cell 3Cell 2
Banner
Banner
Banner
Banner
228Saturday, April 6, 13
Scroll View Contents
Cell 3Cell 2
Banner
Banner
Banner
Banner
229Saturday, April 6, 13
Scroll View Contents
Cell 3
Banner
Banner
Banner
Banner
230Saturday, April 6, 13
1
3
2cellLayoutsteps
Parall.
Crop
Anchor
231Saturday, April 6, 13
Z-Ind3 Matters!
232Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
z-index
>1rst One on Top
233Saturday, April 6, 13
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner
234Saturday, April 6, 13
Cell 2
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
235Saturday, April 6, 13
Scroll View Contents
Cell 2
Cell
Banner
Banner
Banner
Banner
236Saturday, April 6, 13
Scroll View Contents
Cell 2
Banner
Banner
Banner
Banner
237Saturday, April 6, 13
Scroll View Contents
Cell 3Cell 2
Banner
Banner
Banner
Banner
238Saturday, April 6, 13
Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner
239Saturday, April 6, 13
Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner
240Saturday, April 6, 13
Scroll View Contents
Cell 3
Banner
Banner
Banner
Banner
241Saturday, April 6, 13
What’s the logic?
242Saturday, April 6, 13
Cell 2
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
Bottom of Banner
Bottom of Anchor
243Saturday, April 6, 13
@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
244Saturday, April 6, 13
demo
245Saturday, April 6, 13
1
3
2cellLayoutsteps
Parall.
Crop
Anchor
246Saturday, April 6, 13
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner
247Saturday, April 6, 13
Cell 2
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
248Saturday, April 6, 13
Scroll View Contents
Cell 2
Cell
Banner
Banner
Banner
Banner
249Saturday, April 6, 13
Scroll View Contents
Cell 2
Banner
Banner
Banner
Banner
250Saturday, April 6, 13
Scroll View Contents
Cell 3Cell 2
Banner
Banner
Banner
Banner
251Saturday, April 6, 13
Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner
252Saturday, April 6, 13
Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner
253Saturday, April 6, 13
Scroll View Contents
Cell 3
Banner
Banner
Banner
Banner
254Saturday, April 6, 13
1
3
2 Parallaxsteps
Apply Current Offset
Define Offset
Determine Percentage
255Saturday, April 6, 13
determinePercentage
Scroll View Contents
Banner
Banner
Banner
Banner
BOUNDS
0%
256Saturday, April 6, 13
determinePercentage
Scroll View Contents
Banner
Banner
Banner
Banner
BOUNDS
50%
257Saturday, April 6, 13
determinePercentage
Scroll View Contents
Banner
Banner
Banner
Banner
BOUNDS 100%
258Saturday, April 6, 13
determinePercentage
Scroll View Contents
Banner
Banner
Banner
Banner
Current Banner Frame Max Y
BOUNDS
259Saturday, April 6, 13
determinePercentage
Scroll View Contents
Banner
Banner
Banner
Banner
nextPossibleBannerYOrigin
BOUNDS
260Saturday, April 6, 13
determinePercentage
Scroll View Contents
Banner
Banner
Banner
Banner
+
BOUNDS
261Saturday, April 6, 13
determinePercentage
Scroll View Contents
Banner
Banner
Banner
Banner
+
BOUNDSBounds Height
262Saturday, April 6, 13
determinePercentage
Scroll View Contents
Banner
Banner
Banner
Banner
BOUNDS
Whole Height
263Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
>264Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (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
265Saturday, April 6, 13
StartingPoint
Scroll View Contents
Banner
Banner
Banner
Banner
Current Banner Frame Max Y
BOUNDS
266Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (void)configureLayoutAttributesForParallaxingCellInSection:(NSUInteger)section layoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes { ...
// Parallax. ... // Calculate Percentage. CGFloat percentParallax = (bottomOfBounds - CGRectGetMaxY(currentBannerFrame)) / parallaxWholeHeight;
...}... @end
Percentage
>
Percentage
267Saturday, April 6, 13
1
3
2 Parallaxsteps
Apply Current Offset
Define Offset
Determine Percentage
268Saturday, April 6, 13
defineoffset
Scroll View Contents
Banner
Banner
Parallaxing Cell
Banner
Banner
BOUNDS
269Saturday, April 6, 13
defineoffset
Parallaxing Cell
BOUNDS
270Saturday, April 6, 13
defineoffset
Parallaxing Cell
BOUNDS
Offset
0%
271Saturday, April 6, 13
defineoffset
Parallaxing Cell
BOUNDS
Offset
50%
272Saturday, April 6, 13
defineoffset
Parallaxing CellBOUNDS
Offset
100%
273Saturday, April 6, 13
Offset should be configurable.
274Saturday, April 6, 13
Need a property to store track of offset.
275Saturday, April 6, 13
@interface PXCollectionViewLayout : UICollectionViewLayout
@property(nonatomic, assign) CGFloat parallaxVisibleHeight;@property(nonatomic, assign) CGFloat parallaxOffset;
@end
Px Layout header
276Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (void)setParallaxOffset:(CGFloat)parallaxOffset { _parallaxOffset = parallaxOffset; [self invalidateLayout];}
...@end
Px Layout
277Saturday, April 6, 13
Now we can determine the current offset.
278Saturday, April 6, 13
0% + Offset
279Saturday, April 6, 13
50% 0 Offset
280Saturday, April 6, 13
100% - Offset
281Saturday, April 6, 13
x2
Parallaxing CellBOUNDS
Offset
282Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (void)configureLayoutAttributesForParallaxingCellInSection:(NSUInteger)section layoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes { ...
// Parallax. ...
// Determine Current Offset. CGFloat parallaxRange = self.parallaxOffset * 2; CGFloat parallaxCurrentOffset = self.parallaxOffset - (parallaxRange * percentParallax);
...}
...@end
offset
>283Saturday, April 6, 13
1
3
2 Parallaxsteps
Apply Current Offset
Define Offset
Determine Percentage
284Saturday, April 6, 13
@implementation PXCollectionViewLayout...
- (void)configureLayoutAttributesForParallaxingCellInSection:(NSUInteger)section layoutAttributes:(UICollectionViewLayoutAttributes *)layoutAttributes { ...
// Parallax. ...
// Apply Parallax. newImageFrame.origin.y += parallaxCurrentOffset;
layoutAttributes.frame = newImageFrame; layoutAttributes.zIndex = -1 * section;}
...@end
Apply current offset
>285Saturday, April 6, 13
We’veGot
Parallax
286Saturday, April 6, 13
DEMO
287Saturday, April 6, 13
YOUNow
can Parall.
288Saturday, April 6, 13
remember
289Saturday, April 6, 13
delight your users
290Saturday, April 6, 13
Stand out, its crowded
291Saturday, April 6, 13
More downloads
292Saturday, April 6, 13
people will love your app
293Saturday, April 6, 13
USE TOUCH!!
294Saturday, April 6, 13
Resources
295Saturday, April 6, 13
/RCacheaux/Parallax
296Saturday, April 6, 13
TOUCH&ANIMATION
298Saturday, April 6, 13