360iDev session on adding parallax effect to UICollectionView layouts.

2. Parallactic
CollectionViews
How to add depth into iOS user interfaces

4. UI Collection View
UICollectionViewDataSource
UICollectionViewCell
UICollectionViewCell
UICollectionViewCell
UICollectionViewCell
UICollectionReusableView
UICollectionViewLayout
UICollectionReusableView
UICollectionReusableView
UICollectionReusableView
UICollectionView
UICollectionViewDelegate

5. TrulyGreat
Apps

6. What makes
an app
truly great?

7. Fitin

8. Magical

9. Amazing
First
Impressions

10. Experience Matters

11. Let’sgobackintime

14. AP

15. Horizontal
Navigation

16. And now...

17. iOS 7 is Coming

19. Opportunity

20. Design for iOS 7

21. Depth

22. Navigation

23. Tools
We Need

24. UICollectionView

26. UICollectionView
iOS 7

27. How to add depth?

28. parallax

29. Examples

30. http://tinyurl.com/
360Parallax

31. Not just cool...

32. How Parallax Works

33. Relative Motion

34. You can do this with
UICollection View

35. WhyCollectionView?

36. In this session you will:

37. Master Adding Parallax
to Your Layouts

38. Let’s Dive In

39. What are we
building?

41. The Background

42. Background View1

43. UI Collection View
UICollectionViewDataSource
UICollectionViewCell
UICollectionViewCell
UICollectionViewCell
UICollectionViewCell
UICollectionReusableView
UICollectionViewLayout
UICollectionReusableView
UICollectionReusableView
UICollectionReusableView
UICollectionView
UICollectionViewDelegate

44. Calculating Layout
Metrics

45. Elements in Rect
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {

46. Title1
Title2
Title3
Content Content
Content Content
Content
RectElements
in Rect

47. 1
2
3
Calculate
Test
Add

48. Layout Attributes
- (UICollectionViewLayoutAttributes *)
layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind
atIndexPath:(NSIndexPath *)indexPath

49. Anchor Background2

50. UICollectionView
UIScrollView
UIView
UIResponder
NSObject
Class Hierarchy

51. Scroll View
Mechanics

52. Scroll View
Mechanics
Scroll View Contents
BOUNDS

53. Scroll View
Mechanics
Scroll View Contents
BOUNDS

54. Anchor

55. Anchoring
Subviews
Scroll View Contents
Subview
BOUNDS

56. Anchoring
Subviews
Scroll View Contents
Subview
BOUNDS

57. Need New Layout
Metrics on Scroll

58. Invalidate Layout
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds {

59. Invalidate
Layout
Scroll View Contents
Subview
BOUNDS
-invalidateLayout
-invalidateLayout
-invalidateLayout
-invalidateLayout
-invalidateLayout

60. New Metrics On
Invalidation

61. Layout Attributes
- (UICollectionViewLayoutAttributes *)
layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind
atIndexPath:(NSIndexPath *)indexPath

62. Parallax3

63. It’sabouttoget
complicated

64. Layout Attributes
- (UICollectionViewLayoutAttributes *)
layoutAttributesForDecorationViewOfKind:(NSString *)decorationViewKind
atIndexPath:(NSIndexPath *)indexPath

65. Parallactic Offset

66. Percentage Based

67. Content
Offset
Scroll View Contents
BOUNDS
0%
100%
50%

68. Content
Offset
Scroll View Contents
BOUNDS
0%
100%
50%

69. Content
Offset
Scroll View Contents
BOUNDS
100%
Bounds Height

70. Content
Offset
Scroll View Contents
BOUNDS
100%
Content Size Height

71. Content
Offset
Scroll View Contents
BOUNDS
100%
Distance to Travel

72. Percentage
CGFloat percentageComplete =
self.collectionView.contentOffset.y /
(self.collectionView.contentSize.height - self.collectionView.bounds.size.height);

73. Calculating
Parallactic Offset

74. Define
Offset
Parallaxing Background
BOUNDS
Offset
0%

75. Define
Offset
Parallaxing Background
BOUNDS
Offset
50%

76. Define
Offset
Parallaxing Background
BOUNDS
Offset
100%

77. Offset
CGFloat parallaxShift = 6.0;
CGFloat offset =
([self scrollPercentageComplete] * (2 * parallaxShift)) - parallaxShift;

78. 1
2
3
Inspect Collection View Content Offset
Calculate Current Percentage
Calculate Current Parallactic Offset
4 Apply the Parallax Frame

79. BuildIt

80. We’ve
Got
Parallax

81. The Cells

82. Similar

83. BuildIt

84. YOU
Now
can Parallax

85. One more thing...

86. Parallactic rainForest

87. Inspiration

88. www.spotify.com/us/

89. Demo

90. ARCHITECTURE

91. Parallaxing Cell
Banner
Parallaxing Cell
Banner
Components

92. Anchor

93. Cell
Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner

94. Scroll View Contents
Banner
CellCell 2CellBanner
Banner
Banner

95. Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner

96. Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner

97. Scroll View Contents
Banner
CellCell 2Cell
Banner
Banner
Banner

98. Crop

99. Scroll View Contents
Cell
Banner
Banner
Banner
Banner

100. Scroll View Contents
Cell
Banner
Banner
Banner
Banner

101. Scroll View Contents
Cell 2Cell
Banner
Banner
Banner
Banner

102. Cell 2
Scroll View Contents
Cell
Banner
Banner
Banner
Banner

103. Scroll View Contents
Cell 2
Cell
Banner
Banner
Banner
Banner

104. Scroll View Contents
Cell 2
Banner
Banner
Banner
Banner

105. Scroll View Contents
Cell 3Cell 2
Banner
Banner
Banner
Banner

106. Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner

107. Scroll View Contents
Cell 3
Cell 2
Banner
Banner
Banner
Banner

108. Scroll View Contents
Cell 3
Banner
Banner
Banner
Banner

109. Parallax

110. Define
Offset
Scroll View Contents
Banner
Banner
Parallaxing Cell
Banner
Banner
BOUNDS

111. Define
Offset
Parallaxing Cell
BOUNDS

112. Define
Offset
Parallaxing Cell
BOUNDS
Offset
0%

113. Define
Offset
Parallaxing Cell
BOUNDS
Offset
50%

114. Define
Offset
Parallaxing Cell
BOUNDS
Offset
100%

115. So that’s parallax

116. Why do this?

117. Fit In

118. Get Featured by
Apple

119. And...

120. delightyourusers

121. Resources

122. /RCacheaux/Parallax

123. René Cacheaux
iOS Architect
rene.cacheaux@mutualmobile.com
rene.cacheaux@gmail.com
@RCachATX