2019-08-22 cell 视觉效果

2019-12-19  本文已影响0人  你也想起舞吧

自定义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
上一篇下一篇

猜你喜欢

热点阅读