[iOS][Settings] Updates cells padding

This CL updates the padding between the icon and the text and also the
padding between detail text and the AccessoryType.
The position of the switch button is also modified in order to be
correctly aligned with AccessoryType of the other items.


Bug: 922511
Change-Id: I8b738a82d0b523c59344f145938be09f9022bc44
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2560637Reviewed-by: Gauthier Ambard <gambard@chromium.org>
Commit-Queue: Ewann Pellé <ewannpv@chromium.org>
Cr-Commit-Position: refs/heads/master@{#831850}

ios/chrome/browser/ui/settings/cells/settings_check_cell.mm

@@ -16,16 +16,6 @@
 #error "This file requires ARC support."
 #endif
 
-namespace {
-
-// Padding used between the image and the text labels.
-const CGFloat kTrailingImagePadding = 12;
-
-// Size of the icon images.
-const CGFloat kIconImageSize = 28;
-
-}  // namespace
-
 @interface SettingsCheckCell ()
 
 // The image view for the trailing image.
@@ -134,7 +124,7 @@ const CGFloat kIconImageSize = 28;
 
     _textWithTrailingContentsConstraint = [textLayoutGuide.trailingAnchor
         constraintEqualToAnchor:_trailingImageView.leadingAnchor
-                       constant:-kTrailingImagePadding];
+                       constant:-kTableViewImagePadding];
 
     _textNoLeadingImageConstraint = [textLayoutGuide.leadingAnchor
         constraintEqualToAnchor:contentView.leadingAnchor
@@ -142,7 +132,7 @@ const CGFloat kIconImageSize = 28;
 
     _textWithLeadingImageConstraint = [textLayoutGuide.leadingAnchor
         constraintEqualToAnchor:_leadingImageView.trailingAnchor
-                       constant:kTableViewHorizontalSpacing];
+                       constant:kTableViewImagePadding];
 
     NSLayoutConstraint* heightConstraint = [self.contentView.heightAnchor
         constraintGreaterThanOrEqualToConstant:kChromeTableViewCellHeight];
@@ -158,9 +148,10 @@ const CGFloat kIconImageSize = 28;
       [_trailingImageView.trailingAnchor
           constraintEqualToAnchor:self.contentView.trailingAnchor
                          constant:-kTableViewHorizontalSpacing],
