iOS: UIView,UILabel等 设置圆角的正确方式

iOS: UIView,UILabel等 设置圆角的正确方式,第1张

之前的方式一般是这样的:

label.layer.cornerRadius = 2

label.layer.masksToBounds = YES / label.layer.clipToBounds = YES

这样会出现离屏渲染,如果是每个TableViewCell设置一些圆角,就会使列表滑动起来有明显卡顿。

正确方式:

摒弃label.layer.masksToBounds = YES / label.layer.clipToBounds = YES方法。

情形1:

 对于不需要设置背景色的情况,只设置borderWidth、borderColor,cornerRadius,就可以实现圆角功能。

情形2:

 对于设置背景色的情况,不去设置label的backgroundColor,而是直接设置label.layer.backgroundColor,这样就可以实现单独设置cornerRadius,显示圆角的效果。

备注:

对于情形2,设置label的backgroundColor同时设置cornerRadius是不能正常显示圆角的,再同时设置borderWidth、borderColor也不行。原因是:UILabel设置backgroundColor的行为,不再是设定layer的背景色而是为contents设置背景色。

先看以下的效果图

- (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

}

 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

    }

先添加QuartzCore.framework这个库,还有在你的文件中包含#import 。

在实际的应用中,我们总感觉圆角的东西比较好看, 像button,label,image等等,以前的时候我就经常给那些控件添加一个UIImageView作为背景,再搞张圆角的图片

viewT.layer.cornerRadius = 10//设置那个圆角的有多圆

viewT.layer.borderWidth = 10//设置边框的宽度,当然可以不要

viewT.layer.borderColor = [[UIColor redColor] CGColor]//设置边框的颜色

viewT.layer.masksToBounds = YES//设为NO去试试。设置YES是保证添加的图片覆盖视图的效果

UIImageView *v=[[UIImageView alloc] initWithFrame:CGRectMake(25, 25, 100, 100)]v.image=[UIImage imageNamed:@"face01.png"][[v layer] setBorderWidth:2.0]//画线的宽度 [[v layer] setBorderColor:[UIColor blackColor].CGColor]//颜色 [[v layer]setCornerRadius:15.0]//圆角 v.backgroundColor=[UIColor redColor]//[v.layer setCornerRadius:8.0][v.layer setMasksToBounds:YES][self.view addSubview:v][v release]


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/bake/11874760.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存