parallactic collection views
DESCRIPTION
360iDev session on adding parallax effect to UICollectionView layouts.TRANSCRIPT
Parallactic Collection Views
How to add depth into iOS user interfaces
UI Collection View
UICollectionViewDataSource
UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView
UICollectionViewLayout
UICollectionReusableViewUICollectionReusableViewUICollectionReusableView
UICollectionView
UICollectionViewDelegate
Truly Great Apps
What makes an app
truly great?
Fit in
Magical
AmazingFirst Impressions
Experience Matters
Let’s go back in time
AP
Horizontal Navigation
And now...
iOS 7 is Coming
Opportunity
Design for iOS 7
Depth
Navigation
Tools
We Need
UICollectionView
UICollectionView
iOS 7
How to add depth?
parallax
Examples
http://tinyurl.com/360Parallax
Not just cool...
How Parallax Works
Relative Motion
You can do this with UICollection View
Why Collection View?
In this session you will:
Master Adding Parallax to Your Layouts
Let’s Dive In
What are we building?
The Background
Background View1
UI Collection View
UICollectionViewDataSource
UICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionViewCellUICollectionReusableView
UICollectionViewLayout
UICollectionReusableViewUICollectionReusableViewUICollectionReusableView
UICollectionView
UICollectionViewDelegate
Calculating Layout Metrics
Elements in Rect
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
Title1
Title2
Title3
Content Content
Content Content
Content
RectElements in Rect
1
2
3
Calculate
Test
Add
Layout Attributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind
atIndexPath:(NSIndexPath *)indexPath
Anchor Background2
UICollectionView
UIScrollView
UIView
UIResponder
NSObject
Class Hierarchy
Scroll View Mechanics
Scroll ViewMechanics
Scroll View Contents
BOUNDS
Scroll ViewMechanics
Scroll View Contents
BOUNDS
Anchor
AnchoringSubviews
Scroll View Contents
Subview
BOUNDS
AnchoringSubviews
Scroll View Contents
Subview
BOUNDS
Need New Layout Metrics on Scroll
Invalidate Layout
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
InvalidateLayout
Scroll View Contents
Subview
BOUNDS
-invalidateLayout-invalidateLayout-invalidateLayout-invalidateLayout-invalidateLayout
New Metrics On Invalidation
Layout Attributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind
atIndexPath:(NSIndexPath *)indexPath
Parallax3
It’s about to get complicated
Layout Attributes
- (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind
atIndexPath:(NSIndexPath *)indexPath
Parallactic Offset
Percentage Based
Content Offset
Scroll View Contents
BOUNDS
0%
100%
50%
Content Offset
Scroll View Contents
BOUNDS
0%
100%
50%
Content Offset
Scroll View Contents
BOUNDS
100%Bounds Height
Content Offset
Scroll View Contents
BOUNDS
100%
Content Size Height
Content Offset
Scroll View Contents
BOUNDS
100%
Distance to Travel
Percentage
CGFloat percentageComplete = self.collectionView.contentOffset.y / (self.collectionView.contentSize.height - self.collectionView.bounds.size.height);
Calculating Parallactic Offset
DefineOffset
Parallaxing BackgroundBOUNDS
Offset
0%
DefineOffset
Parallaxing Background
BOUNDS
Offset
50%
DefineOffset
Parallaxing Background
BOUNDS
Offset
100%
Offset
CGFloat parallaxShift = 6.0;
CGFloat offset = ([self scrollPercentageComplete] * (2 * parallaxShift)) - parallaxShift;
1
2
3
Inspect Collection View Content Offset
Calculate Current Percentage
Calculate Current Parallactic Offset
4 Apply the Parallax Frame
Build It
We’veGot
Parallax
The Cells
Similar
Build It
YOUNow
can Parallax
One more thing...
Parallactic rainForest
Inspiration
Demo
ARCHITECTURE
Parallaxing Cell
Banner
Parallaxing Cell
Banner
Components
Anchor
Cell
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner
Scroll View Contents
Banner
CellCell 2CellBanner
Banner
Banner
Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner
Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner
Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner
Crop
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner
Cell 2
Scroll View Contents
Cell
Banner
Banner
Banner
Banner
Scroll View Contents
Cell 2
Cell
Banner
Banner
Banner
Banner
Scroll View Contents
Cell 2
Banner
Banner
Banner
Banner
Scroll View Contents
Cell 3Cell 2
Banner
Banner
Banner
Banner
Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner
Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner
Scroll View Contents
Cell 3
Banner
Banner
Banner
Banner
Parallax
DefineOffset
Scroll View Contents
Banner
Banner
Parallaxing Cell
Banner
Banner
BOUNDS
DefineOffset
Parallaxing Cell
BOUNDS
DefineOffset
Parallaxing Cell
BOUNDS
Offset
0%
DefineOffset
Parallaxing Cell
BOUNDS
Offset
50%
DefineOffset
Parallaxing CellBOUNDS
Offset
100%
So that’s parallax
Why do this?
Fit In
Get Featured by Apple
And...
delight your users
Resources
/RCacheaux/Parallax
