[Tabs] Adds safe area inset (#7753)

Add safe area handling to MDCTabBarView

## Manual testing matrix

|Device|iOS|Justified|Scrollable|
|---|---|---|---|
|iPhone SE|10.3.1|![iphonese-10 3 1-justified](https://user-images.githubusercontent.com/1753199/60411576-63e99780-9b9b-11e9-9ebe-1551289f13b2.png)|![iphonese-10 3 1-scrollable](https://user-images.githubusercontent.com/1753199/60411582-6815b500-9b9b-11e9-8e9b-c8b9e2c22c22.png)|
|iPhone SE|12.0|![iphonese-12 0-justified](https://user-images.githubusercontent.com/1753199/60411627-9eebcb00-9b9b-11e9-8fba-2b705a9263ec.png)|![iphonese-12 0-scrollable](https://user-images.githubusercontent.com/1753199/60411633-a57a4280-9b9b-11e9-8f0d-1ce8dfb67425.png)|
|iPhone XR|12.0|![iphonexr-12 0-justified](https://user-images.githubusercontent.com/1753199/60411641-b460f500-9b9b-11e9-8e87-67a68bd9c359.png)|![iphonexr-12 0-scrollable](https://user-images.githubusercontent.com/1753199/60411649-ba56d600-9b9b-11e9-8d9c-e06dad93666a.png)|
|iPhone X|11.2|![iphonex-11 2-justified](https://user-images.githubusercontent.com/1753199/60411654-c5aa0180-9b9b-11e9-912d-5ab8f150b7f1.png)|![iphonex-11 2-scrollable](https://user-images.githubusercontent.com/1753199/60411663-cb9fe280-9b9b-11e9-850e-22d03a1cd197.png)|
|iPad 2|9.3|![ipad2-9 3-justified](https://user-images.githubusercontent.com/1753199/60411668-d8bcd180-9b9b-11e9-958f-32578f867e42.png)|![ipad2-9 3-scrollable](https://user-images.githubusercontent.com/1753199/60411673-dce8ef00-9b9b-11e9-9e93-9788dd770a93.png)|

Closes #7733

components/Tabs/src/TabBarView/MDCTabBarView.m

@@ -49,6 +49,12 @@ @interface MDCTabBarView ()
 @property(nonnull, nonatomic, strong)
     NSMutableDictionary<NSNumber *, UIColor *> *stateToImageTintColor;
 
+/** The constraints for the justified layout style. */
+@property(nullable, nonatomic) NSArray<NSLayoutConstraint *> *justifiedLayoutConstraints;
+
+/** The constraints for the scrollable layout style. */
+@property(nullable, nonatomic) NSArray<NSLayoutConstraint *> *scrollableLayoutConstraints;
+
 /** The title font for bar items. */
 @property(nonnull, nonatomic, strong) NSMutableDictionary<NSNumber *, UIFont *> *stateToTitleFont;
 @end
@@ -73,6 +79,12 @@ - (instancetype)init {
     _containerView = [[UIStackView alloc] init];
     _containerView.axis = UILayoutConstraintAxisHorizontal;
     _containerView.translatesAutoresizingMaskIntoConstraints = NO;
+
+    // By deafult, inset the content within the safe area. This is generally the desired behavior,
+    // but clients can override it if they want.
+    if (@available(iOS 11.0, *)) {
+      [super setContentInsetAdjustmentBehavior:UIScrollViewContentInsetAdjustmentAlways];
+    }
     [self addSubview:_containerView];
   }
   return self;
@@ -120,6 +132,8 @@ - (void)setItems:(NSArray<UITabBarItem *> *)items {
     itemView.iconImageView.image = item.image;
     [itemView setContentCompressionResistancePriority:UILayoutPriorityRequired
                                               forAxis:UILayoutConstraintAxisHorizontal];
+    [itemView setContentCompressionResistancePriority:UILayoutPriorityRequired
+                                              forAxis:UILayoutConstraintAxisVertical];
     UITapGestureRecognizer *tapGesture =
         [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didTapItemView:)];
     [itemView addGestureRecognizer:tapGesture];
@@ -391,11 +405,22 @@ - (void)observeValueForKeyPath:(NSString *)keyPath
 - (void)layoutSubviews {
   [super layoutSubviews];
 
-  CGFloat availableWidth = CGRectGetWidth(self.bounds);
+  CGRect availableBounds = self.bounds;
+  if (@available(iOS 11.0, *)) {
+    availableBounds = UIEdgeInsetsInsetRect(availableBounds, self.safeAreaInsets);
+  }
+  CGFloat availableWidth = CGRectGetWidth(availableBounds);
   CGFloat requiredWidth = [self justifiedWidth];
   BOOL canBeJustified = availableWidth >= requiredWidth;
-  self.containerView.distribution = canBeJustified ? UIStackViewDistributionFillEqually
-                                                   : UIStackViewDistributionFillProportionally;
+  if (canBeJustified) {
+    [NSLayoutConstraint deactivateConstraints:self.scrollableLayoutConstraints];
+    self.containerView.distribution = UIStackViewDistributionFillEqually;
+    [NSLayoutConstraint activateConstraints:self.justifiedLayoutConstraints];
+  } else {
+    [NSLayoutConstraint deactivateConstraints:self.justifiedLayoutConstraints];
+    self.containerView.distribution = UIStackViewDistributionFillProportionally;
+    [NSLayoutConstraint activateConstraints:self.scrollableLayoutConstraints];
+  }
 
   if (!self.initialScrollDone) {
     self.initialScrollDone = YES;
@@ -424,12 +449,42 @@ - (void)updateConstraints {
     return;
   }
 
-  [self.containerView.leadingAnchor constraintEqualToAnchor:self.leadingAnchor].active = YES;
-  [self.containerView.trailingAnchor constraintEqualToAnchor:self.trailingAnchor].active = YES;
-  [self.containerView.widthAnchor constraintGreaterThanOrEqualToAnchor:self.widthAnchor].active =
-      YES;
-  [self.containerView.topAnchor constraintEqualToAnchor:self.topAnchor].active = YES;
-  [self.containerView.bottomAnchor constraintEqualToAnchor:self.bottomAnchor].active = YES;
+  if (@available(iOS 11.0, *)) {
+    self.justifiedLayoutConstraints = @[
+      [self.safeAreaLayoutGuide.leadingAnchor
+          constraintEqualToAnchor:self.containerView.leadingAnchor],
+      [self.safeAreaLayoutGuide.topAnchor constraintEqualToAnchor:self.containerView.topAnchor],
+      [self.safeAreaLayoutGuide.trailingAnchor
+          constraintEqualToAnchor:self.containerView.trailingAnchor],
+      [self.safeAreaLayoutGuide.bottomAnchor
+          constraintEqualToAnchor:self.containerView.bottomAnchor],
+    ];
+    self.scrollableLayoutConstraints = @[
+      [self.contentLayoutGuide.topAnchor constraintEqualToAnchor:self.containerView.topAnchor],
+      [self.contentLayoutGuide.bottomAnchor
+          constraintEqualToAnchor:self.containerView.bottomAnchor],
+      [self.contentLayoutGuide.leadingAnchor
+          constraintEqualToAnchor:self.containerView.leadingAnchor],
+      [self.contentLayoutGuide.trailingAnchor
+          constraintEqualToAnchor:self.containerView.trailingAnchor],
+      [self.contentLayoutGuide.widthAnchor constraintEqualToAnchor:self.containerView.widthAnchor],
+      [self.contentLayoutGuide.heightAnchor
+          constraintEqualToAnchor:self.containerView.heightAnchor],
+      // Ensures items are never larger than the bar.
+      [self.frameLayoutGuide.heightAnchor
+          constraintGreaterThanOrEqualToAnchor:self.containerView.heightAnchor],
+    ];
+  } else {
+    self.justifiedLayoutConstraints = @[
+      [self.heightAnchor constraintEqualToAnchor:self.containerView.heightAnchor],
+      [self.widthAnchor constraintEqualToAnchor:self.containerView.widthAnchor],
+    ];
+    self.scrollableLayoutConstraints = @[];
+    [self.leadingAnchor constraintEqualToAnchor:self.containerView.leadingAnchor].active = YES;
+    [self.topAnchor constraintEqualToAnchor:self.containerView.topAnchor].active = YES;
+    [self.trailingAnchor constraintEqualToAnchor:self.containerView.trailingAnchor].active = YES;
+    [self.bottomAnchor constraintEqualToAnchor:self.containerView.bottomAnchor].active = YES;
+  }
   self.containerViewConstraintsActive = YES;
 
   // Must always be called last according to the documentation.

components/Tabs/tests/snapshot/TabBarView/MDCTabBarViewSnapshotTests.m

@@ -31,6 +31,27 @@
 /** The maximum width of a tab bar item. */
 static const CGFloat kMaxItemWidth = 360;
 
+/** A test class that allows setting safe area insets. */
+@interface MDCTabBarViewSnapshotTestsSuperview : UIView
+/** Allows overriding the safe area insets. */
+@property(nonatomic, assign) UIEdgeInsets customSafeAreaInsets;
+@end
+
+@implementation MDCTabBarViewSnapshotTestsSuperview
+
+- (void)setCustomSafeAreaInsets:(UIEdgeInsets)customSafeAreaInsets {
+  _customSafeAreaInsets = customSafeAreaInsets;
+  if (@available(iOS 11.0, *)) {
+    [self safeAreaInsetsDidChange];
+  }
+}
+
+- (UIEdgeInsets)safeAreaInsets {
+  return _customSafeAreaInsets;
+}
+
+@end
+
 @interface MDCTabBarViewSnapshotTests : MDCSnapshotTestCase
 
 /** The view being snapshotted. */
@@ -83,6 +104,9 @@ - (void)tearDown {
 #pragma mark - Helpers
 
 - (void)generateSnapshotAndVerifyForView:(UIView *)view {
+  // Needed so that the stack view can be constrained correctly and then allow any "scrolling" to
+  // take place for the selected item to be visible.
+  [self.tabBarView layoutIfNeeded];
   UIView *snapshotView = [view mdc_addToBackgroundView];
   [self snapshotVerifyView:snapshotView];
 }
@@ -387,6 +411,100 @@ - (void)testLayoutBehaviorWhenBoundsExceedsIntrinsicContentSizeAndRemainsLessTha
   [self generateSnapshotAndVerifyForView:self.tabBarView];
 }
 
+#pragma mark - Safe Area Support
+
+- (void)testSafeAreaTopAndLeftInsetsForJustifiedLayoutStyle {
+  // Given
+  UITabBarItem *item1 = [[UITabBarItem alloc] initWithTitle:@"1" image:nil tag:0];
+  UITabBarItem *item2 = [[UITabBarItem alloc] initWithTitle:@"2" image:nil tag:2];
+  MDCTabBarViewSnapshotTestsSuperview *superview =
+      [[MDCTabBarViewSnapshotTestsSuperview alloc] init];
+  [superview addSubview:self.tabBarView];
+  self.tabBarView.items = @[ item1, item2 ];
+  [self.tabBarView setSelectedItem:item2 animated:NO];
+
+  // When
+  superview.customSafeAreaInsets = UIEdgeInsetsMake(16, 44, 0, 0);
+  [self.tabBarView sizeToFit];
+  superview.bounds = CGRectMake(0, 0, CGRectGetWidth(self.tabBarView.bounds),
+                                CGRectGetHeight(self.tabBarView.bounds));
+  self.tabBarView.center =
+      CGPointMake(CGRectGetMidX(superview.bounds), CGRectGetMidY(superview.bounds));
+
+  // Then
+  [self generateSnapshotAndVerifyForView:superview];
+}
+
+- (void)testSafeAreaRightAndBottomInsetsForJustifiedLayoutStyle {
+  // Given
+  UITabBarItem *item1 = [[UITabBarItem alloc] initWithTitle:@"1" image:nil tag:0];
+  UITabBarItem *item2 = [[UITabBarItem alloc] initWithTitle:@"2" image:nil tag:1];
+  MDCTabBarViewSnapshotTestsSuperview *superview =
+      [[MDCTabBarViewSnapshotTestsSuperview alloc] init];
+  [superview addSubview:self.tabBarView];
+  self.tabBarView.items = @[ item1, item2 ];
+  [self.tabBarView setSelectedItem:item2 animated:NO];
+
+  // When
+  superview.customSafeAreaInsets = UIEdgeInsetsMake(0, 0, 16, 44);
+  [self.tabBarView sizeToFit];
+  superview.bounds = CGRectMake(0, 0, CGRectGetWidth(self.tabBarView.bounds),
+                                CGRectGetHeight(self.tabBarView.bounds));
+  self.tabBarView.center =
+      CGPointMake(CGRectGetMidX(superview.bounds), CGRectGetMidY(superview.bounds));
+
+  // Then
+  [self generateSnapshotAndVerifyForView:superview];
+}
+
+- (void)testSafeAreaTopAndLeftInsetsForScrollableLayoutStyle {
+  // Given
+  UITabBarItem *item1 = [[UITabBarItem alloc] initWithTitle:@"1" image:nil tag:0];
+  UITabBarItem *item2 = [[UITabBarItem alloc] initWithTitle:@"2" image:nil tag:1];
+  UITabBarItem *item3 = [[UITabBarItem alloc] initWithTitle:@"3" image:nil tag:2];
+  UITabBarItem *item4 = [[UITabBarItem alloc] initWithTitle:@"4" image:nil tag:3];
+  MDCTabBarViewSnapshotTestsSuperview *superview =
+      [[MDCTabBarViewSnapshotTestsSuperview alloc] init];
+  [superview addSubview:self.tabBarView];
+  self.tabBarView.items = @[ item1, item2, item3, item4 ];
+  [self.tabBarView setSelectedItem:item2 animated:NO];
+
+  // When
+  superview.customSafeAreaInsets = UIEdgeInsetsMake(16, 44, 0, 0);
+  self.tabBarView.bounds = CGRectMake(0, 0, kMinItemWidth * 2.5, kExpectedHeightTitlesOrIconsOnly);
+  superview.bounds = CGRectMake(0, 0, CGRectGetWidth(self.tabBarView.bounds),
+                                CGRectGetHeight(self.tabBarView.bounds));
+  self.tabBarView.center =
+      CGPointMake(CGRectGetMidX(superview.bounds), CGRectGetMidY(superview.bounds));
+
+  // Then
+  [self generateSnapshotAndVerifyForView:superview];
+}
+
+- (void)testSafeAreaRightAndBottomInsetsForScrollableLayoutStyle {
+  // Given
+  UITabBarItem *item1 = [[UITabBarItem alloc] initWithTitle:@"1" image:nil tag:0];
+  UITabBarItem *item2 = [[UITabBarItem alloc] initWithTitle:@"2" image:nil tag:1];
+  UITabBarItem *item3 = [[UITabBarItem alloc] initWithTitle:@"3" image:nil tag:2];
+  UITabBarItem *item4 = [[UITabBarItem alloc] initWithTitle:@"4" image:nil tag:3];
+  MDCTabBarViewSnapshotTestsSuperview *superview =
+      [[MDCTabBarViewSnapshotTestsSuperview alloc] init];
+  [superview addSubview:self.tabBarView];
+  self.tabBarView.items = @[ item1, item2, item3, item4 ];
+  [self.tabBarView setSelectedItem:item4 animated:NO];
+
+  // When
+  superview.customSafeAreaInsets = UIEdgeInsetsMake(0, 0, 16, 44);
+  self.tabBarView.bounds = CGRectMake(0, 0, kMinItemWidth * 2.5, kExpectedHeightTitlesOrIconsOnly);
+  superview.bounds = CGRectMake(0, 0, CGRectGetWidth(self.tabBarView.bounds),
+                                CGRectGetHeight(self.tabBarView.bounds));
+  self.tabBarView.center =
+      CGPointMake(CGRectGetMidX(superview.bounds), CGRectGetMidY(superview.bounds));
+
+  // Then
+  [self generateSnapshotAndVerifyForView:superview];
+}
+
 #pragma mark - MDCTabBarView Properties
 
 - (void)testSetTitleColorForExplicitItemStates {