Add new item layout to align image and text to top with padding in between, and a new property to manage which image-and-text item layout to use.

PiperOrigin-RevId: 735890394

Author: Nobody

components/Tabs/src/TabBarView/MDCTabBarView.h

@@ -331,6 +331,19 @@ __attribute__((objc_subclassing_restricted)) @interface MDCTabBarView : UIScroll
  */
 @property(nonatomic) CGPoint badgeOffset;
 
+/**
+ * Whether or not to enforce padding between the tab bar item's image and title.
+ *
+ * If set to @c YES, the tab bar item's image and title will be top-aligned with the
+ * @c itemImageTitlePadding in between.
+ *
+ * If set to @c NO, the tab bar item's image will be aligned to the top while the title will be
+ * aligned to the bottom inside the edge insets.
+ *
+ * Defaults to @c NO.
+ */
+@property(nonatomic) BOOL enforceTextAndImagePadding;
+
 @end
 
 #if MDC_AVAILABLE_SDK_IOS(13_0) && !TARGET_OS_TV

components/Tabs/src/TabBarView/MDCTabBarView.m

@@ -19,7 +19,6 @@
 #import "private/MDCTabBarViewItemView.h"
 #import "private/MDCTabBarViewItemViewDelegate.h"
 #import "private/MDCTabBarViewPrivateIndicatorContext.h"
-#import "MDCAvailability.h"
 #import "MDCBadgeAppearance.h"
 #import "MDCRippleTouchController.h"
 #import "MDCRippleView.h"
@@ -89,11 +88,9 @@
 static NSString *const kBadgeValueKeyPath = @"badgeValue";
 static NSString *const kBadgeColorKeyPath = @"badgeColor";
 
-#ifdef __IPHONE_13_4
 @interface MDCTabBarView (PointerInteractions) <UIPointerInteractionDelegate,
                                                 MDCTabBarViewItemViewDelegate>
 @end
-#endif
 
 @interface MDCTabBarView ()
 
@@ -131,14 +128,11 @@ The content padding (as UIEdgeInsets) for each layout style. The layout style is
 
 @property(nonatomic) BOOL useIndividualItemViewContentInsets;
 
-#if defined(__IPHONE_13_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0)
 /**
  The last large content viewer item displayed by the content viewer while the interaction is
  running. When the interaction ends this property is nil.
  */
-@property(nonatomic, nullable) id<UILargeContentViewerItem> lastLargeContentViewerItem
-    NS_AVAILABLE_IOS(13_0);
-#endif  // defined(__IPHONE_13_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0)
+@property(nonatomic, nullable) id<UILargeContentViewerItem> lastLargeContentViewerItem;
 
 @end
 
