[Tabs] Improve text and image rendering. (#7803)

The frames for title and image were not pixel-aligned, resulting in somewhat blurry text and images. Part of #7748
material-components · Jul 8, 2019 · 0dc3125 · 0dc3125
1 parent 4c41b10
commit 0dc3125
Show file tree

Hide file tree

Showing 46 changed files with 45 additions and 26 deletions.
diff --git a/MaterialComponentsBeta.podspec b/MaterialComponentsBeta.podspec
@@ -113,6 +113,7 @@ Pod::Spec.new do |mdc|
     ]
     extension.dependency "MaterialComponents/AnimationTiming"
     extension.dependency "MaterialComponents/Ripple"
+    extension.dependency "MaterialComponents/private/Math"
     extension.dependency "MDFInternationalization"
 
     extension.test_spec 'UnitTests' do |unit_tests|

diff --git a/components/Tabs/BUILD b/components/Tabs/BUILD
@@ -96,6 +96,7 @@ mdc_extension_objc_library(
     deps = [
         "//components/AnimationTiming",
         "//components/Ripple",
+        "//components/private/Math",
         "@material_internationalization_ios//:MDFInternationalization",
     ],
 )

diff --git a/components/Tabs/src/TabBarView/private/MDCTabBarViewItemView.m b/components/Tabs/src/TabBarView/private/MDCTabBarViewItemView.m
@@ -14,6 +14,10 @@
 
 #import "MDCTabBarViewItemView.h"
 
+#import <CoreGraphics/CoreGraphics.h>
+
+#import "MaterialMath.h"
+
 /** The minimum width of any item view. */
 static const CGFloat kMinWidth = 90;
 
