Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Parallactic
CollectionViews
How to add depth into iOS user interfaces
UI Collection View
UICollectionViewDataSource
UICollectionViewCell
UICollectionViewCell
UICollectionViewCell
UICollectionV...
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
UICollectionV...
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 *)decorationVie...
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
-invalidateLay...
New Metrics On
Invalidation
Layout Attributes
- (UICollectionViewLayoutAttributes *)
layoutAttributesForDecorationViewOfKind:(NSString *)decorationVie...
Parallax3
It’sabouttoget
complicated
Layout Attributes
- (UICollectionViewLayoutAttributes *)
layoutAttributesForDecorationViewOfKind:(NSString *)decorationVie...
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 - se...
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)) - parallaxShi...
1
2
3
Inspect Collection View Content Offset
Calculate Current Percentage
Calculate Current Parallactic Offset
4 Apply the...
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
Parallactic Collection Views
Parallactic Collection Views
Parallactic Collection Views
Parallactic Collection Views
Parallactic Collection Views
Parallactic Collection Views
Parallactic Collection Views
Parallactic Collection Views
Upcoming SlideShare
Loading in …5
×

9

Share

Download to read offline

Parallactic Collection Views

Download to read offline

360iDev session on adding parallax effect to UICollectionView layouts.

Related Audiobooks

Free with a 30 day trial from Scribd

See all

