美文网首页
iOS 视图圆角那些事儿

iOS 视图圆角那些事儿

作者: Smallwolf_JS | 来源:发表于2020-03-28 18:33 被阅读0次

    切圆角共有以下三种方案:

    • cornerRadius + masksToBounds:适用于单个视图或视图不在列表上且量级较小的情况,会导致离屏渲染。
    • CAShapeLayer+UIBezierPath:会导致离屏渲染,性能消耗严重,不推荐使用。
    • Core Graphics:不会导致离屏渲染,推荐使用。
    1、很显然第一种就不过多介绍了,大家最熟悉的,直接设置layer的属性就可以.

    但是需要注意第一种出现离屏渲染的原因是masksToBounds
    下面是cornerRadius的解释

    By default, the corner radius does not apply to the image in the layer’s contents 
    property; it applies only to the background color and border of the layer. 
    However, setting the masksToBounds property to true causes the content to be 
    clipped to the rounded corners.
    

    也就是说在默认情况下,这个属性只会影响视图的背景颜色和 border。对于 UILabel 这样内部还有子视图的控件就无能为力了

    2、第二种也比较常用:

    这里贴下实现的示例代码

    UIBezierPath: UIBezierPath是在 UIKit 中的一个类,继承于NSObject,可以创建
    基于矢量的路径。使用此类可以定义常见的圆形、多边形等形状 。我们使用直
    线、弧(arc)来创建复杂的曲线形状。每一个直线段或者曲线段的结束的地方是
    下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个
    UIBezierPath对象定义一个完整的路径包括一个或者多个subpaths。
    
    
    CAShapeLayer: CAShapeLayer顾名思义,继承于CALayer。 每个
    CAShapeLayer对象都代表着将要被渲染到屏幕上的一个任意的形状(shape)。具
    体的形状由其path(类型为CGPathRef)属性指定。 普通的CALayer是矩形,所以
    需要frame属性。CAShapeLayer初始化时也需要指定frame值,但 它本身没有形
    状,它的形状来源于其属性path 。CAShapeLayer有不同于CALayer的属性,它
    从CALayer继承而来的属性在绘制时是不起作用的
    不需要获取上下文
    //设置圆角
        UIBezierPath *path;
        path = [UIBezierPath bezierPathWithRoundedRect:self.bounds byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(self.frame.size.width, self.frame.size.height)];
        CAShapeLayer *maskLayer = [CAShapeLayer layer];
        maskLayer.frame = self.bounds;
        maskLayer.path = path.CGPath;
        self.layer.mask = maskLayer;
    
    CAShapeLayer有着几点很重要:
    1. 它依附于一个给定的path,必须给与path,而且,即使path不完整也会自动首尾相接
    2. strokeStart以及strokeEnd代表着在这个path中所占用的百分比
    3. CAShapeLayer动画仅仅限于沿着边缘的动画效果,它实现不了填充效果
    
    3、第三种方式是通过绘图的方式进行做圆角

    示例代码

    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
     imageView.image = [UIImage imageNamed:@"1"];
     //开始对imageView进行画图
     UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 1.0);
     //使用贝塞尔曲线画出一个圆形图
     [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width] addClip];
     [imageView drawRect:imageView.bounds];
     imageView.image = UIGraphicsGetImageFromCurrentImageContext();
     //结束画图
     UIGraphicsEndImageContext();
     [self.view addSubview:imageView];
    

    相关文章

      网友评论

          本文标题:iOS 视图圆角那些事儿

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