Parallactic Collection Views

5,123 views

Published on

360iDev session on adding parallax effect to UICollectionView layouts.

Published in: Technology, Design
0 Comments
8 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,123
On SlideShare
0
From Embeds
0
Number of Embeds
1,803
Actions
Shares
0
Downloads
42
Comments
0
Likes
8
Embeds 0
No embeds

No notes for slide

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

×