iOS UITableView设置section圆角

作者: 写_Bug_小能手 | 来源:发表于2019-10-28 16:11 被阅读0次
    分组圆角.gif

    这个一直觉得简单又不知道从哪儿下手的功能,今天有空,找了下资料动手做一做
    主要利用UITableViewDelegatewillDisplayCell方法结合UIBezierPath绘制显示的圆角

    - (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath;
    
      // 圆角角度
        CGFloat radius = 10.f;
        // 设置cell 背景色为透明
        cell.backgroundColor = UIColor.clearColor;
        // 创建两个layer
        CAShapeLayer *normalLayer = [[CAShapeLayer alloc] init];
        CAShapeLayer *selectLayer = [[CAShapeLayer alloc] init];
        // 获取显示区域大小
        CGRect bounds = CGRectInset(cell.bounds, 10, 0);
        // 获取每组行数
        NSInteger rowNum = [tableView numberOfRowsInSection:indexPath.section];
        // 贝塞尔曲线
        UIBezierPath *bezierPath = nil;
    

    每组考虑只有一行和有多行的情况,若行数为1,则这个cell的每个角都是圆角,否则第一行的左上右上为圆角,最后一行的左下右下为圆角

        if (rowNum == 1) {
            // 一组只有一行(四个角全部为圆角)
            bezierPath = [UIBezierPath bezierPathWithRoundedRect:bounds
                                               byRoundingCorners:UIRectCornerAllCorners
                                                     cornerRadii:CGSizeMake(radius, radius)];
        } else {
            if (indexPath.row == 0) {
                // 每组第一行(添加左上和右上的圆角)
                bezierPath = [UIBezierPath bezierPathWithRoundedRect:bounds
                                                   byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight)
                                                         cornerRadii:CGSizeMake(radius, radius)];
                
            } else if (indexPath.row == rowNum - 1) {
                // 每组最后一行(添加左下和右下的圆角)
                bezierPath = [UIBezierPath bezierPathWithRoundedRect:bounds
                                                   byRoundingCorners:(UIRectCornerBottomLeft|UIRectCornerBottomRight)
                                                         cornerRadii:CGSizeMake(radius, radius)];
            } else {
                // 每组不是首位的行不设置圆角
                bezierPath = [UIBezierPath bezierPathWithRect:bounds];
            }
        }
    

    然后将贝塞尔曲线的路径赋值给图层,并将图层添加到view中

        // 把已经绘制好的贝塞尔曲线路径赋值给图层,然后图层根据path进行图像渲染render
        normalLayer.path = bezierPath.CGPath;
        selectLayer.path = bezierPath.CGPath;
        
        
        UIView *nomarBgView = [[UIView alloc] initWithFrame:bounds];
        // 设置填充颜色
        normalLayer.fillColor = [UIColor colorWithWhite:0.95 alpha:1.0].CGColor;
        // 添加图层到nomarBgView中
        [nomarBgView.layer insertSublayer:normalLayer atIndex:0];
        nomarBgView.backgroundColor = UIColor.clearColor;
        cell.backgroundView = nomarBgView;
    

    此时圆角显示就完成了,但是如果没有取消cell的点击效果,还是会出现一个灰色的长方形的形状,再用上面创建的selectLayercell添加一个selectedBackgroundView

        UIView *selectBgView = [[UIView alloc] initWithFrame:bounds];
        selectLayer.fillColor = [UIColor colorWithWhite:0.95 alpha:1.0].CGColor;
        [selectBgView.layer insertSublayer:selectLayer atIndex:0];
        selectBgView.backgroundColor = UIColor.clearColor;
        cell.selectedBackgroundView = selectBgView;
    

    相关文章

      网友评论

        本文标题:iOS UITableView设置section圆角

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