美文网首页OC-开发案例收集
设置UITableView的圆角(OC和swift)

设置UITableView的圆角(OC和swift)

作者: 异乡人_4f2a | 来源:发表于2020-12-17 21:02 被阅读0次

    先看以下的效果图

    在UITableViewDelegate的willDisplayCell方法中,通过UIBezierPath绘制显示圆角即可

    OC实现的方法:

    - (void)tableView:(UITableView*)tableViewwillDisplayCell:(UITableViewCell*)cellforRowAtIndexPath:(NSIndexPath*)indexPath {

        // 圆角角度

          CGFloatradius =10.f;

          // 设置cell 背景色为透明

          cell.backgroundColor = UIColor.clearColor;

          // 创建两个layer

          CAShapeLayer*normalLayer = [[CAShapeLayeralloc]init];

          CAShapeLayer*selectLayer = [[CAShapeLayeralloc]init];

          // 获取显示区域大小

          CGRectbounds =CGRectInset(cell.bounds,10,0);

          // 获取每组行数

          NSIntegerrowNum = [tableViewnumberOfRowsInSection:indexPath.section];

          // 贝塞尔曲线

          UIBezierPath*bezierPath =nil;

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

        if(rowNum ==1) {

            // 一组只有一行(四个角全部为圆角)

            bezierPath = [UIBezierPathbezierPathWithRoundedRect:bounds

                                               byRoundingCorners:UIRectCornerAllCorners

                                                     cornerRadii:CGSizeMake(radius, radius)];

        }else{

            if(indexPath.row==0) {

                // 每组第一行(添加左上和右上的圆角)

                bezierPath = [UIBezierPathbezierPathWithRoundedRect:bounds

                                                   byRoundingCorners:(UIRectCornerTopLeft|UIRectCornerTopRight)

                                                         cornerRadii:CGSizeMake(radius, radius)];

            }else if(indexPath.row== rowNum -1) {

                // 每组最后一行(添加左下和右下的圆角)

                bezierPath = [UIBezierPathbezierPathWithRoundedRect:bounds

                                                   byRoundingCorners:(UIRectCornerBottomLeft|UIRectCornerBottomRight)

                                                         cornerRadii:CGSizeMake(radius, radius)];

            }else{

                // 每组不是首位的行不设置圆角

                bezierPath = [UIBezierPathbezierPathWithRect:bounds];

            }

        }

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

        // 把已经绘制好的贝塞尔曲线路径赋值给图层,然后图层根据path进行图像渲染render

        normalLayer.path= bezierPath.CGPath;

        selectLayer.path= bezierPath.CGPath;

        UIView*nomarBgView = [[UIViewalloc]initWithFrame:bounds];

        // 设置填充颜色

        normalLayer.fillColor = [UIColor colorWithWhite:0.95 alpha:1.0].CGColor;

        // 添加图层到nomarBgView中

        [nomarBgView.layerinsertSublayer:normalLayeratIndex:0];

        nomarBgView.backgroundColor = UIColor.clearColor;

        cell.backgroundView= nomarBgView;

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

        UIView*selectBgView = [[UIViewalloc]initWithFrame:bounds];

        selectLayer.fillColor = [UIColor colorWithWhite:0.95 alpha:1.0].CGColor;

        [selectBgView.layerinsertSublayer:selectLayeratIndex:0];

        selectBgView.backgroundColor = UIColor.clearColor;

        cell.selectedBackgroundView= selectBgView;

    }

    swift实现的方法:

     func tableView(_tableView:UITableView, willDisplay cell:UITableViewCell, forRowAt indexPath:IndexPath) {

            // 圆角角度

            let radius =calculate(w:35.0)

            // 设置cell 背景色为透明

            cell.backgroundColor = UIColor.clear

            // 创建两个layer

            let normalLayer =CAShapeLayer()

            let selectLayer =CAShapeLayer()

            // 获取显示区域大小

            let bounds = cell.bounds.insetBy(dx:10.0, dy:0)

            // 获取每组行数

            let rowNum = tableView.numberOfRows(inSection: indexPath.section)

            // 贝塞尔曲线

            var bezierPath:UIBezierPath

            if(rowNum==1) {

                // 一组只有一行(四个角全部为圆角)

                bezierPath =UIBezierPath(roundedRect: bounds, byRoundingCorners: .allCorners, cornerRadii:CGSize(width: radius, height: radius))

            }else{

                if(indexPath.row==0) {

                    // 每组第一行(添加左上和右上的圆角)

                    bezierPath =UIBezierPath(roundedRect: bounds, byRoundingCorners: [UIRectCorner.topLeft,UIRectCorner.topRight], cornerRadii:CGSize(width: radius, height: radius))

                }elseif(indexPath.row==rowNum-1) {

                    // 每组最后一行(添加左下和右下的圆角)

                    bezierPath =UIBezierPath(roundedRect: bounds, byRoundingCorners: [UIRectCorner.bottomLeft,UIRectCorner.bottomRight], cornerRadii:CGSize(width: radius, height: radius))

                }else{

                    // 每组不是首位的行不设置圆角

                    bezierPath =UIBezierPath(rect: bounds)

                }

            }

            // 把已经绘制好的贝塞尔曲线路径赋值给图层,然后图层根据path进行图像渲染render

            normalLayer.path= bezierPath.cgPath;

            selectLayer.path= bezierPath.cgPath;

            let nomarBgView =UIView(frame: bounds);

            // 设置填充颜色

            normalLayer.fillColor=UIColor.white.cgColor

            // 添加图层到nomarBgView中

            nomarBgView.layer.insertSublayer(normalLayer, at:0)

            nomarBgView.backgroundColor=UIColor.clear

            cell.backgroundView= nomarBgView

            let selectBgView =UIView(frame: bounds)

            selectLayer.fillColor=  UIColor.white.cgColor

            selectBgView.layer.insertSublayer(selectLayer, at:0)

            selectBgView.backgroundColor=UIColor.clear

            cell.selectedBackgroundView= selectBgView

        }

    相关文章

      网友评论

        本文标题:设置UITableView的圆角(OC和swift)

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