Resized the image to a square format with UIImageSymbolConfiguration

PiperOrigin-RevId: 720248847

Author: Nobody

components/BottomNavigation/src/MDCBottomNavigationBar.h

@@ -184,6 +184,11 @@ typedef NS_ENUM(NSInteger, MDCBottomNavigationBarAlignment) {
  */
 @property(nonatomic, assign) BOOL showsSelectionIndicator;
 
+/**
+ If true, the tab icons will be placed in a square container for layout.
+*/
+@property(nonatomic, assign) BOOL enableSquareImages;
+
 /**
  Size of the active indicator.
 

components/BottomNavigation/src/MDCBottomNavigationBar.m

@@ -913,7 +913,6 @@ - (void)setItems:(NSArray<UITabBarItem *> *)items {
   for (NSUInteger i = 0; i < items.count; i++) {
     MDCBottomNavigationItemView *itemView =
         [[MDCBottomNavigationItemView alloc] initWithFrame:CGRectZero];
-
     itemView.rippleTouchController.delegate = self;
     itemView.selected = NO;
     itemView.displayTitleInVerticalLayout = self.displayItemTitlesInVerticalLayout;
@@ -1342,6 +1341,13 @@ - (void)configureTitleStateForItemView:(MDCBottomNavigationItemView *)itemView {
   }
 }
 
+- (void)setEnableSquareImages:(BOOL)enableSquareImages {
+  _enableSquareImages = enableSquareImages;
+  for (MDCBottomNavigationItemView *itemView in self.itemViews) {
+    itemView.enableSquareImages = enableSquareImages;
+  }
+}
+
 @end
 
 NS_ASSUME_NONNULL_END

components/BottomNavigation/src/private/MDCBottomNavigationItemView.h

@@ -45,6 +45,7 @@ __attribute__((objc_subclassing_restricted))
 @property(nonatomic, strong, nullable) UIImage *image;
 @property(nonatomic, strong, nullable) UIImage *selectedImage;
 @property(nonatomic, strong) UIImageView *iconImageView;
+@property(nonatomic, strong) UIView *iconContainerView;
 
 @property(nonatomic, strong, nullable) UIColor *selectedItemTintColor;
 @property(nonatomic, strong, nullable) UIColor *unselectedItemTintColor;
@@ -63,6 +64,11 @@ __attribute__((objc_subclassing_restricted))
 /** The flag to enable displaying titles vertical layout mode. */
 @property(nonatomic) BOOL displayTitleInVerticalLayout;
 
+/**
+ If true, the tab icon will be placed in a square container for layout.
+*/
+@property(nonatomic, assign) BOOL enableSquareImages;
+
 /**
  Returns a rect that is the union of all visible content views, inset by
  kMDCButtonNavigationItemViewPointerEffectHoverRectInset. This rect will never be larger than the

components/BottomNavigation/src/private/MDCBottomNavigationItemView.m

@@ -13,6 +13,7 @@
 // limitations under the License.
 
 #import <CoreGraphics/CoreGraphics.h>
+#import <UIKit/UIKit.h>
 
 #import "MDCBottomNavigationItemView.h"
 
@@ -28,7 +29,6 @@
 // CGFloat doesn't lose precision.
 static const CGFloat kMaxSizeDimension = 1000000;
 static const CGFloat MDCBottomNavigationItemViewRippleOpacity = (CGFloat)0.150;
-static const CGFloat MDCBottomNavigationItemViewTitleFontSize = 12;
 
 // Selection indicator animation details.
 static const CGFloat kSelectionIndicatorTransformAnimationDuration = 0.17;
@@ -115,7 +115,7 @@ - (instancetype)initWithFrame:(CGRect)frame {
 
     _label = [[UILabel alloc] initWithFrame:CGRectZero];
     _label.text = _title;
-    _label.font = [UIFont systemFontOfSize:MDCBottomNavigationItemViewTitleFontSize];
+    _label.font = [UIFont systemFontOfSize:12];
     _label.textAlignment = NSTextAlignmentCenter;
     _label.textColor = _selectedItemTitleColor;
     _label.lineBreakMode = NSLineBreakByTruncatingTail;
@@ -128,12 +128,11 @@ - (instancetype)initWithFrame:(CGRect)frame {
 
     _badge = [[MDCBadgeView alloc] initWithFrame:CGRectZero];
     _badge.isAccessibilityElement = NO;
-
     [_button addSubview:_iconImageView];
     [_button addSubview:_label];
     [_button addSubview:_badge];
     _badge.hidden = YES;
-
+    _iconContainerView = [[UIView alloc] initWithFrame:CGRectZero];
     _rippleTouchController = [[MDCRippleTouchController alloc] initWithView:self];
     _rippleTouchController.rippleView.rippleStyle = MDCRippleStyleUnbounded;
   }
@@ -170,7 +169,12 @@ - (CGSize)sizeThatFitsForVerticalLayout {
   }
 
   CGSize maxSize = CGSizeMake(kMaxSizeDimension, kMaxSizeDimension);
-  CGSize iconSize = [self.iconImageView sizeThatFits:maxSize];
+  CGSize iconSize;
+  if (_enableSquareImages) {
+    iconSize = CGSizeMake(24, 24);
+  } else {
+    iconSize = [self.iconImageView sizeThatFits:maxSize];
+  }
   CGRect iconFrame = CGRectMake(0, 0, iconSize.width, iconSize.height);
   CGSize badgeSize = [_badge sizeThatFits:maxSize];
   CGPoint badgeCenter = [self badgeCenterFromIconFrame:iconFrame isRTL:NO];
@@ -194,7 +198,12 @@ - (CGSize)sizeThatFitsForHorizontalLayout {
   }
 
   CGSize maxSize = CGSizeMake(kMaxSizeDimension, kMaxSizeDimension);
-  CGSize iconSize = [self.iconImageView sizeThatFits:maxSize];
+  CGSize iconSize;
+  if (_enableSquareImages) {
+    iconSize = CGSizeMake(24, 24);
+  } else {
+    iconSize = [self.iconImageView sizeThatFits:maxSize];
+  }
   CGRect iconFrame = CGRectMake(0, 0, iconSize.width, iconSize.height);
   CGSize badgeSize = [_badge sizeThatFits:maxSize];
   CGPoint badgeCenter = [self badgeCenterFromIconFrame:iconFrame isRTL:NO];
@@ -234,7 +243,12 @@ - (void)calculateVerticalLayoutInBounds:(CGRect)contentBounds
 
   // Determine the intrinsic size of the label, icon, and combined content
   CGRect contentBoundingRect = CGRectStandardize(contentBounds);
-  CGSize iconImageViewSize = [self.iconImageView sizeThatFits:contentBoundingRect.size];
+  CGSize iconImageViewSize;
+  if (_enableSquareImages) {
+    iconImageViewSize = CGSizeMake(24, 24);
+  } else {
+    iconImageViewSize = [self.iconImageView sizeThatFits:contentBoundingRect.size];
+  }
   CGSize labelSize = [self.label sizeThatFits:contentBoundingRect.size];
   CGFloat iconHeight = iconImageViewSize.height;
   CGFloat labelHeight = labelSize.height;
@@ -245,12 +259,11 @@ - (void)calculateVerticalLayoutInBounds:(CGRect)contentBounds
 
   // Determine the position of the label and icon
   CGFloat centerX = CGRectGetMidX(contentBoundingRect);
-  CGFloat iconImageViewCenterY =
-      MAX(floor(CGRectGetMidY(contentBoundingRect) - totalContentHeight / 2 +
-                   iconHeight / 2),  // Content centered
-          floor(CGRectGetMinY(contentBoundingRect) +
-                   iconHeight / 2)  // Pinned to top of bounding rect.
-      );
+  CGFloat iconImageViewCenterY = MAX(
+      floor(CGRectGetMidY(contentBoundingRect) - totalContentHeight / 2 +
+            iconHeight / 2),                                      // Content centered
+      floor(CGRectGetMinY(contentBoundingRect) + iconHeight / 2)  // Pinned to top of bounding rect.
+  );
   CGPoint iconImageViewCenter = CGPointMake(centerX, iconImageViewCenterY);
   // Ignore the horizontal titlePositionAdjustment in a vertical layout to match UITabBar behavior.
   CGFloat centerY;
@@ -290,7 +303,12 @@ - (void)calculateHorizontalLayoutInBounds:(CGRect)contentBounds
   }
   // Determine the intrinsic size of the label and icon
   CGRect contentBoundingRect = CGRectStandardize(contentBounds);
-  CGSize iconImageViewSize = [self.iconImageView sizeThatFits:contentBoundingRect.size];
+  CGSize iconImageViewSize;
+  if (_enableSquareImages) {
+    iconImageViewSize = CGSizeMake(24, 24);
+  } else {
+    iconImageViewSize = [self.iconImageView sizeThatFits:contentBoundingRect.size];
+  }
   CGSize maxLabelSize = CGSizeMake(
       contentBoundingRect.size.width - self.contentHorizontalMargin - iconImageViewSize.width,
       contentBoundingRect.size.height);
@@ -373,13 +391,21 @@ - (void)centerLayoutAnimated:(BOOL)animated {
     if (animated) {
       [UIView animateWithDuration:kMDCBottomNavigationItemViewSelectionAnimationDuration
                        animations:^(void) {
-                         self.iconImageView.center = iconImageViewCenter;
+                         if (_enableSquareImages) {
+                           self.iconContainerView.center = iconImageViewCenter;
+                         } else {
+                           self.iconImageView.center = iconImageViewCenter;
+                         }
                          _badge.center =
                              [self badgeCenterFromIconFrame:CGRectStandardize(iconImageViewFrame)
                                                       isRTL:isRTL];
                        }];
     } else {
-      self.iconImageView.center = iconImageViewCenter;
+      if (_enableSquareImages) {
+        self.iconContainerView.center = iconImageViewCenter;
+      } else {
+        self.iconImageView.center = iconImageViewCenter;
+      }
       _badge.center = [self badgeCenterFromIconFrame:CGRectStandardize(iconImageViewFrame)
                                                isRTL:isRTL];
     }
@@ -390,7 +416,12 @@ - (void)centerLayoutAnimated:(BOOL)animated {
     } else {
       self.label.textAlignment = NSTextAlignmentRight;
     }
-    self.iconImageView.center = iconImageViewCenter;
+    if (_enableSquareImages) {
+      self.iconContainerView.center = iconImageViewCenter;
+    } else {
+      self.iconImageView.center = iconImageViewCenter;
+    }
+    self.iconContainerView.center = iconImageViewCenter;
     _badge.center = [self badgeCenterFromIconFrame:CGRectStandardize(iconImageViewFrame)
                                              isRTL:isRTL];
   }
@@ -621,9 +652,15 @@ - (void)setSelectedItemTitleColor:(nullable UIColor *)selectedItemTitleColor {
 
 - (void)setImage:(nullable UIImage *)image {
   _image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
-
   // _image updates unselected state
   // _image updates selected state IF there is no selectedImage
+  if (image == nil) {
+    self.iconContainerView.frame = CGRectZero;
+    return;
+  }
+  if (_enableSquareImages) {
+    [self setupIconContainerView];
+  }
   if (!self.selected || (self.selected && !self.selectedImage)) {
     self.iconImageView.image = _image;
     self.iconImageView.tintColor =
@@ -737,7 +774,11 @@ - (void)setShowsSelectionIndicator:(BOOL)showsSelectionIndicator {
     _selectionIndicator.backgroundColor = _selectionIndicatorColor;
     _selectionIndicator.hidden = !_selected;
     [self commitSelectionIndicatorState];
-    [self.button insertSubview:_selectionIndicator belowSubview:_iconImageView];
+    if (_enableSquareImages) {
+      [self.button insertSubview:_selectionIndicator belowSubview:_iconContainerView];
+    } else {
+      [self.button insertSubview:_selectionIndicator belowSubview:_iconImageView];
+    }
   } else {
     [_selectionIndicator removeFromSuperview];
     _selectionIndicator = nil;
@@ -973,16 +1014,27 @@ - (CGPoint)iconPosition {
   CGPoint midPoint = [self midPoint];
   CGFloat indicatorMidX = CGRectGetMidX(_selectionIndicator.frame);
 
-  CGFloat iconX = indicatorMidX - CGRectGetMidX(_iconImageView.bounds);
-  CGFloat iconY = midPoint.y + (_selectionIndicatorSize.height * 0.5) -
-                  CGRectGetMidY(_iconImageView.bounds) + kIconVerticalOffset;
-
+  CGFloat iconX;
+  CGFloat iconY;
+  if (_enableSquareImages) {
+    iconX = indicatorMidX - CGRectGetMidX(_iconContainerView.bounds);
+    iconY = midPoint.y + (_selectionIndicatorSize.height * 0.5) -
+            CGRectGetMidY(_iconContainerView.bounds) + kIconVerticalOffset;
+  } else {
+    iconX = indicatorMidX - CGRectGetMidX(_iconImageView.bounds);
+    iconY = midPoint.y + (_selectionIndicatorSize.height * 0.5) -
+            CGRectGetMidY(_iconImageView.bounds) + kIconVerticalOffset;
+  }
   return CGPointMake(iconX, iconY);
 }
 
 - (CGSize)iconSize {
-  CGSize maxSize = CGSizeMake(kMaxSizeDimension, kMaxSizeDimension);
-  return [_iconImageView sizeThatFits:maxSize];
+  if (_enableSquareImages) {
+    return _iconContainerView.frame.size;
+  } else {
+    CGSize maxSize = CGSizeMake(kMaxSizeDimension, kMaxSizeDimension);
+    return [_iconImageView sizeThatFits:maxSize];
+  }
 }
 
 #pragma mark - Anchored Label
@@ -1045,7 +1097,11 @@ - (CGFloat)labelXForHorizontalLayoutWithRTLState:(BOOL)isRTL {
 
 - (CGFloat)labelYForHorizontalLayout {
   CGPoint midPoint = [self midPoint];
-  return midPoint.y + CGRectGetMidY(_iconImageView.bounds);
+  if (_enableSquareImages) {
+    return midPoint.y + CGRectGetMidY(_iconContainerView.bounds);
+  } else {
+    return midPoint.y + CGRectGetMidY(_iconImageView.bounds);
+  }
 }
 
 #pragma mark - Branched anchored layout methods
@@ -1105,7 +1161,11 @@ - (void)centerAnchoredLayoutVertical {
   CGFloat iconY = iconPosition.y;
   CGSize iconSize = [self iconSize];
   CGRect iconFrame = (CGRectMake(iconX, iconY, iconSize.width, iconSize.height));
-  _iconImageView.frame = iconFrame;
+  if (_enableSquareImages) {
+    _iconContainerView.frame = iconFrame;
+  } else {
+    _iconImageView.frame = iconFrame;
+  }
 
   CGSize labelSize = [self labelSize];
   CGRect adjustedLabelBounds = CGRectMake(0, 0, labelSize.width, labelSize.height);
@@ -1139,8 +1199,11 @@ - (void)centerAnchoredLayoutHorizontal {
   CGFloat iconY = iconPosition.y;
   CGSize iconSize = [self iconSize];
   CGRect iconFrame = CGRectIntegral(CGRectMake(iconX, iconY, iconSize.width, iconSize.height));
-  _iconImageView.frame = iconFrame;
-
+  if (_enableSquareImages) {
+    _iconContainerView.frame = iconFrame;
+  } else {
+    _iconImageView.frame = iconFrame;
+  }
   CGFloat labelX = [self labelXForHorizontalLayoutWithRTLState:isRTL];
   CGFloat labelY = [self labelYForHorizontalLayout];
   if (self.enableVerticalLayout) {
@@ -1190,6 +1253,45 @@ - (BOOL)isTitleHiddenInAnchoredLayout {
           _titleVisibility == MDCBottomNavigationBarTitleVisibilityNever);
 }
 
+- (void)setEnableSquareImages:(BOOL)enableSquareImages {
+  if (_enableSquareImages == enableSquareImages) {
+    return;
+  }
+  _enableSquareImages = enableSquareImages;
+  if (_enableSquareImages) {
+    [self setupIconContainerView];
+  } else {
+    _iconImageView.translatesAutoresizingMaskIntoConstraints = YES;
+    [_iconContainerView removeFromSuperview];
+    [_button addSubview:_iconImageView];
+  }
+  [_button bringSubviewToFront:_badge];
+}
+
+- (void)setupIconContainerView {
+  if (!_enableSquareImages) {
+    return;
+  }
+  _iconContainerView.userInteractionEnabled = NO;
+  [_iconContainerView addSubview:_iconImageView];
+  [_button addSubview:_iconContainerView];
+  _iconImageView.translatesAutoresizingMaskIntoConstraints = NO;
+  if (_image != nil) {
+    _iconContainerView.frame = CGRectMake(0, 0, 24, 24);
+    UIImageSymbolConfiguration *symbolConfiguration =
+        [UIImageSymbolConfiguration configurationWithPointSize:15.5
+                                                        weight:UIImageSymbolWeightMedium];
+    _iconImageView.preferredSymbolConfiguration = symbolConfiguration;
+    [_iconImageView sizeToFit];
+    [NSLayoutConstraint activateConstraints:@[
+      [_iconImageView.centerXAnchor constraintEqualToAnchor:_iconContainerView.centerXAnchor],
+      [_iconImageView.centerYAnchor constraintEqualToAnchor:_iconContainerView.centerYAnchor],
+    ]];
+  } else {
+    self.iconContainerView.frame = CGRectZero;
+  }
+}
+
 @end
 
 NS_ASSUME_NONNULL_END