2019-08-22 cell 视觉效果

自定义cell

重写 initWithStyle: reuseIdentifier 方法

-(instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSString *)reuseIdentifier {
    if (self = [super initWithStyle:style reuseIdentifier:reuseIdentifier]) {
        //加上 dispatch_after 能够获取到 设置 行高 后 cell 的高度，不加 cell 还是 原来的 bounds
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
            [self initUI];
        });
    }
    return self;
}
- (void)initUI {
    self.selectionStyle = UITableViewCellSeparatorStyleNone;//移除行分割线

    UIView *bgView = [[UIView alloc] initWithFrame:CGRectMake(5, 5, self.bounds.size.width - 10, self.bounds.size.height - 10)];
    bgView.layer.cornerRadius = self.bounds.size.height * 0.1;
    [self addSubview:bgView];

    UIView *leftView = [[UIView alloc] init];
    [bgView addSubview:leftView];
    leftView.backgroundColor = [UIColor colorWithRed:8/255.0 green:9/255.0 blue:226/255.0 alpha:1];
    leftView.translatesAutoresizingMaskIntoConstraints = NO;//取消frame ，bouds，center 方式布局的视图自动转化为约束形式

    UIView *rightView = [[UIView alloc] init];
    rightView.backgroundColor = [UIColor grayColor];
    [bgView addSubview:rightView];
    rightView.translatesAutoresizingMaskIntoConstraints = NO;//取消frame ，bouds，center 方式布局的视图自动转化为约束形式

    //约束 view 之前必须是已经创建好了 view，并且已经添加到父容器上
    //确定 leftView 左边距，上边距，约束在父容器
    [self addConstraint:[NSLayoutConstraint constraintWithItem:leftView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:bgView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0]];
    [self addConstraint:[NSLayoutConstraint constraintWithItem:leftView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:bgView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]];

    //确定 leftView 的宽高，约束在自身
    [leftView addConstraint:[NSLayoutConstraint constraintWithItem:leftView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:bgView.bounds.size.height]];
    [leftView addConstraint:[NSLayoutConstraint constraintWithItem:leftView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:0 constant:bgView.bounds.size.width * 0.2]];

    //确定 leftView，rightView 之间的距离，约束在他俩共同的父容器
    [bgView addConstraint:[NSLayoutConstraint constraintWithItem:leftView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:rightView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0]];

    //确定 rightView 右边距，上边距，下边距，约束在父容器
    [bgView addConstraint:[NSLayoutConstraint constraintWithItem:rightView attribute:NSLayoutAttributeRight relatedBy:NSLayoutRelationEqual toItem:bgView attribute:NSLayoutAttributeRight multiplier:1 constant:0]];
    [bgView addConstraint:[NSLayoutConstraint constraintWithItem:rightView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:bgView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0]];
    [bgView addConstraint:[NSLayoutConstraint constraintWithItem:rightView attribute:NSLayoutAttributeBottom relatedBy:NSLayoutRelationEqual toItem:bgView attribute:NSLayoutAttributeBottom multiplier:1 constant:0]];

    //刷新视图，获取到自动布局后的 frame/bounds
    [leftView layoutIfNeeded];
    [rightView layoutIfNeeded];

    CGSize size = CGSizeMake(bgView.layer.cornerRadius, bgView.layer.cornerRadius);
    [self drawCorner:UIRectCornerTopLeft|UIRectCornerBottomLeft withView:leftView andSize:size];//leftView 左上，左下圆角
    [self drawCorner:UIRectCornerTopRight|UIRectCornerBottomRight withView:rightView andSize:size];//rightView 右上，右下圆角
}

//贝塞尔曲线重新绘制layer
-(void)drawCorner:(UIRectCorner)corner withView:(UIView *)view andSize:(CGSize)size{
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:view.bounds byRoundingCorners:corner cornerRadii:size];
    CAShapeLayer *shapeLayer = [CAShapeLayer layer];
    shapeLayer.frame = view.bounds;
    shapeLayer.path = maskPath.CGPath;
    view.layer.mask = shapeLayer;
}

WechatIMG1.png