@@ -126,15 +130,16 @@ - (void)layoutSubviews {
 }
 
 - (CGRect)contentFrameForTitleLabelInTextOnlyLayout {
-  CGRect contentFrame = UIEdgeInsetsInsetRect(self.bounds, kEdgeInsetsTextOnly);
+  CGRect insetBounds = UIEdgeInsetsInsetRect(self.bounds, kEdgeInsetsTextOnly);
 
-  CGSize contentSize = CGSizeMake(CGRectGetWidth(contentFrame), CGRectGetHeight(contentFrame));
+  CGSize contentSize = CGSizeMake(CGRectGetWidth(insetBounds), CGRectGetHeight(insetBounds));
   CGSize labelWidthFitSize = [self.titleLabel sizeThatFits:contentSize];
   CGSize labelSize =
       CGSizeMake(labelWidthFitSize.width, MIN(contentSize.height, labelWidthFitSize.height));
-  return CGRectMake(CGRectGetMidX(contentFrame) - (labelWidthFitSize.width / 2),
-                    CGRectGetMidY(contentFrame) - (labelWidthFitSize.height / 2), labelSize.width,
-                    labelSize.height);
+  CGRect contentFrame = CGRectMake(CGRectGetMidX(insetBounds) - (labelWidthFitSize.width / 2),
+                                   CGRectGetMidY(insetBounds) - (labelWidthFitSize.height / 2),
+                                   labelSize.width, labelSize.height);
+  return MDCRectAlignToScale(contentFrame, self.window.screen.scale);
 }
 
 - (void)layoutSubviewsTextOnly {
@@ -144,20 +149,23 @@ - (void)layoutSubviewsTextOnly {
   CGSize labelWidthFitSize = [self.titleLabel sizeThatFits:contentSize];
   CGSize labelSize =
       CGSizeMake(contentSize.width, MIN(contentSize.height, labelWidthFitSize.height));
-  self.titleLabel.bounds = CGRectMake(0, 0, labelSize.width, labelSize.height);
-  self.titleLabel.center = CGPointMake(CGRectGetMidX(contentFrame), CGRectGetMidY(contentFrame));
+  CGRect labelFrame = CGRectMake(CGRectGetMidX(contentFrame) - (labelSize.width / 2),
+                                 CGRectGetMidY(contentFrame) - (labelSize.height / 2),
+                                 labelSize.width, labelSize.height);
+  self.titleLabel.frame = MDCRectAlignToScale(labelFrame, self.window.screen.scale);
 }
 
 - (CGRect)contentFrameForImageViewInImageOnlyLayout {
-  CGRect contentFrame = UIEdgeInsetsInsetRect(self.bounds, kEdgeInsetsImageOnly);
+  CGRect insetBounds = UIEdgeInsetsInsetRect(self.bounds, kEdgeInsetsImageOnly);
 
-  CGSize contentSize = CGSizeMake(CGRectGetWidth(contentFrame), CGRectGetHeight(contentFrame));
+  CGSize contentSize = CGSizeMake(CGRectGetWidth(insetBounds), CGRectGetHeight(insetBounds));
   CGSize imageIntrinsicContentSize = self.iconImageView.intrinsicContentSize;
   CGSize imageFinalSize = CGSizeMake(MIN(contentSize.width, imageIntrinsicContentSize.width),
                                      MIN(contentSize.height, imageIntrinsicContentSize.height));
-  return CGRectMake(CGRectGetMidX(contentFrame) - (imageFinalSize.width / 2),
-                    CGRectGetMidY(contentFrame) - (imageFinalSize.height / 2), imageFinalSize.width,
-                    imageFinalSize.height);
+  CGRect contentFrame = CGRectMake(CGRectGetMidX(insetBounds) - (imageFinalSize.width / 2),
+                                   CGRectGetMidY(insetBounds) - (imageFinalSize.height / 2),
+                                   imageFinalSize.width, imageFinalSize.height);
+  return MDCRectAlignToScale(contentFrame, self.window.screen.scale);
 }
 
 - (void)layoutSubviewsImageOnly {
@@ -167,14 +175,16 @@ - (void)layoutSubviewsImageOnly {
   CGSize imageIntrinsicContentSize = self.iconImageView.intrinsicContentSize;
   CGSize imageFinalSize = CGSizeMake(MIN(contentSize.width, imageIntrinsicContentSize.width),
                                      MIN(contentSize.height, imageIntrinsicContentSize.height));
-  self.iconImageView.bounds = CGRectMake(0, 0, imageFinalSize.width, imageFinalSize.height);
-  self.iconImageView.center = CGPointMake(CGRectGetMidX(contentFrame), CGRectGetMidY(contentFrame));
+  CGRect imageViewFrame = CGRectMake(CGRectGetMidX(contentFrame) - (imageFinalSize.width / 2),
+                                     CGRectGetMidY(contentFrame) - (imageFinalSize.height / 2),
+                                     imageFinalSize.width, imageFinalSize.height);
+  self.iconImageView.frame = MDCRectAlignToScale(imageViewFrame, self.window.screen.scale);
 }
 
 - (CGRect)contentFrameForTitleLabelInTextAndImageLayout {
-  CGRect contentFrame = UIEdgeInsetsInsetRect(self.bounds, kEdgeInsetsTextAndImage);
+  CGRect insetBounds = UIEdgeInsetsInsetRect(self.bounds, kEdgeInsetsTextAndImage);
 
-  CGSize contentSize = CGSizeMake(CGRectGetWidth(contentFrame), CGRectGetHeight(contentFrame));
+  CGSize contentSize = CGSizeMake(CGRectGetWidth(insetBounds), CGRectGetHeight(insetBounds));
   CGSize labelSingleLineSize = self.titleLabel.intrinsicContentSize;
   CGSize availableIconSize = CGSizeMake(
       contentSize.width, contentSize.height - (kImageTitlePadding + labelSingleLineSize.height));
@@ -189,8 +199,10 @@ - (CGRect)contentFrameForTitleLabelInTextAndImageLayout {
   CGSize availableLabelSize = CGSizeMake(
       contentSize.width, contentSize.height - (imageFinalSize.height + kImageTitlePadding));
   CGSize finalLabelSize = [self.titleLabel sizeThatFits:availableLabelSize];
-  return CGRectMake(CGRectGetMidX(contentFrame) - (finalLabelSize.width / 2),
-                    CGRectGetMinY(contentFrame), finalLabelSize.width, contentSize.height);
+  CGRect contentFrame =
+      CGRectMake(CGRectGetMidX(insetBounds) - (finalLabelSize.width / 2),
+                 CGRectGetMinY(insetBounds), finalLabelSize.width, contentSize.height);
+  return MDCRectAlignToScale(contentFrame, self.window.screen.scale);
 }
 
 - (void)layoutSubviewsTextAndImage {
@@ -206,17 +218,22 @@ - (void)layoutSubviewsTextAndImage {
   CGSize imageFinalSize =
       CGSizeMake(MIN(imageIntrinsicContentSize.width, availableIconSize.width),
                  MIN(imageIntrinsicContentSize.height, availableIconSize.height));
-  self.iconImageView.bounds = CGRectMake(0, 0, imageFinalSize.width, imageFinalSize.height);
-  self.iconImageView.center = CGPointMake(CGRectGetMidX(contentFrame),
-                                          CGRectGetMinY(contentFrame) + imageFinalSize.height / 2);
+  CGRect imageViewFrame =
+      CGRectMake(CGRectGetMidX(contentFrame) - (imageFinalSize.width / 2),
+                 CGRectGetMinY(contentFrame), imageFinalSize.width, imageFinalSize.height);
+  imageViewFrame = MDCRectAlignToScale(imageViewFrame, self.window.screen.scale);
+  self.iconImageView.frame = imageViewFrame;
 
   // Now position the label from the bottom.
-  CGSize availableLabelSize = CGSizeMake(
-      contentSize.width, contentSize.height - (imageFinalSize.height + kImageTitlePadding));
+  CGSize availableLabelSize =
+      CGSizeMake(contentSize.width,
+                 contentSize.height - (CGRectGetHeight(imageViewFrame) + kImageTitlePadding));
   CGSize finalLabelSize = [self.titleLabel sizeThatFits:availableLabelSize];
-  self.titleLabel.bounds = CGRectMake(0, 0, finalLabelSize.width, finalLabelSize.height);
-  self.titleLabel.center = CGPointMake(CGRectGetMidX(contentFrame),
-                                       CGRectGetMaxY(contentFrame) - finalLabelSize.height / 2);
+  CGRect titleFrame = CGRectMake(CGRectGetMidX(contentFrame) - (finalLabelSize.width / 2),
+                                 CGRectGetMaxY(contentFrame) - finalLabelSize.height,
+                                 finalLabelSize.width, finalLabelSize.height);
+  titleFrame = MDCRectAlignToScale(titleFrame, self.window.screen.scale);
+  self.titleLabel.frame = titleFrame;
 }
 
 - (CGSize)intrinsicContentSize {

diff --git a/...s_64/MDCTabBarViewItemViewSnapshotTests/testContentFrameForTextOnly_11_2@2x.png b/...s_64/MDCTabBarViewItemViewSnapshotTests/testContentFrameForTextOnly_11_2@2x.png
diff --git a/...ViewItemViewSnapshotTests/testLongTitleLargeImageWidestSizeLTRLatin_11_2@2x.png b/...ViewItemViewSnapshotTests/testLongTitleLargeImageWidestSizeLTRLatin_11_2@2x.png
diff --git a/...iewItemViewSnapshotTests/testLongTitleLargeImageWidestSizeRTLArabic_11_2@2x.png b/...iewItemViewSnapshotTests/testLongTitleLargeImageWidestSizeRTLArabic_11_2@2x.png
diff --git a/...ViewSnapshotTests/testShortTitleNoImageIntrinsicContentSizeLTRLatin_11_2@2x.png b/...ViewSnapshotTests/testShortTitleNoImageIntrinsicContentSizeLTRLatin_11_2@2x.png
diff --git a/...iewSnapshotTests/testShortTitleNoImageIntrinsicContentSizeRTLArabic_11_2@2x.png b/...iewSnapshotTests/testShortTitleNoImageIntrinsicContentSizeRTLArabic_11_2@2x.png
diff --git a/...BarViewItemViewSnapshotTests/testShortTitleNoImageSizeToFitLTRLatin_11_2@2x.png b/...BarViewItemViewSnapshotTests/testShortTitleNoImageSizeToFitLTRLatin_11_2@2x.png
diff --git a/...arViewItemViewSnapshotTests/testShortTitleNoImageSizeToFitRTLArabic_11_2@2x.png b/...arViewItemViewSnapshotTests/testShortTitleNoImageSizeToFitRTLArabic_11_2@2x.png
diff --git a/...arViewSnapshotTests/testChangingImageOfSelectedItemAfterAddingToBar_11_2@2x.png b/...arViewSnapshotTests/testChangingImageOfSelectedItemAfterAddingToBar_11_2@2x.png
diff --git a/...ViewSnapshotTests/testChangingImageOfUnselectedItemAfterAddingToBar_11_2@2x.png b/...ViewSnapshotTests/testChangingImageOfUnselectedItemAfterAddingToBar_11_2@2x.png
diff --git a/.../testChangingSelectedImageOfSelectedItemAfterAddingToBarDoesNothing_11_2@2x.png b/.../testChangingSelectedImageOfSelectedItemAfterAddingToBarDoesNothing_11_2@2x.png
diff --git a/...estChangingSelectedImageOfUnselectedItemAfterAddingToBarDoesNothing_11_2@2x.png b/...estChangingSelectedImageOfUnselectedItemAfterAddingToBarDoesNothing_11_2@2x.png
diff --git a/...abBarViewSnapshotTests/testChangingSelectedItemIgnoresSelectedImage_11_2@2x.png b/...abBarViewSnapshotTests/testChangingSelectedItemIgnoresSelectedImage_11_2@2x.png
diff --git a/...64/MDCTabBarViewSnapshotTests/testChangingSelectionUpdatesItemStyle_11_2@2x.png b/...64/MDCTabBarViewSnapshotTests/testChangingSelectionUpdatesItemStyle_11_2@2x.png
diff --git a/...abBarViewSnapshotTests/testCustomInsetsToNegateInternalLeadingInset_11_2@2x.png b/...abBarViewSnapshotTests/testCustomInsetsToNegateInternalLeadingInset_11_2@2x.png
diff --git a/.../MDCTabBarViewSnapshotTests/testCustomSelectionIndicatorStrokeColor_11_2@2x.png b/.../MDCTabBarViewSnapshotTests/testCustomSelectionIndicatorStrokeColor_11_2@2x.png
diff --git a/...iewSnapshotTests/testItemsLargerThanBoundsChangesToScrollableLayout_11_2@2x.png b/...iewSnapshotTests/testItemsLargerThanBoundsChangesToScrollableLayout_11_2@2x.png
diff --git a/...DCTabBarViewSnapshotTests/testItemsWithMixedTitlesAndImagesLTRLatin_11_2@2x.png b/...DCTabBarViewSnapshotTests/testItemsWithMixedTitlesAndImagesLTRLatin_11_2@2x.png
diff --git a/...CTabBarViewSnapshotTests/testItemsWithMixedTitlesAndImagesRTLArabic_11_2@2x.png b/...CTabBarViewSnapshotTests/testItemsWithMixedTitlesAndImagesRTLArabic_11_2@2x.png
diff --git a/...ldens_64/MDCTabBarViewSnapshotTests/testItemsWithOnlyTitlesLTRLatin_11_2@2x.png b/...ldens_64/MDCTabBarViewSnapshotTests/testItemsWithOnlyTitlesLTRLatin_11_2@2x.png
diff --git a/...dens_64/MDCTabBarViewSnapshotTests/testItemsWithOnlyTitlesRTLArabic_11_2@2x.png b/...dens_64/MDCTabBarViewSnapshotTests/testItemsWithOnlyTitlesRTLArabic_11_2@2x.png
diff --git a/..._64/MDCTabBarViewSnapshotTests/testItemsWithTitlesAndImagesLTRLatin_11_2@2x.png b/..._64/MDCTabBarViewSnapshotTests/testItemsWithTitlesAndImagesLTRLatin_11_2@2x.png
diff --git a/...aviorWhenBoundsExceedsIntrinsicContentSizeAndRemainsLessThanMaximum_11_2@2x.png b/...aviorWhenBoundsExceedsIntrinsicContentSizeAndRemainsLessThanMaximum_11_2@2x.png
diff --git a/...sts/testLayoutBehaviorWhenBoundsExceedsMaximumWidthForNumberOfItems_11_2@2x.png b/...sts/testLayoutBehaviorWhenBoundsExceedsMaximumWidthForNumberOfItems_11_2@2x.png
diff --git a/..._64/MDCTabBarViewSnapshotTests/testRemovingSelectedItemUpdatesStyle_11_2@2x.png b/..._64/MDCTabBarViewSnapshotTests/testRemovingSelectedItemUpdatesStyle_11_2@2x.png
diff --git a/..._test_goldens/goldens_64/MDCTabBarViewSnapshotTests/testRippleColor_11_2@2x.png b/..._test_goldens/goldens_64/MDCTabBarViewSnapshotTests/testRippleColor_11_2@2x.png
diff --git a/...MDCTabBarViewSnapshotTests/testSelectedItemInitiallyVisibleLTRLatin_11_2@2x.png b/...MDCTabBarViewSnapshotTests/testSelectedItemInitiallyVisibleLTRLatin_11_2@2x.png
diff --git a/...DCTabBarViewSnapshotTests/testSelectedItemInitiallyVisibleRTLArabic_11_2@2x.png b/...DCTabBarViewSnapshotTests/testSelectedItemInitiallyVisibleRTLArabic_11_2@2x.png
diff --git a/...rViewSnapshotTests/testSelectionIndicatorStrokeColorResetsToDefault_11_2@2x.png b/...rViewSnapshotTests/testSelectionIndicatorStrokeColorResetsToDefault_11_2@2x.png
diff --git a/...ViewSnapshotTests/testSetImageTintColorExplicitlyToNilUsesTintColor_11_2@2x.png b/...ViewSnapshotTests/testSetImageTintColorExplicitlyToNilUsesTintColor_11_2@2x.png
diff --git a/...CTabBarViewSnapshotTests/testSetImageTintColorForExplicitItemStates_11_2@2x.png b/...CTabBarViewSnapshotTests/testSetImageTintColorForExplicitItemStates_11_2@2x.png
diff --git a/...pshotTests/testSetImageTintColorForNormalStateAppliesToSelectedItem_11_2@2x.png b/...pshotTests/testSetImageTintColorForNormalStateAppliesToSelectedItem_11_2@2x.png
diff --git a/...iewSnapshotTests/testSetTitleColorExplicitlyToNilRendersSomeDefault_11_2@2x.png b/...iewSnapshotTests/testSetTitleColorExplicitlyToNilRendersSomeDefault_11_2@2x.png
diff --git a/...4/MDCTabBarViewSnapshotTests/testSetTitleColorForExplicitItemStates_11_2@2x.png b/...4/MDCTabBarViewSnapshotTests/testSetTitleColorForExplicitItemStates_11_2@2x.png
diff --git a/...wSnapshotTests/testSetTitleColorForNormalStateAppliesToSelectedItem_11_2@2x.png b/...wSnapshotTests/testSetTitleColorForNormalStateAppliesToSelectedItem_11_2@2x.png
diff --git a/...BarViewSnapshotTests/testSetTitleFontExplicitlyToNilUsesDefaultFont_11_2@2x.png b/...BarViewSnapshotTests/testSetTitleFontExplicitlyToNilUsesDefaultFont_11_2@2x.png
diff --git a/...64/MDCTabBarViewSnapshotTests/testSetTitleFontForExplicitItemStates_11_2@2x.png b/...64/MDCTabBarViewSnapshotTests/testSetTitleFontForExplicitItemStates_11_2@2x.png
diff --git a/...ewSnapshotTests/testSetTitleFontForNormalStateAppliesToSelectedItem_11_2@2x.png b/...ewSnapshotTests/testSetTitleFontForNormalStateAppliesToSelectedItem_11_2@2x.png
diff --git a/...SettingBoundsToIntrinsicContentSizeResultsInJustifiedLayoutLTRLatin_11_2@2x.png b/...SettingBoundsToIntrinsicContentSizeResultsInJustifiedLayoutLTRLatin_11_2@2x.png
diff --git a/...ettingBoundsToIntrinsicContentSizeResultsInJustifiedLayoutRTLArabic_11_2@2x.png b/...ettingBoundsToIntrinsicContentSizeResultsInJustifiedLayoutRTLArabic_11_2@2x.png
diff --git a/...arrowWithItemsLessThanMinimumWidthResultsInScrollableLayoutLTRLatin_11_2@2x.png b/...arrowWithItemsLessThanMinimumWidthResultsInScrollableLayoutLTRLatin_11_2@2x.png
diff --git a/...rrowWithItemsLessThanMinimumWidthResultsInScrollableLayoutRTLArabic_11_2@2x.png b/...rrowWithItemsLessThanMinimumWidthResultsInScrollableLayoutRTLArabic_11_2@2x.png
diff --git a/...ngItemLimitsItemWidthToItemMaximumWhenBoundsAreIntrinsicContentSize_11_2@2x.png b/...ngItemLimitsItemWidthToItemMaximumWhenBoundsAreIntrinsicContentSize_11_2@2x.png
diff --git a/...sts/testVeryLongItemLimitsItemWidthToItemMaximumWhenBoundsTooNarrow_11_2@2x.png b/...sts/testVeryLongItemLimitsItemWidthToItemMaximumWhenBoundsTooNarrow_11_2@2x.png