iOS 圆角优化

作者: 一本大书 | 来源:发表于2017-02-28 11:43 被阅读306次

    在iOS开发中经常会遇到需要切圆角的需求,最常见的是用户头像。在需要切圆角的图片数量多的情况下,对性能影响非常大。

    我们常用的方法是:

    imageView.layer.cornerRadius = aImageView.frame.size.width/2.0;  
    imageView.layer.masksToBounds = YES;
    

    在这里就不多谈 离屏渲染 了,只要知道,使用上面的代码会发生离屏渲染,频繁发生离屏渲染非常消耗性能。

    优化方案

    • 方法1: 保存视图渲染内容。(略作死)
    • 方法2: 对需要切圆角的图片进行预处理,缓存,显示。
    • 方法3: 覆盖一个圆形镂空图片。

    详解

    第一种方法点这里
    方法2我觉得不妥,因为每次有新的图片进来都要预处理,把要显示的图片切成圆角,缓存起来。

    详细介绍第三种:
    在需要显示圆角的图层上覆盖一个镂空的图片,根据颜色,圆角的radius,图片尺寸,这几个参数作为key缓存这张镂空的图片,下次需要覆盖的时候去判断是否已经缓存,复用。
    缺点:对视图的背景有要求,单色背景效果就最为理想。

    注意红色的内容

    开发的时候,红色这个地方应该设置为跟背景同一个颜色。


    实际效果

    核心代码如下,我把它写层一个UIView的分类,拖进自己的工程里边,import一下就能用了!

    完整代码链接 << 点这里

    - (void)addImageWithCornerRadius:(CGFloat)radius color:(UIColor *)color size:(CGSize)size {
        
        // 根据颜色,圆角程度,尺寸 命名文件
        NSString *name = [NSString stringWithFormat:@"%@_%f_%@.png", [color colorComponent], radius, NSStringFromCGSize(size)];
        NSString *fullPath = [[self pathWithFolder:@"CornerRadius"] stringByAppendingPathComponent:name];
        
        // 判断本地是否已经有缓存了
        NSFileManager *fileManager = [NSFileManager defaultManager];
        BOOL isExists = [fileManager fileExistsAtPath:fullPath];
        UIImage *image;
        if (isExists) {
            // 从缓存中获取
            image = [UIImage imageNamed:fullPath];
        } else {
            // 缓存中没有 -> 生成图片 -> 保存
            image = [self getImageWithSize:size color:color radius:radius];
            NSData *data = UIImagePNGRepresentation(image);
            [data writeToFile:fullPath atomically:YES];
        }
        // 将生成的图片覆盖到当前的图层上
        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
        imageView.frame = CGRectMake(0, 0, size.width, size.height);
        [self addSubview:imageView];
    }
    

    相关文章

      网友评论

      • oceanfive:你这第三种方法,如果图片的大小和UIImageView的大小不一致,设置myImageView.contentMode = UIViewContentModeScaleAspectFill; 会出现显示异常,图片会超过UIImageView的显示范围的
        一本大书:@oceanfive 设置.layer.masksToBounds = YES 可以解决,只要不同时设置layer.cornerRadius>0就不会产生离屏渲染
      • Boxzhi:要是需求还要有边框呢
        一本大书:如果有边框,就让美工给你切图了。如果用代码绘制边框,这个圆角优化就没意义了。
        一本大书:你好,我不太明白你的意思,你把需求截图发给我看下,我也好作为素材更新下文章和demo。
        332960910@qq.com

      本文标题:iOS 圆角优化

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