iOS UI 之聊天室渐变蒙层效果

iOS UI 开发中，我们已接触过不少 layer 相关设置，如常见设置按钮的圆角效果

UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
button.layer.cornerRadius = 5.0;
button.layer.masksToBounds = YES;

还有边框、阴影也都可以通过 CALayer 相关属性直接设置。今天要说的是一个渐变效果，举个栗子，在一些直播中我们可以看到聊天室上边有个透明度渐变效果，如下

Screen Shot 2020-07-18.png

这个时候没有办法直接通过 layer 属性配置出这种效果，而且 layer 配置的效果只能作用于当前视图，无法作用到子视图上，在这里透明度渐变实际需要作用到聊天室的 cell 上，即它的子视图，所以此时需要通过另一种方式设置。

iOS QuartzCore 框架中提供了一个 CAGradientLayer 类（CALayer 子类）用来设置渐变色，同时 UIView 视图类的 layer 属性也有个 mask 蒙层属性。官方的解释

/* A layer whose alpha channel is used as a mask to select between the
 * layer's background and the result of compositing the layer's
 * contents with its filtered background. Defaults to nil. When used as
 * a mask the layer's `compositingFilter' and `backgroundFilters'
 * properties are ignored. When setting the mask to a new layer, the
 * new layer must have a nil superlayer, otherwise the behavior is
 * undefined. Nested masks (mask layers with their own masks) are
 * unsupported. */

图层，其alpha通道用作遮罩，以在图层的背景和将其内容与其过滤的背景合成的结果之间进行选择。 默认为nil。 当用作蒙版时，图层的“ compositingFilter”和“ backgroundFilters”属性将被忽略。 将蒙版设置为新层时，新层必须具有nil超级层，否则行为是不确定的。 不支持嵌套蒙版（具有自己的蒙版的蒙版层）。

至此，已有比较完整的解决思路，另外要考虑下 tableview 的滚动问题，所以 CAGradientLayer 还不能直接添加到 tablview 上，需要添加它的下层视图上。直接上代码

/// 渐变蒙层
self.gradientLayer = [CAGradientLayer layer];
self.gradientLayer.startPoint = CGPointMake(0, 0); //渐变色起始位置
self.gradientLayer.endPoint = CGPointMake(0, 0.1); //渐变色终止位置
self.gradientLayer.colors = @[(__bridge id)[UIColor.clearColor colorWithAlphaComponent:0].CGColor, (__bridge id) 
 [UIColor.clearColor colorWithAlphaComponent:1.0].CGColor];
self.gradientLayer.locations = @[@(0), @(1.0)]; // 对应colors的alpha值
self.gradientLayer.rasterizationScale = UIScreen.mainScreen.scale;

///  添加蒙层效果的图层
self.tableViewBackgroundView = [[UIView alloc] init];
self.tableViewBackgroundView.backgroundColor = UIColor.clearColor;
[self addSubview:self.tableViewBackgroundView];
self.tableViewBackgroundView.layer.mask = self.gradientLayer;
        
self.tableView = [[UITableView alloc] init];
self.tableView.backgroundColor = UIColor.clearColor;
self.tableView.scrollEnabled = NO;
self.tableView.allowsSelection =  NO;
self.tableView.showsVerticalScrollIndicator = NO;
self.tableView.showsHorizontalScrollIndicator = NO;
self.tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
[self.tableViewBackgroundView addSubview:self.tableView];

- (void)layoutSubviews {
    [super layoutSubviews];
    
    CGFloat tableViewHeight = 156;
    self.tableViewBackgroundView.frame = CGRectMake(15, CGRectGetMinY(self.textAreaView.frame)-tableViewHeight-15, 234, tableViewHeight);
    self.gradientLayer.frame = self.tableViewBackgroundView.bounds;
}

喜欢的话点个赞吧～