[Tabs] Add ripple effect (#7726)

Adds ripple support to the MDCTabbarItemView |Selected|Selected + Ripple|Unselected + Ripple| |---|---|---| |![Simulator Screen Shot - iPhone 7 - 2019-06-27 at 14 08 36](https://user-images.githubusercontent.com/1753199/60289718-1f34d680-98e5-11e9-9491-b88d8145f84d.png)|![Simulator Screen Shot - iPhone 7 - 2019-06-27 at 14 08 11](https://user-images.githubusercontent.com/1753199/60289683-06c4bc00-98e5-11e9-920a-d294b2c39b74.png)|![Simulator Screen Shot - iPhone 7 - 2019-06-27 at 14 08 34](https://user-images.githubusercontent.com/1753199/60289741-2c51c580-98e5-11e9-8b68-540cc233a582.png)| closes #7708
material-components · Jun 27, 2019 · 99ec5aa · 99ec5aa
1 parent b46aa91
commit 99ec5aa
Show file tree

Hide file tree

Showing 5 changed files with 30 additions and 0 deletions.
diff --git a/components/Tabs/BUILD b/components/Tabs/BUILD
@@ -93,6 +93,7 @@ mdc_extension_objc_library(
 
 mdc_extension_objc_library(
     name = "TabBarView",
+    deps = ["//components/Ripple"],
 )
 
 mdc_examples_objc_library(

diff --git a/components/Tabs/src/TabBarView/private/MDCTabBarViewItemView.h b/components/Tabs/src/TabBarView/private/MDCTabBarViewItemView.h
@@ -14,6 +14,8 @@
 
 #import <UIKit/UIKit.h>
 
+#import <MaterialComponents/MaterialRipple.h>
+
 /** A basic view that displays a title and image for a tab bar item within MDCTabBarView. */
 @interface MDCTabBarViewItemView : UIView
 
@@ -23,4 +25,7 @@
 /** The label to display the title. */
 @property(nonatomic, strong) UILabel *titleLabel;
 
+/** The ripple contronller to display the ripple touch effect. */
+@property(nonatomic, strong) MDCRippleTouchController *rippleTouchController;
+
 @end
diff --git a/components/Tabs/src/TabBarView/private/MDCTabBarViewItemView.m b/components/Tabs/src/TabBarView/private/MDCTabBarViewItemView.m
@@ -62,6 +62,10 @@ - (instancetype)initWithCoder:(NSCoder *)aDecoder {
 }
 
 - (void)commonMDCTabBarViewItemViewInit {
+  // Make sure the ripple is positioned behind the content.
+  if (!_rippleTouchController) {
+    _rippleTouchController = [[MDCRippleTouchController alloc] initWithView:self];
+  }
   if (!_contentView) {
     _contentView = [[UIView alloc] initWithFrame:CGRectZero];
     [self addSubview:_contentView];

diff --git a/components/Tabs/tests/snapshot/TabBarView/MDCTabBarViewItemViewSnapshotTests.m b/components/Tabs/tests/snapshot/TabBarView/MDCTabBarViewItemViewSnapshotTests.m
@@ -543,4 +543,24 @@ - (void)testNoTitleLargeImageTooLargeSizeRTL {
   [self generateSnapshotAndVerifyForView:self.itemView];
 }
 
+#pragma mark - Ripple
+
+- (void)testRippleAppearanceWhenFullyPressed {
+  // Given
+  self.itemView.titleLabel.textColor = UIColor.yellowColor;
+  self.itemView.iconImageView.tintColor = UIColor.magentaColor;
+  self.itemView.rippleTouchController.rippleView.rippleColor = UIColor.blueColor;
+  [self.itemView sizeToFit];
+
+  // When
+  [self.itemView.rippleTouchController.rippleView
+      beginRippleTouchDownAtPoint:CGPointMake(CGRectGetMidX(self.itemView.bounds),
+                                              CGRectGetMidY(self.itemView.bounds))
+                         animated:NO
+                       completion:nil];
+
+  // Then
+  [self generateSnapshotAndVerifyForView:self.itemView];
+}
+
 @end
diff --git a/...abBarViewItemViewSnapshotTests/testRippleAppearanceWhenFullyPressed_11_2@2x.png b/...abBarViewItemViewSnapshotTests/testRippleAppearanceWhenFullyPressed_11_2@2x.png