Parallactic Collection Views
Upcoming SlideShare
Loading in...5
×
 

Parallactic Collection Views

on

  • 2,611 views

360iDev session on adding parallax effect to UICollectionView layouts.

360iDev session on adding parallax effect to UICollectionView layouts.

Statistics

Views

Total Views
2,611
Views on SlideShare
1,747
Embed Views
864

Actions

Likes
4
Downloads
27
Comments
0

4 Embeds 864

http://harrisonjackson.us 848
https://twitter.com 11
http://news.google.com 4
http://webcache.googleusercontent.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Parallactic Collection Views Parallactic Collection Views Presentation Transcript

    • Parallactic CollectionViews How to add depth into iOS user interfaces
    • UI Collection View UICollectionViewDataSource UICollectionViewCell UICollectionViewCell UICollectionViewCell UICollectionViewCell UICollectionReusableView UICollectionViewLayout UICollectionReusableView UICollectionReusableView UICollectionReusableView UICollectionView UICollectionViewDelegate
    • TrulyGreat Apps
    • What makes an app truly great?
    • Fitin
    • Magical
    • Amazing First Impressions
    • Experience Matters
    • Let’sgobackintime
    • 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
    • WhyCollectionView?
    • 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 UICollectionViewCell UICollectionViewCell UICollectionViewCell UICollectionViewCell UICollectionReusableView UICollectionViewLayout UICollectionReusableView UICollectionReusableView UICollectionReusableView 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 View Mechanics Scroll View Contents BOUNDS
    • Scroll View Mechanics Scroll View Contents BOUNDS
    • Anchor
    • Anchoring Subviews Scroll View Contents Subview BOUNDS
    • Anchoring Subviews Scroll View Contents Subview BOUNDS
    • Need New Layout Metrics on Scroll
    • Invalidate Layout - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
    • Invalidate Layout 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’sabouttoget 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
    • Define Offset Parallaxing Background BOUNDS Offset 0%
    • Define Offset Parallaxing Background BOUNDS Offset 50%
    • Define Offset 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
    • BuildIt
    • We’ve Got Parallax
    • The Cells
    • Similar
    • BuildIt
    • YOU Now can Parallax
    • One more thing...
    • Parallactic rainForest
    • Inspiration
    • www.spotify.com/us/
    • 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
    • Define Offset Scroll View Contents Banner Banner Parallaxing Cell Banner Banner BOUNDS
    • Define Offset Parallaxing Cell BOUNDS
    • Define Offset Parallaxing Cell BOUNDS Offset 0%
    • Define Offset Parallaxing Cell BOUNDS Offset 50%
    • Define Offset Parallaxing Cell BOUNDS Offset 100%
    • So that’s parallax
    • Why do this?
    • Fit In
    • Get Featured by Apple
    • And...
    • delightyourusers
    • Resources
    • /RCacheaux/Parallax
    • René Cacheaux iOS Architect rene.cacheaux@mutualmobile.com rene.cacheaux@gmail.com @RCachATX