@@ -182,6 +176,7 @@ - (void)commonMDCTabBarViewInit {
   self.backgroundColor = UIColor.whiteColor;
   self.showsHorizontalScrollIndicator = NO;
 
+  _enforceTextAndImagePadding = NO;
   _itemBadgeAppearance = [[MDCBadgeAppearance alloc] init];
   _itemBadgeAppearance.textColor = UIColor.whiteColor;
   _itemBadgeAppearance.font = [UIFont systemFontOfSize:kBadgeFontSize];
@@ -218,13 +213,9 @@ - (void)commonMDCTabBarViewInit {
   // gesture.
   self.scrollsToTop = NO;
 
-#if defined(__IPHONE_13_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0)
-  if (@available(iOS 13, *)) {
-    // If clients report conflicting gesture recognizers please see proposed solution in the
-    // internal document: go/mdc-ios-bottomnavigation-largecontentvieweritem
-    [self addInteraction:[[UILargeContentViewerInteraction alloc] initWithDelegate:self]];
-  }
-#endif  // defined(__IPHONE_13_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0)
+  // If clients report conflicting gesture recognizers please see proposed solution in the
+  // internal document: go/mdc-ios-bottomnavigation-largecontentvieweritem
+  [self addInteraction:[[UILargeContentViewerInteraction alloc] initWithDelegate:self]];
 }
 
 - (void)dealloc {
@@ -280,18 +271,6 @@ - (void)setItemViewContentInsets:(UIEdgeInsets)itemViewContentInsets {
   _useIndividualItemViewContentInsets = NO;
 }
 
-- (void)setItemViewContentInsetsTextOnly:(UIEdgeInsets)itemViewContentInsetsTextOnly {
-  _itemViewContentInsetsTextOnly = itemViewContentInsetsTextOnly;
-}
-
-- (void)setItemViewContentInsetsImageOnly:(UIEdgeInsets)itemViewContentInsetsImageOnly {
-  _itemViewContentInsetsImageOnly = itemViewContentInsetsImageOnly;
-}
-
-- (void)setItemViewContentInsetsTextAndImage:(UIEdgeInsets)itemViewContentInsetsTextAndImage {
-  _itemViewContentInsetsTextAndImage = itemViewContentInsetsTextAndImage;
-}
-
 - (void)setMinItemHeightTitleAndImage:(CGFloat)minItemHeightTitleAndImage {
   _minItemHeightTitleAndImage = minItemHeightTitleAndImage;
   for (UIView *itemView in self.itemViews) {
@@ -310,6 +289,15 @@ - (void)setItemImageTitlePadding:(CGFloat)itemImageTitlePadding {
   }
 }
 
+- (void)setEnforceTextAndImagePadding:(BOOL)enforceTextAndImagePadding {
+  _enforceTextAndImagePadding = enforceTextAndImagePadding;
+  for (UIView *itemView in self.itemViews) {
+    if ([itemView isKindOfClass:[MDCTabBarViewItemView class]]) {
+      ((MDCTabBarViewItemView *)itemView).enforceTextAndImagePadding = _enforceTextAndImagePadding;
+    }
+  }
+}
+
 - (void)setItems:(NSArray<UITabBarItem *> *)items {
   NSParameterAssert(items);
 
@@ -358,31 +346,17 @@ - (void)setItems:(NSArray<UITabBarItem *> *)items {
       mdcItemView.minHeightTitleAndImage = self.minItemHeightTitleAndImage;
       mdcItemView.imageTitlePadding = self.itemImageTitlePadding;
       mdcItemView.badgeOffset = self.badgeOffset;
-
-#if defined(__IPHONE_13_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0)
-      if (@available(iOS 13, *)) {
-        mdcItemView.largeContentImageInsets = item.largeContentSizeImageInsets;
-        mdcItemView.largeContentImage = item.largeContentSizeImage;
-      }
-#endif  // defined(__IPHONE_13_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0)
-
+      mdcItemView.enforceTextAndImagePadding = self.enforceTextAndImagePadding;
+      mdcItemView.largeContentImageInsets = item.largeContentSizeImageInsets;
+      mdcItemView.largeContentImage = item.largeContentSizeImage;
       itemView = mdcItemView;
     }
     UITapGestureRecognizer *tapGesture =
         [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didTapItemView:)];
     [itemView addGestureRecognizer:tapGesture];
 
-#ifdef __IPHONE_13_4
-    if (@available(iOS 13.4, *)) {
-      // Because some iOS 13 betas did not have the UIPointerInteraction class, we need to verify
-      // that it exists before attempting to use it.
-      if (NSClassFromString(@"UIPointerInteraction")) {
-        UIPointerInteraction *pointerInteraction =
-            [[UIPointerInteraction alloc] initWithDelegate:self];
-        [itemView addInteraction:pointerInteraction];
-      }
-    }
-#endif
+    UIPointerInteraction *pointerInteraction = [[UIPointerInteraction alloc] initWithDelegate:self];
+    [itemView addInteraction:pointerInteraction];
 
     [self addSubview:itemView];
     [itemViews addObject:itemView];
@@ -835,18 +809,12 @@ - (void)observeValueForKeyPath:(nullable NSString *)keyPath
         tabBarItemView.accessibilityTraits =
             (tabBarItemView.accessibilityTraits | UIAccessibilityTraitSelected);
       }
-#if defined(__IPHONE_13_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0)
     } else if ([keyPath isEqualToString:NSStringFromSelector(@selector(largeContentSizeImage))]) {
-      if (@available(iOS 13.0, *)) {
-        tabBarItemView.largeContentImage = newValue;
-      }
+      tabBarItemView.largeContentImage = newValue;
     } else if ([keyPath
                    isEqualToString:NSStringFromSelector(@selector(largeContentSizeImageInsets))]) {
-      if (@available(iOS 13.0, *)) {
-        tabBarItemView.largeContentImageInsets = [newValue UIEdgeInsetsValue];
-      }
+      tabBarItemView.largeContentImageInsets = [newValue UIEdgeInsetsValue];
     }
-#endif  // defined(__IPHONE_13_0) && (__IPHONE_OS_VERSION_MAX_ALLOWED >= __IPHONE_13_0)
   } else {
     [super observeValueForKeyPath:keyPath ofObject:object change:change context:context];
   }
