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

remoting/ios/app/host_collection_view_cell.mm

 // Copyright 2017 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 #if !defined(__has_feature) || !__has_feature(objc_arc)
 #error "This file requires ARC support."
 #endif
 
 #import <UIKit/UIKit.h>
 
 #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"
 
 static const CGFloat kLinePadding = 2.f;
 static const CGFloat kHostCardIconInset = 10.f;
 static const CGFloat kHostCardPadding = 4.f;
 static const CGFloat kHostCardIconSize = 45.f;
 
 @interface HostCollectionViewCell () {
   UIImageView* _imageView;
   UILabel* _statusLabel;
   UILabel* _titleLabel;
   UIView* _cellView;
+  UIView* _labelView;
 }
 @end
 
 //
 // This is the implementation of the info card for a host's status shown in
 // the host list. This will also be the selection for which host to connect
 // to and other managements actions for a host in this list.
 //
 @implementation HostCollectionViewCell
 
 @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) {
     self.backgroundColor = [UIColor clearColor];
     [self commonInit];
   }
   return self;
 }
 
 - (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;
   _imageView.layer.cornerRadius = kHostCardIconSize / 2.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
 
 - (void)populateContentWithHostInfo:(HostInfo*)hostInfo {
   _hostInfo = hostInfo;
 
   _titleLabel.text = _hostInfo.hostName;
 
   _imageView.image = [UIImage imageNamed:@"ic_desktop"];
@@ skipping 13 matching lines @@
 #pragma mark - UICollectionReusableView
 
 - (void)prepareForReuse {
   [super prepareForReuse];
   _hostInfo = nil;
   _statusLabel.text = nil;
   _titleLabel.text = nil;
 }
 
 @end