美文网首页
2019-08-22 cell 视觉效果

2019-08-22 cell 视觉效果

作者: 你也想起舞吧 | 来源:发表于2019-12-19 16:34 被阅读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

    相关文章

      网友评论

          本文标题:2019-08-22 cell 视觉效果

          本文链接:https://www.haomeiwen.com/subject/xvegsctx.html