-      [_trailingImageView.widthAnchor constraintEqualToConstant:kIconImageSize],
+      [_trailingImageView.widthAnchor
+          constraintEqualToConstant:kTableViewIconImageSize],
       [_trailingImageView.heightAnchor
-          constraintEqualToConstant:kIconImageSize],
+          constraintEqualToAnchor:_trailingImageView.widthAnchor],
       [_trailingImageView.centerYAnchor
           constraintEqualToAnchor:textLayoutGuide.centerYAnchor],
       [_trailingImageView.leadingAnchor
@@ -171,8 +162,10 @@ const CGFloat kIconImageSize = 28;
       [_infoButton.trailingAnchor
           constraintEqualToAnchor:self.contentView.trailingAnchor
                          constant:-kTableViewHorizontalSpacing],
-      [_infoButton.widthAnchor constraintEqualToConstant:kIconImageSize],
-      [_infoButton.heightAnchor constraintEqualToConstant:kIconImageSize],
+      [_infoButton.widthAnchor
+          constraintEqualToConstant:kTableViewIconImageSize],
+      [_infoButton.heightAnchor
+          constraintEqualToAnchor:_infoButton.widthAnchor],
       [_infoButton.centerYAnchor
           constraintEqualToAnchor:textLayoutGuide.centerYAnchor],
       [_infoButton.leadingAnchor
@@ -183,9 +176,10 @@ const CGFloat kIconImageSize = 28;
       [_activityIndicator.trailingAnchor
           constraintEqualToAnchor:self.contentView.trailingAnchor
                          constant:-kTableViewHorizontalSpacing],
-      [_activityIndicator.widthAnchor constraintEqualToConstant:kIconImageSize],
+      [_activityIndicator.widthAnchor
+          constraintEqualToConstant:kTableViewIconImageSize],
       [_activityIndicator.heightAnchor
-          constraintEqualToConstant:kIconImageSize],
+          constraintEqualToAnchor:_activityIndicator.widthAnchor],
       [_activityIndicator.centerYAnchor
           constraintEqualToAnchor:textLayoutGuide.centerYAnchor],
 
@@ -193,8 +187,10 @@ const CGFloat kIconImageSize = 28;
       [_leadingImageView.leadingAnchor
           constraintEqualToAnchor:self.contentView.leadingAnchor
                          constant:kTableViewHorizontalSpacing],
-      [_leadingImageView.widthAnchor constraintEqualToConstant:kIconImageSize],
-      [_leadingImageView.heightAnchor constraintEqualToConstant:kIconImageSize],
+      [_leadingImageView.widthAnchor
+          constraintEqualToConstant:kTableViewIconImageSize],
+      [_leadingImageView.heightAnchor
+          constraintEqualToAnchor:_leadingImageView.widthAnchor],
       [_leadingImageView.centerYAnchor
           constraintEqualToAnchor:textLayoutGuide.centerYAnchor],
 

ios/chrome/browser/ui/settings/cells/settings_image_detail_text_cell.mm

@@ -15,13 +15,15 @@
 
 @interface SettingsImageDetailTextCell ()
 
-// Width constraint for the image view.
-@property(nonatomic, weak, readonly) NSLayoutConstraint* imageWidthConstraint;
-// Height constraint for the image view.
-@property(nonatomic, weak, readonly) NSLayoutConstraint* imageHeightConstraint;
 // Image view for the cell.
 @property(nonatomic, strong) UIImageView* imageView;
 
+// Constraint used for leading text constraint without |imageView|.
+@property(nonatomic, strong) NSLayoutConstraint* textNoImageConstraint;
+
+// Constraint used for leading text constraint with |imageView| showing.
+@property(nonatomic, strong) NSLayoutConstraint* textWithImageConstraint;
+
 @end
 
 @implementation SettingsImageDetailTextCell
@@ -73,29 +75,28 @@
   textStackView.translatesAutoresizingMaskIntoConstraints = NO;
   [contentView addSubview:textStackView];
 
-  _imageWidthConstraint = [_imageView.widthAnchor constraintEqualToConstant:0];
-  _imageHeightConstraint =
-      [_imageView.heightAnchor constraintEqualToConstant:0];
+  _textNoImageConstraint = [textStackView.leadingAnchor
+      constraintEqualToAnchor:contentView.leadingAnchor
+                     constant:kTableViewHorizontalSpacing];
+
+  _textWithImageConstraint = [textStackView.leadingAnchor
+      constraintEqualToAnchor:_imageView.trailingAnchor
+                     constant:kTableViewImagePadding];
 
   [NSLayoutConstraint activateConstraints:@[
-    // Horizontal contraints for |_imageView| and |textStackView|.
-    _imageWidthConstraint,
+    [_imageView.widthAnchor constraintEqualToConstant:kTableViewIconImageSize],
+    [_imageView.heightAnchor constraintEqualToAnchor:_imageView.widthAnchor],
     [_imageView.leadingAnchor
         constraintEqualToAnchor:contentView.leadingAnchor
                        constant:kTableViewHorizontalSpacing],
-    [textStackView.leadingAnchor
-        constraintEqualToAnchor:_imageView.trailingAnchor
-                       constant:kTableViewHorizontalSpacing],
-    [contentView.trailingAnchor
-        constraintEqualToAnchor:textStackView.trailingAnchor
-                       constant:kTableViewHorizontalSpacing],
-    // Vertical contraints for |_imageView| and |textStackView|.
-    _imageHeightConstraint,
     [_imageView.centerYAnchor
         constraintEqualToAnchor:contentView.centerYAnchor],
     [_imageView.topAnchor
         constraintGreaterThanOrEqualToAnchor:contentView.topAnchor
                                     constant:kTableViewVerticalSpacing],
+    [contentView.trailingAnchor
+        constraintEqualToAnchor:textStackView.trailingAnchor
+                       constant:kTableViewHorizontalSpacing],
     [contentView.bottomAnchor
         constraintGreaterThanOrEqualToAnchor:_imageView.bottomAnchor
                                     constant:kTableViewVerticalSpacing],
@@ -117,10 +118,17 @@
 }
 
 - (void)setImage:(UIImage*)image {
-  DCHECK(image);
+  BOOL hidden = !image;
   self.imageView.image = image;
-  self.imageWidthConstraint.constant = image.size.width;
-  self.imageHeightConstraint.constant = image.size.height;
+  self.imageView.hidden = hidden;
+  // Update the leading text constraint based on |image| being provided.
+  if (hidden) {
+    self.textWithImageConstraint.active = NO;
+    self.textNoImageConstraint.active = YES;
+  } else {
+    self.textNoImageConstraint.active = NO;
+    self.textWithImageConstraint.active = YES;
+  }
 }
 
 - (UIImage*)image {

ios/chrome/browser/ui/settings/cells/settings_switch_cell.mm

@@ -18,11 +18,10 @@
 #endif
 
 namespace {
-// Padding used between the icon and the text labels.
-const CGFloat kIconTrailingPadding = 12;
 
-// Size of the icon image.
-const CGFloat kIconImageSize = 28;
+// Padding used between the |switchView| and the end of the |contentView|.
+const CGFloat kSwitchTrailingPadding = 22;
+
 }  // namespace
 
 @interface SettingsSwitchCell ()
@@ -92,7 +91,7 @@ const CGFloat kIconImageSize = 28;
     // Set up the constraints assuming that the icon image is hidden.
     _iconVisibleConstraint = [textLayoutGuide.leadingAnchor
         constraintEqualToAnchor:_iconImageView.trailingAnchor
-                       constant:kIconTrailingPadding];
+                       constant:kTableViewImagePadding];
     _iconHiddenConstraint = [textLayoutGuide.leadingAnchor
         constraintEqualToAnchor:self.contentView.leadingAnchor
                        constant:kTableViewHorizontalSpacing];
@@ -108,7 +107,7 @@ const CGFloat kIconImageSize = 28;
 
       [_switchView.trailingAnchor
           constraintEqualToAnchor:self.contentView.trailingAnchor
-                         constant:-kTableViewHorizontalSpacing],
+                         constant:-kSwitchTrailingPadding],
     ];
     _accessibilityConstraints = @[
       [_switchView.topAnchor
@@ -129,8 +128,10 @@ const CGFloat kIconImageSize = 28;
       [_iconImageView.leadingAnchor
           constraintEqualToAnchor:self.contentView.leadingAnchor
                          constant:kTableViewHorizontalSpacing],
-      [_iconImageView.widthAnchor constraintEqualToConstant:kIconImageSize],
-      [_iconImageView.heightAnchor constraintEqualToConstant:kIconImageSize],
+      [_iconImageView.widthAnchor
+          constraintEqualToConstant:kTableViewIconImageSize],
+      [_iconImageView.heightAnchor
+          constraintEqualToAnchor:_iconImageView.widthAnchor],
 
       [_iconImageView.centerYAnchor
           constraintEqualToAnchor:textLayoutGuide.centerYAnchor],

ios/chrome/browser/ui/table_view/cells/table_view_cells_constants.h

@@ -47,6 +47,12 @@ extern const CGFloat kTableViewLabelVerticalTopSpacing;
 // The width taken by the accessory view when it is displayed.
 extern const CGFloat kTableViewAccessoryWidth;
 
+// Size of the icon image.
+extern const CGFloat kTableViewIconImageSize;
+
+// Padding used between the image and the text labels.
+extern const CGFloat kTableViewImagePadding;
+
 // A masked password string(e.g. "••••••••").
 extern NSString* const kMaskedPassword;
 

ios/chrome/browser/ui/table_view/cells/table_view_cells_constants.mm

@@ -21,6 +21,8 @@ const CGFloat kTableViewCellSelectionAnimationDuration = 0.15;
 const CGFloat kUseDefaultFontSize = 0.0;
 const CGFloat kTableViewLabelVerticalTopSpacing = 13.0;
 const CGFloat kTableViewAccessoryWidth = 40;
+const CGFloat kTableViewIconImageSize = 28;
+const CGFloat kTableViewImagePadding = 12;
 
 NSString* const kMaskedPassword = @"••••••••";
 NSString* const kTableViewCellInfoButtonViewId =

ios/chrome/browser/ui/table_view/cells/table_view_detail_icon_item.mm

@@ -19,13 +19,11 @@
 
 namespace {
 
-// Padding used between the icon and the text labels.
-const CGFloat kIconTrailingPadding = 12;
-// Size of the icon image.
-const CGFloat kIconImageSize = 28;
 // Proportion of Cell's textLabel/detailTextLabel. This guarantees that the
 // textLabel occupies 75% of the row space and detailTextLabel occupies 25%.
 const CGFloat kCellLabelsWidthProportion = 3.0f;
+// Padding used between the detail text and the AccessoryType.
+const CGFloat kDetailTextTrailingPadding = 6;
 
 }  // namespace
 
@@ -73,7 +71,6 @@ const CGFloat kCellLabelsWidthProportion = 3.0f;
 
 @implementation TableViewDetailIconCell {
   UIImageView* _iconImageView;
-  UILayoutGuide* _labelContainerGuide;
   NSLayoutConstraint* _iconHiddenConstraint;
   NSLayoutConstraint* _iconVisibleConstraint;
 }
@@ -93,11 +90,6 @@ const CGFloat kCellLabelsWidthProportion = 3.0f;
     _iconImageView.hidden = YES;
     [contentView addSubview:_iconImageView];
 
-    // Constrain the labels inside a container view, to make width computations
-    // easier.
-    _labelContainerGuide = [[UILayoutGuide alloc] init];
-    [contentView addLayoutGuide:_labelContainerGuide];
-
     _textLabel = [[UILabel alloc] init];
     _textLabel.translatesAutoresizingMaskIntoConstraints = NO;
     _textLabel.font = [UIFont preferredFontForTextStyle:UIFontTextStyleBody];
@@ -117,12 +109,12 @@ const CGFloat kCellLabelsWidthProportion = 3.0f;
 
     // Set up the constraints for when the icon is visible and hidden.  One of
     // these will be active at a time, defaulting to hidden.
-    _iconHiddenConstraint = [_labelContainerGuide.leadingAnchor
+    _iconHiddenConstraint = [_textLabel.leadingAnchor
         constraintEqualToAnchor:contentView.leadingAnchor
                        constant:kTableViewHorizontalSpacing];
-    _iconVisibleConstraint = [_labelContainerGuide.leadingAnchor
+    _iconVisibleConstraint = [_textLabel.leadingAnchor
         constraintEqualToAnchor:_iconImageView.trailingAnchor
-                       constant:kIconTrailingPadding];
+                       constant:kTableViewImagePadding];
 
     // In case the two labels don't fit in width, have the |textLabel| be 3
     // times the width of the |detailTextLabel| (so 75% / 25%).
@@ -144,7 +136,8 @@ const CGFloat kCellLabelsWidthProportion = 3.0f;
       [_detailTextLabel.firstBaselineAnchor
           constraintEqualToAnchor:_textLabel.firstBaselineAnchor],
       [_detailTextLabel.trailingAnchor
-          constraintEqualToAnchor:_labelContainerGuide.trailingAnchor],
+          constraintEqualToAnchor:contentView.trailingAnchor
+                         constant:-kDetailTextTrailingPadding],
       widthConstraint,
     ];
 
@@ -164,7 +157,7 @@ const CGFloat kCellLabelsWidthProportion = 3.0f;
       [_detailTextLabel.leadingAnchor
           constraintEqualToAnchor:_textLabel.leadingAnchor],
       [_detailTextLabel.trailingAnchor
-          constraintLessThanOrEqualToAnchor:_labelContainerGuide.trailingAnchor
+          constraintLessThanOrEqualToAnchor:contentView.trailingAnchor
                                    constant:-kTableViewHorizontalSpacing],
     ];
 
