[CRD iOS] Fix shadow between host cards and use anchor constraints

remoting/ios/app/host_collection_view_cell.mm

Index: remoting/ios/app/host_collection_view_cell.mm
diff --git a/remoting/ios/app/host_collection_view_cell.mm b/remoting/ios/app/host_collection_view_cell.mm
index 7cbab271f1fc4d15a94d2be509ae164e845e71c1..ae04dafa411776c2002d14f8fb8703f8843d998f 100644
--- a/remoting/ios/app/host_collection_view_cell.mm
+++ b/remoting/ios/app/host_collection_view_cell.mm
@@ -10,8 +10,6 @@
 
 #import "remoting/ios/app/host_collection_view_cell.h"
 
-#import "ios/third_party/material_components_ios/src/components/ShadowElevations/src/MaterialShadowElevations.h"
-#import "ios/third_party/material_components_ios/src/components/ShadowLayer/src/MaterialShadowLayer.h"
 #import "ios/third_party/material_components_ios/src/components/Typography/src/MaterialTypography.h"
 #import "remoting/ios/domain/host_info.h"
 
@@ -25,6 +23,7 @@ static const CGFloat kHostCardIconSize = 45.f;
   UILabel* _statusLabel;
   UILabel* _titleLabel;
   UIView* _cellView;
+  UIView* _labelView;
 }
 @end
 
@@ -37,10 +36,6 @@ static const CGFloat kHostCardIconSize = 45.f;
 
 @synthesize hostInfo = _hostInfo;
 
