美文网首页
封装图片设置为圆形

封装图片设置为圆形

作者: 凡尘一笑 | 来源:发表于2016-08-08 10:21 被阅读53次

    在iOS开发中,我们经常会遇到把头像或者图片什么的设置为圆形
    大部分人的第一思路是利用图层:让cornerRadius 等于宽度的一半
    一:

    self.lywimage.layer.masksToBounds = YES;
     self.lywimage.layer.cornerRadius = self.lywimage.lyw_W * 0.5;
    
    

    效果图:


    Snip20160808_1.png

    二:在xib 或者Storyboard中

    Snip20160808_2.png

    效果图


    Snip20160808_3.png

    注意:如果你是将Xib 或者Storyboard将图片拖线过去代码中,则使用第一种方式就可以设置圆角
    但是这种方式都是不好的,因为这里涉及到一个性能优化的问题,
    比如有很多头像之类的需要设置为圆角这样会让UITableView非常卡顿


    IMG_0677.JPG

    所以我们尽量别使用这种方法

    这是个面试题,很多面试官有时候会问怎么优化UITableView 
    简单说一下这个面试题:
    1.使用不透明视图。
    2.不要重复创建不必要的table cell。
    3.减少视图的数目。
    4.不要做多余的绘制工作。
    5.预渲染图像。
    6.不要阻塞主线程。
    

    上面给大家介绍了很多初学者使用的方法,下面给大家封装一个图片画圆
    第一步:


    Snip20160808_4.png

    第二步:在UIImage+EXtension.h文件中提供一个对象方法出来


    Snip20160808_5.png
    - (instancetype)circleImage;
    

    第三步:在UIImage+EXtension.m文件中用


    Snip20160808_8.png
    - (instancetype)circleImage
    {
        // 开启图形上下文
        UIGraphicsBeginImageContext(self.size);
        
        // 上下文
        CGContextRef ctx = UIGraphicsGetCurrentContext();
        
        // 添加一个圆
        CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
        CGContextAddEllipseInRect(ctx, rect);
        
        // 裁剪
        CGContextClip(ctx);
        
        // 绘制图片
        [self drawInRect:rect];
        
        // 获得图片
        UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
        
        // 关闭图形上下文
        UIGraphicsEndImageContext();
        
        return image;
    }
    

    第四步:导入头文件之后,利用这两句代码就可以实现


    Snip20160808_6.png
    UIImage *image = [UIImage circleImage:@"ic_launcher_xxx"];
     self.lywimage.image = [image circleImage];
    

    效果图是一样的。给大家看一下。大家可以看时间,我上面截的图是九点多,现在截图是十一点多。


    Snip20160808_11.png

    有时候我们希望直接传一个图片过去然后就画好了圆这样更方便直接,
    虽然这样就可以实现

     self.lywimage.image = [[UIImage circleImage:@"ic_launcher_xxx"]  circleImage];
    
    

    但是我给大家再提供一个方法出来
    在UIImage+EXtension.h文件中


    Snip20160808_9.png

    在UIImage+EXtension.m文件中


    Snip20160808_10.png

    然后我们就可以直接使用了 这里我给大家截取出刚才的那几个画圆方法


    Snip20160808_12.png

    以后大家需要实现画圆,只需要把这个扩展的类
    (就是UIImage+EXtension.h,和UIImage+EXtension.m)拖进文件里面调用这提供的两个方法就可以实现画圆功能了

    扩展 :如果在上面的基础上给UIImageView添加直接设置图片为圆形的方法
    前提是有之前的那些步骤

    Snip20160808_14.png Snip20160808_15.png Snip20160808_18.png

    使用方法


    Snip20160808_18.png

    效果图


    Snip20160808_19.png

    Dome:https://github.com/LYWGod/circleImage
    备注:

    如果有不足或者错误的地方还望各位读者批评指正,可以评论留言,笔者收到后第一时间回复。

    QQ/微信:2366889552 /lan2018yingwei。

    简书号:凡尘一笑:[简书]

    http://www.jianshu.com/users/0158007b8d17/latest_articles

    感谢各位观众老爷的阅读,如果觉得笔者写的还凑合,可以关注或收藏一下,不定期分享一些好玩的实用的demo给大家。

    文/凡尘一笑(简书作者)

    原文链接: http://www.jianshu.com/p/8ae080edb3ea

    著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

    相关文章

      网友评论

          本文标题:封装图片设置为圆形

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