美文网首页iOS新手学习
iOS设置圆角方法以及指定位置设圆角

iOS设置圆角方法以及指定位置设圆角

作者: 佐_笾 | 来源:发表于2019-03-29 19:54 被阅读0次

    更正

    经过代码以及instruments工具测试,以下更正

    官方对离屏渲染产生性能问题也进行了优化:

    iOS 9.0 之前UIimageView跟UIButton设置圆角都会触发离屏渲染。

    iOS 9.0 之后UIButton设置圆角会触发离屏渲染,而UIImageView里png图片设置圆角不会触发离屏渲染了,如果设置其他阴影效果之类的还是会触发离屏渲染的。

    第一种方法:通过设置layer的属性

    代码:

    UIImageView *imageView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"TestImage"]];
    // 只需设置layer层的两个属性
    // 设置圆角
    imageView.layer.cornerRadius = 50;
    // 将多余的部分切掉
    imageView.layer.masksToBounds = YES;
    [self.view addSubview:imageView];
    

    这个方法里maskToBounds会触发离屏渲染,GPU在当前屏幕缓冲区外新开辟了一个渲染缓冲区进行工作,也就是离屏渲染,这会给我们带来额外的性能损耗,如果这样的圆角操作达到一定数量,会触发缓冲区的频繁合并和上下文的频繁切换,性能的代价会宏观的表现在用户体验上<掉帧>。

    第二种方法:使用贝塞尔曲线UIBezierPath和Core Graphics框架画出一个圆角

    代码:

     UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 100, 100, 100)];
     imageView.image = [UIImage imageNamed:@"TestImage.jpg"];
     // 开始对imageView进行画图
     UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 0.0);
     // 使用贝塞尔曲线画出一个圆形图
     [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds cornerRadius:imageView.frame.size.width] addClip];
     [imageView drawRect:imageView.bounds];
     imageView.image = UIGraphicsGetImageFromCurrentImageContext();
     // 结束画图
     UIGraphicsEndImageContext();
     [self.view addSubview:imageView];
    
    • UIGraphicsBeginImageContextWithOption(CGSize size, BOOL opaque, CGFloat scale)各参数的含义:
    • size ---新创建的文图上下文大小
    • opaque --- 透明开关,如果图形完全不用透明,设置为YES以优化位图的存储。
    • scale --- 缩放因子。虽然这里可以用[UIScreen mainScreen].scale来获取,但实际上设为0后,系统会自动设置正确的比例

    第三种方法: 使用Core Graphics框架画出一个圆角

    代码:

    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 100, 100)];
    imageView.image = [UIImage imageNamed:@"TestImage.jpg"];
    
    // 开始对imageView进行画图
    UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, 0.0);
    
    // 获取图形上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    
    // 设置一个范围
    CGRect rect = CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height);
    
    // 根据一个rect创建一个椭圆
    CGContextAddEllipseInRect(ctx, rect);
    
    // 裁剪
    CGContextClip(ctx);
    
    // 讲原照片画到图形上下文
    [imageView.image drawInRect:rect];
    
    // 从上下文上获取裁剪后的照片
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    
    // 关闭上下文
    UIGraphicsEndImageContext();
    imageView.image = image;
    [self.view addSubview:imageView];
    

    第四种方法: 使用CAShapeLayer和UIBezierPath设置圆角

    代码:

    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 100, 100)];
    imageView.image = [UIImage imageNamed:@"TestImage.jpg"];
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerAllCorners
    cornerRadii:imageView.bounds.size];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
    // 设置大小
    maskLayer.frame = imageView.bounds;
    // 设置图形样子
    maskLayer.path = maskPath.CGPath;
    imageView.layer.mask = maskLayer;
    [self.view addSubview:imageView];
    

    指定需要的角成为圆角(第四种方法的延伸)

    方法:

    + (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect
                              byRoundingCorners:(UIRectCorner)corners
                                    cornerRadii:(CGSize)cornerRadii;
                                    
    corners参数指定了要成为圆角的角, 枚举类型如下:
    typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
        UIRectCornerTopLeft     = 1 <&lt; 0,
        UIRectCornerTopRight    = 1 <&lt; 1,
        UIRectCornerBottomLeft  = 1 <&lt; 2,
        UIRectCornerBottomRight = 1 <&lt; 3,
        UIRectCornerAllCorners  = ~0UL
    };
    
    

    实现代码:

    UIImageView *imageView = [[UIImageView alloc]initWithFrame:CGRectMake(100, 200, 200, 200)];
    imageView.image = [UIImage imageNamed:@"TestImage.jpg"];
    
    // 绘制圆角 需设置的圆角 使用"|"来组合
    UIBezierPath *maskPath = [UIBezierPath bezierPathWithRoundedRect:imageView.bounds byRoundingCorners:UIRectCornerTopLeft |
    UIRectCornerBottomRight cornerRadii:CGSizeMake(30, 30)];
    CAShapeLayer *maskLayer = [[CAShapeLayer alloc]init];
    
    // 设置大小
    maskLayer.frame = imageView.bounds;
    
    // 设置图形样子
    maskLayer.path = maskPath.CGPath;
    imageView.layer.mask = maskLayer;
    [self.view addSubview:imageView];
    

    效果图:


    image.png

    然而第四种方法并不可取,存在离屏渲染。
    进过实际测试之后,以及哪种方法最为可取,具体可以参考iOS圆角四种方法的对比以及性能检测(一定要看哦)

    相关文章

      网友评论

        本文标题:iOS设置圆角方法以及指定位置设圆角

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