@@ -172,16 +165,10 @@ const CGFloat kCellLabelsWidthProportion = 3.0f;
       [_iconImageView.leadingAnchor
           constraintEqualToAnchor:contentView.leadingAnchor
                          constant:kTableViewHorizontalSpacing],
-      [_iconImageView.widthAnchor constraintEqualToConstant:kIconImageSize],
-      [_iconImageView.heightAnchor constraintEqualToConstant:kIconImageSize],
-
-      // Fix the edges of the text labels.
-      [_textLabel.leadingAnchor
-          constraintEqualToAnchor:_labelContainerGuide.leadingAnchor],
-      [_labelContainerGuide.trailingAnchor
-          constraintEqualToAnchor:contentView.trailingAnchor
-                         constant:-kTableViewHorizontalSpacing],
-
+      [_iconImageView.widthAnchor
+          constraintEqualToConstant:kTableViewIconImageSize],
+      [_iconImageView.heightAnchor
+          constraintEqualToAnchor:_iconImageView.widthAnchor],
       [_iconImageView.centerYAnchor
           constraintEqualToAnchor:contentView.centerYAnchor],
       _iconHiddenConstraint,

ios/chrome/browser/ui/table_view/cells/table_view_info_button_cell.mm

@@ -20,12 +20,6 @@
 
 namespace {
 
-// Padding used between the icon and the text labels.
-const CGFloat kIconTrailingPadding = 12;
-
-// Size of the icon image.
-const CGFloat kIconImageSize = 28;
-
 // Proportion of |textLayoutGuide| and |statusTextLabel|. This guarantees both
 // of them at least occupies 20% of the cell.
 const CGFloat kCellLabelsWidthProportion = 0.2f;
@@ -115,7 +109,7 @@ const CGFloat kCellLabelsWidthProportion = 0.2f;
     // Set up the constraints assuming that the icon image is hidden.
     _iconVisibleConstraint = [textLayoutGuide.leadingAnchor
         constraintEqualToAnchor:_iconImageView.trailingAnchor
-                       constant:kIconTrailingPadding];
+                       constant:kTableViewImagePadding];
     _iconHiddenConstraint = [textLayoutGuide.leadingAnchor
         constraintEqualToAnchor:self.contentView.leadingAnchor
                        constant:kTableViewHorizontalSpacing];
@@ -199,8 +193,10 @@ const CGFloat kCellLabelsWidthProportion = 0.2f;
       [_iconImageView.leadingAnchor
           constraintEqualToAnchor:self.contentView.leadingAnchor
                          constant:kTableViewHorizontalSpacing],
-      [_iconImageView.widthAnchor constraintEqualToConstant:kIconImageSize],
-      [_iconImageView.heightAnchor constraintEqualToConstant:kIconImageSize],
+      [_iconImageView.widthAnchor
+          constraintEqualToConstant:kTableViewIconImageSize],
+      [_iconImageView.heightAnchor
+          constraintEqualToAnchor:_iconImageView.widthAnchor],
 
       [_iconImageView.centerYAnchor
           constraintEqualToAnchor:textLayoutGuide.centerYAnchor],