UILabel在iOS8下的Color Blended Layers

      现在App的页面越来越复杂,性能优化成为了开发当中非常重要的一环,并且对性能的追求越来越极致,本文将主要讲述如何解决UILabel在显示中文时,像素混合的问题,由于内容不多,所以就不作目录了,费话不多说,马上开始。

      首先补充一些基础的知识点(以下知识点,均在像素对齐的情形下),我们知道GPU是图形硬件,主要的工作是混合纹理并算出像素的RGB值,这是一个非常复杂的计算过程,计算的过程越复杂,所需要消耗的时间就越长,GPU的使用率就越高,这并不是一个好的现像,而我们需要做的是减少GPU的计算量。

      一个页面可以只有一个视图,也可以有很多视图,每个视图都会对应着一个的底图层,页面上的所有图层构成了一个图层树(模型树),这个图层树便是我们在屏幕上能看到的一切的来源,我们可以假设一个图层(CALayer)就是一个纹理(Texture),接下来,我会用图层来替代纹理。如果当前我们拥有一个和屏幕大小一致的单一图层,那么屏幕上的每一个像素相当于图层中的一个像素,这个时候,我们在这个图层上放置一个完全不透明的图层,那么GPU将会把上面的图层合成到下面的图层当中,由于上面的是一个完全不透明的图层,所以上面的图层会部份遮盖掉下面的图层,而在遮盖掉的矩形区域内,GPU会直接使用上面图层的像素来显示。如果我们最底的图层上放置的是一个有透明度的图层,那么在这个矩形区域里,GPU需要混合上下两个图层来计算出在屏幕上显示出来的像素的RGB值。若在同一个区域内,存在着多个有透明度的图层,那么GPU需要更多的计算才能得出最终像素的RGB值。而我们要做的就是避免像素混合,尽可能地为视图设置背景色,且设置opaque为YES,这会大大减少GPU的计算。

      本文的主角是UILabel,UILabel会将字符串与背景色绘制成位图,并且显示出来,请看下图。

      接下来看一下像素混合的情况(可以通过模拟器的Debug中Color Blended Layers或Instruments中Core Animation的Color Blended Layers打开)。


      都是绿色,表示没有出现像素混合的情况,这时我们把label的背景设为透明。

      上下两个视图变成了红色,出现了像素混合的情况,表示在这两个红色的区域内,GPU需要做像素混合的计算,这无疑是增加了GPU的工作,所以在任何情况下,我们都应该设置UILabel的背景色为不透明。

      刚刚用来做测试的系统版本为iOS7,那么现在我们来看看iOS8的情况。

      看上去跟iOS7的效果一样,现在我们来看一下像素混合的情况。

      文本区域是绿色,表示没有像素混合,但显示的是英文,接下来我们试着显示中文并看看像素混合的情况。

      虽然设置了背景色,但在iOS8上用UILabel显示中文却出现了像素混合的情况,这是为什么呢?我们来看看UILabel在iOS8前后的变化,在iOS8以前,UILabel使用的是CALayer作为底图层,而在iOS8开始,UILabel的底图层变成了_UILabelLayer,绘制文本也有所改变,就像上图所视(在iOS8刚发布的时候,我一度怀疑Apple歧视中文)。

      那怎么解决呢?首先我们来观察一下上图,从图中我们可以看到在背景色的四周多了一圈透明的边,而这一圈透明的边明显超出了图层的矩形区域,既然发现这了一点,那么解决方案就很明了了。

      设置图层的masksToBounds为YES时,图层将会沿着Bounds进行裁剪,我们来看一下修改后的效果。

      label变回了绿色,表示像素混合问题已解决。

      Tips:可以的话,要求美工在切图的时候,一定不要切出那些留有透明区域的图片,不然在你显示图片的时候,同样会出现像素混合问题。

      本文旨在解决UILabel在iOS8及以后的系统版本中显示中文像素混合的问题,其它的性能优化,像离屏渲染,像素对齐等,网上已有大量的技术文,本文再提及也是大同小异。如果文中有说错的,还望指出,第一次写技术文,表述能力有限。

      下期预告:由于现在App的页面越来越复杂,有些页面需要比较长的时间来加载,下一篇技术文将会讲述,在Push页面时的性能优化。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 210,914评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 89,935评论 2 383
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,531评论 0 345
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,309评论 1 282
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,381评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,730评论 1 289
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,882评论 3 404
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,643评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,095评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,448评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,566评论 1 339
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,253评论 4 328
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,829评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,715评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,945评论 1 264
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,248评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,440评论 2 348

推荐阅读更多精彩内容