-+ (Class)layerClass {
-  return [MDCShadowLayer class];

[Yuwei, 2017/06/01 04:27:17]

The collection view by default has its own separator style and a lighter shadow
so it's not necessary o override the shadow layer here. This shadow layer
occasionally overlays on another cell.

-}
-
 - (id)initWithFrame:(CGRect)frame {
   self = [super initWithFrame:frame];
   if (self) {
@@ -51,22 +46,13 @@ static const CGFloat kHostCardIconSize = 45.f;
 }
 
 - (void)commonInit {
-  _cellView = [[UIView alloc] initWithFrame:self.bounds];
-  _cellView.autoresizingMask =
-      UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;
-  _cellView.backgroundColor = [UIColor whiteColor];

[Yuwei, 2017/06/01 04:27:17]

Changing the background color will weirdly hide the default separator...

+  _cellView = [[UIView alloc] init];

[Yuwei, 2017/06/01 04:27:17]

Looks like we don't need the extra cellView in our case. Let's remove it to
simplify some code?

[Yuwei, 2017/06/01 18:56:32]

Done.

+  _cellView.translatesAutoresizingMaskIntoConstraints = NO;
   _cellView.clipsToBounds = YES;
   [self addSubview:_cellView];
 
-  MDCShadowLayer* shadowLayer = (MDCShadowLayer*)self.layer;
-  shadowLayer.shadowMaskEnabled = NO;
-  [shadowLayer setElevation:MDCShadowElevationCardResting];
-
-  CGRect imageViewFrame =
-      CGRectMake(kHostCardIconInset,
-                 self.frame.size.height / 2.f - kHostCardIconSize / 2.f,
-                 kHostCardIconSize, kHostCardIconSize);
-  _imageView = [[UIImageView alloc] initWithFrame:imageViewFrame];
+  _imageView = [[UIImageView alloc] init];
+  _imageView.translatesAutoresizingMaskIntoConstraints = NO;
   _imageView.contentMode = UIViewContentModeCenter;
   _imageView.alpha = 0.87f;
   _imageView.backgroundColor = UIColor.lightGrayColor;
@@ -74,26 +60,69 @@ static const CGFloat kHostCardIconSize = 45.f;
   _imageView.layer.masksToBounds = YES;
   [_cellView addSubview:_imageView];
 
+  // Holds both of the labels.
+  _labelView = [[UIView alloc] init];
+  _labelView.translatesAutoresizingMaskIntoConstraints = NO;
+  [_cellView addSubview:_labelView];
+
   _titleLabel = [[UILabel alloc] init];
+  _titleLabel.translatesAutoresizingMaskIntoConstraints = NO;
   _titleLabel.font = [MDCTypography titleFont];
   _titleLabel.alpha = [MDCTypography titleFontOpacity];
   _titleLabel.textColor = [UIColor colorWithWhite:0 alpha:0.87f];
-  _titleLabel.frame = CGRectMake(
-      imageViewFrame.origin.x + imageViewFrame.size.width + kHostCardIconInset,
-      (self.frame.size.height / 2.f) -
-          (_titleLabel.font.pointSize + kHostCardPadding / 2.f),
-      self.frame.size.width, _titleLabel.font.pointSize + kLinePadding);
-  [_cellView addSubview:_titleLabel];
+  [_labelView addSubview:_titleLabel];
 
   _statusLabel = [[UILabel alloc] init];
+  _statusLabel.translatesAutoresizingMaskIntoConstraints = NO;
   _statusLabel.font = [MDCTypography captionFont];
   _statusLabel.alpha = [MDCTypography captionFontOpacity];
   _statusLabel.textColor = [UIColor colorWithWhite:0 alpha:0.60f];
-  _statusLabel.frame = CGRectMake(
-      imageViewFrame.origin.x + imageViewFrame.size.width + kHostCardIconInset,
-      (self.frame.size.height / 2.f) + kHostCardPadding / 2.f,
-      self.frame.size.width, _statusLabel.font.pointSize + kLinePadding);
-  [_cellView addSubview:_statusLabel];
+  [_labelView addSubview:_statusLabel];
+
+  // Constraints
+  NSArray* constraints = @[
+    // Expand _cellView to the whole view
+    [[_cellView leadingAnchor] constraintEqualToAnchor:[self leadingAnchor]],

[Yuwei, 2017/06/01 04:27:17]

FYI leading and trailing are left and right in LTR language but will become
right and left in RTL language

+    [[_cellView trailingAnchor] constraintEqualToAnchor:[self trailingAnchor]],
+    [[_cellView topAnchor] constraintEqualToAnchor:[self topAnchor]],
+    [[_cellView bottomAnchor] constraintEqualToAnchor:[self bottomAnchor]],
+
+    // Arranging [_imageView]-[_labelView]
+    [[_imageView leadingAnchor]
+        constraintEqualToAnchor:[_cellView leadingAnchor]
+                       constant:kHostCardIconInset],
+    [[_imageView centerYAnchor]
+        constraintEqualToAnchor:[_cellView centerYAnchor]],
+    [[_imageView widthAnchor] constraintEqualToConstant:kHostCardIconSize],
+    [[_imageView heightAnchor] constraintEqualToConstant:kHostCardIconSize],
+
+    [[_labelView leadingAnchor]
+        constraintEqualToAnchor:[_imageView trailingAnchor]
+                       constant:kHostCardIconInset],
+    [[_labelView trailingAnchor]
+        constraintEqualToAnchor:[_cellView trailingAnchor]
+                       constant:-kHostCardPadding / 2.f],
+    [[_labelView topAnchor] constraintEqualToAnchor:[_cellView topAnchor]],
+    [[_labelView bottomAnchor]
+        constraintEqualToAnchor:[_cellView bottomAnchor]],
+
+    // Put titleLable and statusLable symmetrically on centerY.
+    [[_titleLabel leadingAnchor]
+        constraintEqualToAnchor:[_labelView leadingAnchor]],
+    [[_titleLabel trailingAnchor]
+        constraintEqualToAnchor:[_labelView trailingAnchor]],
+    [[_titleLabel bottomAnchor]
+        constraintEqualToAnchor:[_labelView centerYAnchor]],
+
+    [[_statusLabel leadingAnchor]
+        constraintEqualToAnchor:[_labelView leadingAnchor]],
+    [[_statusLabel trailingAnchor]
+        constraintEqualToAnchor:[_labelView trailingAnchor]],
+    [[_statusLabel topAnchor] constraintEqualToAnchor:[_labelView centerYAnchor]
+                                             constant:kLinePadding],
+  ];
+
+  [NSLayoutConstraint activateConstraints:constraints];
 }
 
 #pragma mark - HostCollectionViewCell Public