Parallactic Collection Views

  1. 1. Parallactic CollectionViews How to add depth into iOS user interfaces
  2. 2. UI Collection View UICollectionViewDataSource UICollectionViewCell UICollectionViewCell UICollectionViewCell UICollectionViewCell UICollectionReusableView UICollectionViewLayout UICollectionReusableView UICollectionReusableView UICollectionReusableView UICollectionView UICollectionViewDelegate
  3. 3. TrulyGreat Apps
  4. 4. What makes an app truly great?
  5. 5. Fitin
  6. 6. Magical
  7. 7. Amazing First Impressions
  8. 8. Experience Matters
  9. 9. Let’sgobackintime
  10. 10. AP
  11. 11. Horizontal Navigation
  12. 12. And now...
  13. 13. iOS 7 is Coming
  14. 14. Opportunity
  15. 15. Design for iOS 7
  16. 16. Depth
  17. 17. Navigation
  18. 18. Tools We Need
  19. 19. UICollectionView
  20. 20. UICollectionView iOS 7
  21. 21. How to add depth?
  22. 22. parallax
  23. 23. Examples
  24. 24. http://tinyurl.com/ 360Parallax
  25. 25. Not just cool...
  26. 26. How Parallax Works
  27. 27. Relative Motion
  28. 28. You can do this with UICollection View
  29. 29. WhyCollectionView?
  30. 30. In this session you will:
  31. 31. Master Adding Parallax to Your Layouts
  32. 32. Let’s Dive In
  33. 33. What are we building?
  34. 34. The Background
  35. 35. Background View1
  36. 36. UI Collection View UICollectionViewDataSource UICollectionViewCell UICollectionViewCell UICollectionViewCell UICollectionViewCell UICollectionReusableView UICollectionViewLayout UICollectionReusableView UICollectionReusableView UICollectionReusableView UICollectionView UICollectionViewDelegate
  37. 37. Calculating Layout Metrics
  38. 38. Elements in Rect - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
  39. 39. Title1 Title2 Title3 Content Content Content Content Content RectElements in Rect
  40. 40. 1 2 3 Calculate Test Add
  41. 41. Layout Attributes - (UICollectionViewLayoutAttributes *) layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind atIndexPath:(NSIndexPath *)indexPath
  42. 42. Anchor Background2
  43. 43. UICollectionView UIScrollView UIView UIResponder NSObject Class Hierarchy
  44. 44. Scroll View Mechanics
  45. 45. Scroll View Mechanics Scroll View Contents BOUNDS
  46. 46. Scroll View Mechanics Scroll View Contents BOUNDS
  47. 47. Anchor
  48. 48. Anchoring Subviews Scroll View Contents Subview BOUNDS
  49. 49. Anchoring Subviews Scroll View Contents Subview BOUNDS
  50. 50. Need New Layout Metrics on Scroll
  51. 51. Invalidate Layout - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {
  52. 52. Invalidate Layout Scroll View Contents Subview BOUNDS -invalidateLayout -invalidateLayout -invalidateLayout -invalidateLayout -invalidateLayout
  53. 53. New Metrics On Invalidation
  54. 54. Layout Attributes - (UICollectionViewLayoutAttributes *) layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind atIndexPath:(NSIndexPath *)indexPath
  55. 55. Parallax3
  56. 56. It’sabouttoget complicated
  57. 57. Layout Attributes - (UICollectionViewLayoutAttributes *) layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind atIndexPath:(NSIndexPath *)indexPath
  58. 58. Parallactic Offset
  59. 59. Percentage Based
  60. 60. Content Offset Scroll View Contents BOUNDS 0% 100% 50%
  61. 61. Content Offset Scroll View Contents BOUNDS 0% 100% 50%
  62. 62. Content Offset Scroll View Contents BOUNDS 100% Bounds Height
  63. 63. Content Offset Scroll View Contents BOUNDS 100% Content Size Height
  64. 64. Content Offset Scroll View Contents BOUNDS 100% Distance to Travel
  65. 65. Percentage CGFloat percentageComplete = self.collectionView.contentOffset.y / (self.collectionView.contentSize.height - self.collectionView.bounds.size.height);
  66. 66. Calculating Parallactic Offset
  67. 67. Define Offset Parallaxing Background BOUNDS Offset 0%
  68. 68. Define Offset Parallaxing Background BOUNDS Offset 50%
  69. 69. Define Offset Parallaxing Background BOUNDS Offset 100%
  70. 70. Offset CGFloat parallaxShift = 6.0; CGFloat offset = ([self scrollPercentageComplete] * (2 * parallaxShift)) - parallaxShift;
  71. 71. 1 2 3 Inspect Collection View Content Offset Calculate Current Percentage Calculate Current Parallactic Offset 4 Apply the Parallax Frame
  72. 72. BuildIt
  73. 73. We’ve Got Parallax
  74. 74. The Cells
  75. 75. Similar
  76. 76. BuildIt
  77. 77. YOU Now can Parallax
  78. 78. One more thing...
  79. 79. Parallactic rainForest
  80. 80. Inspiration
  81. 81. www.spotify.com/us/
  82. 82. Demo
  83. 83. ARCHITECTURE
  84. 84. Parallaxing Cell Banner Parallaxing Cell Banner Components
  85. 85. Anchor
  86. 86. Cell Scroll View Contents Cell 2Cell Banner Banner Banner Banner
  87. 87. Scroll View Contents Banner CellCell 2CellBanner Banner Banner
  88. 88. Scroll View Contents Banner CellCell 2Cell Banner Banner Banner
  89. 89. Scroll View Contents Banner CellCell 2Cell Banner Banner Banner
  90. 90. Scroll View Contents Banner CellCell 2Cell Banner Banner Banner
  91. 91. Crop
  92. 92. Scroll View Contents Cell Banner Banner Banner Banner
  93. 93. Scroll View Contents Cell Banner Banner Banner Banner
  94. 94. Scroll View Contents Cell 2Cell Banner Banner Banner Banner
  95. 95. Cell 2 Scroll View Contents Cell Banner Banner Banner Banner
  96. 96. Scroll View Contents Cell 2 Cell Banner Banner Banner Banner
  97. 97. Scroll View Contents Cell 2 Banner Banner Banner Banner
  98. 98. Scroll View Contents Cell 3Cell 2 Banner Banner Banner Banner
  99. 99. Scroll View Contents Cell 3 Cell 2 Banner Banner Banner Banner
  100. 100. Scroll View Contents Cell 3 Cell 2 Banner Banner Banner Banner
  101. 101. Scroll View Contents Cell 3 Banner Banner Banner Banner
  102. 102. Parallax
  103. 103. Define Offset Scroll View Contents Banner Banner Parallaxing Cell Banner Banner BOUNDS
  104. 104. Define Offset Parallaxing Cell BOUNDS
  105. 105. Define Offset Parallaxing Cell BOUNDS Offset 0%
  106. 106. Define Offset Parallaxing Cell BOUNDS Offset 50%
  107. 107. Define Offset Parallaxing Cell BOUNDS Offset 100%
  108. 108. So that’s parallax
  109. 109. Why do this?
  110. 110. Fit In
  111. 111. Get Featured by Apple
  112. 112. And...
  113. 113. delightyourusers
  114. 114. Resources
  115. 115. /RCacheaux/Parallax
  116. 116. René Cacheaux iOS Architect rene.cacheaux@mutualmobile.com rene.cacheaux@gmail.com @RCachATX
  • IlyaStroganov

    Feb. 19, 2020
  • theasavcuba

    Jul. 17, 2016
  • PhongTranMac

    Jul. 24, 2015
  • LouisEncontre

    Mar. 8, 2015
  • wbunyam

    Oct. 8, 2014
  • chiarottoalessandro

    May. 11, 2014
  • SeoJoo

    Apr. 22, 2014
  • kunihara

    Feb. 12, 2014
  • gr4yscale

    Oct. 7, 2013

360iDev session on adding parallax effect to UICollectionView layouts.

Views

Total views

5,593

On Slideshare

0

From embeds

0

Number of embeds

1,800

Actions

Downloads

45

Shares

0

Comments

0

Likes

9

×