swift 实现聊天列表消息渐变消失_swift聊天记录列表设计

先上效果图

通常情况下 聊天列表是 tableview 的实现， 利用 gradienLayer 实现渐变效果。但是我们通常不直接把 gradienLayer 加在tableView ,因为那样，gradienLayer 会直接加在tableview 上且会随着滚动，而不是吸顶的。

代码

func generateTextMaskForChat() {
        var gradienLayer = CAGradientLayer.init()
        gradienLayer.startPoint = CGPoint.init(x: 0, y: 0)
        gradienLayer.endPoint = CGPoint.init(x: 0, y: 0.1)
        gradienLayer.colors = [UIColor.clear.withAlphaComponent(0).cgColor,UIColor.clear.withAlphaComponent(1.0).cgColor]
        gradienLayer.locations = [0,1.0]
        gradienLayer.rasterizationScale = UIScreen.main.scale
        gradienLayer.frame = self.view.bounds
        self.view.layer.mask = gradienLayer
    }
1
2
3
4
5
6
7
8
9
10

注意 self.view 指的是 controller 的 view，建议单独创建一个view ，tableview 加在创建的这个view 上。

======================================================

如果你一不小心 把 蒙层 加在了tableview 上，例如

- (UITableView *)tableView {
    
    if (_tableView == nil) {
        _tableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 30, [UIScreen mainScreen].bounds.size.width, 400) style:UITableViewStylePlain];
        _tableView.dataSource = self;
        _tableView.delegate = self;
        _tableView.rowHeight = 200;
        
        // 渐变蒙层
        CAGradientLayer *layer = [[CAGradientLayer alloc] init];
        layer.colors = @[
                         (__bridge id)[UIColor colorWithWhite:0 alpha:0.05f].CGColor,
                         (__bridge id)[UIColor colorWithWhite:0 alpha:1.0f].CGColor
                         ];
        layer.locations = @[@0, @0.4]; // 设置颜色的范围
        layer.startPoint = CGPointMake(0, 0); // 设置颜色渐变的起点
        layer.endPoint = CGPointMake(0, 1); // 设置颜色渐变的终点，与 startPoint 形成一个颜色渐变方向
        layer.frame = _tableView.bounds; // 设置 Frame
        
        _tableView.layer.mask = layer; // 设置 mask 属性
    }
    
    return _tableView;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

单单这样加会出现上面所说的随着滚动的情况。别着急，在代理方法里面继续设置就可以了

- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    
    CAGradientLayer *layer = [[CAGradientLayer alloc] init];
    layer.colors = @[
                     (__bridge id)[UIColor colorWithWhite:0 alpha:0.05f].CGColor,
                     (__bridge id)[UIColor colorWithWhite:0 alpha:1.0f].CGColor
                     ];
    layer.locations = @[@0, @0.4];
    layer.startPoint = CGPointMake(0, 0);
    layer.endPoint = CGPointMake(0, 1);
    layer.frame = _tableView.bounds;
    
    _tableView.layer.mask = layer;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14