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