@@ -1271,18 +1239,14 @@ - (void)scrollToItem:(UITabBarItem *)item animated:(BOOL)animated {
 }
 
 - (void)invalidateInteractionsForItemViews {
-#ifdef __IPHONE_13_4
-  if (@available(iOS 13.4, *)) {
-    for (MDCTabBarView *view in self.itemViews) {
-      for (id<UIInteraction> interaction in view.interactions) {
-        if ([interaction isKindOfClass:[UIPointerInteraction class]]) {
-          UIPointerInteraction *pointerInteraction = (UIPointerInteraction *)interaction;
-          [pointerInteraction invalidate];
-        }
+  for (MDCTabBarView *view in self.itemViews) {
+    for (id<UIInteraction> interaction in view.interactions) {
+      if ([interaction isKindOfClass:[UIPointerInteraction class]]) {
+        UIPointerInteraction *pointerInteraction = (UIPointerInteraction *)interaction;
+        [pointerInteraction invalidate];
       }
     }
   }
-#endif
 }
 
 - (CGRect)estimatedFrameForItemAtIndex:(NSUInteger)index {
@@ -1520,9 +1484,8 @@ - (UIView *)selectedItemView {
 
 #pragma mark - UIPointerInteractionDelegate
 
-#ifdef __IPHONE_13_4
 - (nullable UIPointerStyle *)pointerInteraction:(UIPointerInteraction *)interaction
-                                 styleForRegion:(UIPointerRegion *)region API_AVAILABLE(ios(13.4)) {
+                                 styleForRegion:(UIPointerRegion *)region {
   UIPointerStyle *pointerStyle = nil;
   if (interaction.view) {
     UITargetedPreview *targetedPreview = [[UITargetedPreview alloc] initWithView:interaction.view];
@@ -1532,7 +1495,6 @@ - (nullable UIPointerStyle *)pointerInteraction:(UIPointerInteraction *)interact
   }
   return pointerStyle;
 }
-#endif
 
 #pragma mark - UILargeContentViewerInteractionDelegate
 
@@ -1548,11 +1510,9 @@ - (UIView *)itemViewForPoint:(CGPoint)point {
   return nil;
 }
 
-#if MDC_AVAILABLE_SDK_IOS(13_0)
 - (nullable id<UILargeContentViewerItem>)largeContentViewerInteraction:
                                              (UILargeContentViewerInteraction *)interaction
-                                                           itemAtPoint:(CGPoint)point
-    NS_AVAILABLE_IOS(13_0) {
+                                                           itemAtPoint:(CGPoint)point {
   if (!CGRectContainsPoint(self.bounds, point)) {
     // The touch has wandered outside of the view. Do not display the content viewer.
     if ([self.lastLargeContentViewerItem isKindOfClass:[MDCTabBarViewItemView class]]) {
@@ -1590,7 +1550,7 @@ - (UIView *)itemViewForPoint:(CGPoint)point {
 
 - (void)largeContentViewerInteraction:(UILargeContentViewerInteraction *)interaction
                          didEndOnItem:(nullable id<UILargeContentViewerItem>)item
-                              atPoint:(CGPoint)point NS_AVAILABLE_IOS(13_0) {
+                              atPoint:(CGPoint)point {
   if (item) {
     for (NSUInteger i = 0; i < self.items.count; i++) {
       UIView *itemView = self.itemViews[i];
@@ -1607,7 +1567,6 @@ - (void)largeContentViewerInteraction:(UILargeContentViewerInteraction *)interac
 
   self.lastLargeContentViewerItem = nil;
 }
-#endif  // MDC_AVAILABLE_SDK_IOS(13_0)
 
 @end
 

components/Tabs/src/TabBarView/private/MDCTabBarViewItemView.h

@@ -121,6 +121,19 @@ NS_ASSUME_NONNULL_BEGIN
  */
 @property(nonatomic) CGFloat imageTitlePadding;
 
+/**
+ * Whether or not to enforce padding between the tab bar item's image and title.
+ *
+ * If set to @c YES, the tab bar item's image and title will be top-aligned with the
+ * @c itemImageTitlePadding in between.
+ *
+ * If set to @c NO, the tab bar item's image will be aligned to the top while the title will be
+ * aligned to the bottom inside the edge insets.
+ *
+ * Defaults to @c NO.
+ */
+@property(nonatomic) BOOL enforceTextAndImagePadding;
+
 @end
 
 NS_ASSUME_NONNULL_END

components/Tabs/src/TabBarView/private/MDCTabBarViewItemView.m

@@ -115,6 +115,7 @@ - (void)commonMDCTabBarViewItemViewInit {
   _iconSize = CGSizeZero;
   _minHeightTitleAndImage = kMinHeightTitleAndImage;
   _imageTitlePadding = kImageTitlePadding;
+  _enforceTextAndImagePadding = NO;
 }
 
 - (CGPoint)badgeCenterFromFrame:(CGRect)frame isRTL:(BOOL)isRTL {
@@ -245,14 +246,23 @@ - (void)layoutTitleLabelFrame:(CGRect *)titleLabelFrame
     return;
   }
 
-  // Now position the label from the bottom.
+  // Now position the label in the remaining space.
   CGSize availableLabelSize =
       CGSizeMake(contentSize.width,
                  contentSize.height - (CGRectGetHeight(imageViewFrame) + self.imageTitlePadding));
   CGSize finalLabelSize = [self.titleLabel sizeThatFits:availableLabelSize];
-  CGRect titleFrame = CGRectMake(CGRectGetMidX(contentFrame) - (finalLabelSize.width / 2),
-                                 CGRectGetMaxY(contentFrame) - finalLabelSize.height,
-                                 finalLabelSize.width, finalLabelSize.height);
+  CGFloat titleFrameX = CGRectGetMidX(contentFrame) - (finalLabelSize.width / 2);
+  CGRect titleFrame;
+  if (self.enforceTextAndImagePadding) {
+    // Position the label below the image and padding.
+    titleFrame = CGRectMake(
+        titleFrameX, CGRectGetMinY(contentFrame) + imageFinalSize.height + self.imageTitlePadding,
+        finalLabelSize.width, finalLabelSize.height);
+  } else {
+    // Position the label from bottom.
+    titleFrame = CGRectMake(titleFrameX, CGRectGetMaxY(contentFrame) - finalLabelSize.height,
+                            finalLabelSize.width, finalLabelSize.height);
+  }
   titleFrame = MDCRectAlignToScale(titleFrame, self.window.screen.scale);
   *titleLabelFrame = titleFrame;
 }