关于iOS控件设置圆角的一些个人看法(iOS 10.0.2)

写在最前面:该文章使用的机器是iPhone 6(iOS 10.0.2),得出的结果跟iOS 8和iOS 9不太一样,关于iOS 8和iOS 9的结论,在最后有。

这几天看简书上的文章,看到几篇关于控件设置圆角的,大多数都说是layer.masksToBounds=YES会引起FPS的降低,但是经过我的测试,并不是这句话引起的,而是这句话再加上设置边框,即layer.borderWidth=1.0,只要borderWidth不等于0,再加上layer.masksToBounds=YES,FPS一定降低。下面我就把我的测试过程说一下,有不对的地方希望大家指正。

先来看一下,我的界面

测试界面

这是我用来测试的界面,下面我就一步步的进行操作,然后用Instruments进行测试,看一下FPS的变化。

首先,我们先什么也不设置,看一下这种情况下,FPS值的变化

什么页不设置时的界面

看一下此时的FPS值的变化:

什么页不设置时的FPS

第二步,我们先设置圆角(打开页面左下角的开关),测试界面如下

设置圆角后的界面

此时的FPS变化如下

只设置圆角后的FPS值

从上面的FPS图可以看出,在只设置圆角的情况下,跟什么也不设置相比,FPS的值并没有发生什么大的变化。


第三步,我们只设置边框,不设置layer.masksToBounds=YES这句话,我们再来看看情况如何,(这种情况下是关闭左下角开关,右下角选中显示边框选项)

只设置边框时的界面

还是看一下此时的FPS变化如何

只设置边框时的FPS

从上面的FPS变化图我们也可以看出,在只设置边框时,FPS的变化也不是很大。


最后一步,我们同时设置圆角跟边框,看一下此时又是什么情况呢

同时设置圆角跟边框的界面

此时FPS变化图如下:

同时设置圆角跟边框的FPS

哇奥,可怕的事情发生了,FPS降到了25左右。

经过以上4步,我初步得出结论,只设置圆角是不会对FPS造成很大影响的,只设置边框也不会对FPS造成大的影响,但是如果同时设置圆角跟边框的话,FPS的值会受到很大影响,而且设置的越多,FPS下降越快

最后贴一下我的Demo,想研究一下的同学可以看一下。

这就是我经过测试后得出的结论,如果有不对的地方希望指正,谢谢!

补充:

1.上面的例子是在我的iPhone 6(iOS 10.0.2)上进行测试的,今天我用一台iPhone 5S(iOS 8.1.2)和一台iPhone 6plus(iOS 9.2.1)上又分别进行了测试,结果让我大吃一惊,在今天测试的2台机器上显示的结果都表明,FPS的降低确实跟layer.maskBounds = YES;有关,跟边框是无关的,所以我推测,应该是iOS 10上对layer.maskBounds = YES;进行了优化。实在抱歉,由于我测试的疏忽导致得出了错误的结论,所以,之前说的还是对的,确实是layer.maskBounds = YES;造成了FPS的降低。

2.今天我观察了一下新浪微博的头像,他的头像是圆形的,并且有边框,但是他的列表页滚动时没有明显的卡顿现象,我试了一下我的Demo,把每个cell只留下一个UIImageView,然后将它设置成圆形并且添加边框,滑动时也非常流畅,也就是说,每个cell中有一个这样的图片时,对整个界面的流畅度影响不大,在平时的项目中,我们顶多也就会像新浪微博一样,一个cell中只有一个这样的圆形图片,所以,根本不用什么优化,直接用最简单的方法即可。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,573评论 6 30
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥iOS动画全貌。在这里你可以看...
    F麦子阅读 5,147评论 5 13
  • 提供了基于Swift3.0模仿的新浪微博的Demo,大家可以下载看一看:基于Swift3.0高仿的微博客户端,里面...
    skylor阅读 6,909评论 7 20
  • 一、前因 CALayer由背景色backgroundColor、内容contents、边缘borderWidth&...
    doudo阅读 12,258评论 1 23
  • 没想到我的业余应用,简书App,竟然有锤子专属图标。当初一个小小的念头,一个程序员发明轮子的冲动,还是给这个厚重的...
    快乐的小问酱阅读 398评论 1 2