最近在做GPU图层显示的优化,其中关于Color Misaligned Images优化文章有很多,但在具体优化的时候还是遇到了点的问题,特此记录。

检测方式

以下两种方式均可发现存在Misaligned Images问题的地方:

  • 模拟器调试时,打开模拟器的Debug - Color Misaligned Images菜单选项。最快捷,但仅限模拟器上查看。
  • Instrument性能检测时,选中Core Animation模板,在Display Settings中勾选Color Misaligned Images选项。可针对模拟器和真机,可查看真机上所有应用的像素混合情况。

问题定义

打开开关后,看到部分视图会有黄色或洋红色(Magenta)的图层标记,代表其像素不对齐。

不对齐:视图或图片的点数(point),不能换算成整数的像素值(pixel),导致显示视图的时候需要对没对齐的边缘进行额外混合计算,影响性能。

洋红色:UIView的frame像素不对齐,即不能换算成整数像素值。

黄色:UIImageView的图片像素大小与其frame.size不对齐,图片发生了缩放造成。

优化方式

frame像素不对齐

针对frame像素不对齐,借助ceilf()、floorf()、CGRectIntegral()等将小数点后数据除去即可。

使用floorf时,需要注意是否会因为向下取整而影响视图的显示。

关于CGRectIntegral的使用,《Aligned UIViews》这篇文章中提到一种非常特殊的情况,在layoutSubviews中使用CGRectIntegral来重新设置frame,可能导致同一个view在不同时候计算得到到的x和width不同的情况,但实际测试并没有发现文章中描述的问题。

0.5个点,会造成像素不对齐吗?

在@2x屏幕上不会,但@3x屏幕上会。会不会由最终计算得像素值是不是整数判断,比如上图中在@3x屏幕上,第4个label高度为40.1导致了像素不对齐,但第3个label高度为40+1/3没导致像素不对齐,在@2x屏幕上当然这两个宽度都会导致像素不对齐。

像素不对称齐的元素一般为UILabel或UIImageView。

特别注意,上图中UILabel宽度不为整数时并没有有像素不对齐,但x、y、height不为整数就会导致像素不对齐。

图片像素不对齐

上图的前4个UIImageView,显示的是同一张图片,该图片@2x像素为128x128px,@3x像素为192x192px,仅当UIImageView的size为64x64的时候才没有像素不对齐。

遇到这种情况需要严格约束Icon图片和UIImageView的尺寸。

还有种情况即图片是从服务端获取到的,大小不规则。直接在UIImageView上显示容易出现像素不对齐。

解决方法:将下载到的图片,缩放到与UIImageView对应的尺寸,再显示出来。

多种图片缩放方式及其性能比较可参考《Image Resizing Techniques》,此处提供一个简单实现:

@implementation UIImage(Resize)

/**
 将UIImage缩放到指定大小

 @param boxSize 一般为UIImageView的size
 @return 缩放后的UIImage
 */

- (UIImage *)imageShowInSize:(CGSize)boxSize {
    if (CGSizeEqualToSize(boxSize, self.size)) {
        return self;
    }

    CGFloat screenScale = [[UIScreen mainScreen] scale];
    CGFloat rate = MAX(boxSize.width / self.size.width, boxSize.height / self.size.height);
    CGSize resize = CGSizeMake(self.size.width * rate , self.size.height * rate );
    CGRect drawRect = CGRectMake(-(resize.width - boxSize.width) / 2.0 ,
                                 -(resize.height - boxSize.height) / 2.0 ,
                                 resize.width,
                                 resize .height);
    boxSize = CGSizeMake(boxSize.width, boxSize.height);
    UIGraphicsBeginImageContextWithOptions(boxSize, YES, screenScale);
    [self drawInRect:drawRect];
    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return image;
}
@end

注意

  • 具体使用时,可能需要根据UIImageView的contentMode属性调整缩放方式。
  • 该方法执行会花费一定的时间,在列表上显示需要缩放的图片,为了不影响列表滚动流程体验,该操作应放到非主线进行,并考虑将缩放后的结果缓存以便下次直接使用。
  • 根据原始图片尺寸大小,当前状况是否明显影响列表滚动等具体情况再决定是否优化,比如目前微博首页的用户头像和九宫格图片不存在像素不对齐情况,而微信朋友圈的用户头像和图片是染成黄色的像素不对齐。

UITableview上UILabel的不对齐

在某些UITableview上,会发现尽管UILabel的frame已经取整了,但所有Cell上Label还是全都被染成了红色,非常不解。

打开Xcode的Debug View Hierarchy,可以看到进入页面UITableview还没做任何滚动时,UILabel的frame没有异常,但是UITableViewCell的y坐标不是整数,有个0.01的差值。

这次恍然大悟,父视图的像素不对齐也会影响到子视图。而此处0.01差值的来源,是UITableview的header高度。

在使用Group Style的UITableview时,如果tableView:heightForHeaderInSection:回调返回0,系统会认为没有设置header的高度而重新提供一个默认的header高度,导致在UITableview中看到一个空白的header。

一种简单但有隐患的处理方式,就是在回调里返回一个很小的高度,比如0.1、0.01,这样能达到隐藏header的效果,但也造成了此处的像素不对齐问题。

解决方法

- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section {
    return CGFLOAT_MIN;
}

避免使用0.01这样的具体数值(0.01还不足够小,0.0001就能避免此处的不对齐),直接使用系统给的CGFLOAT_MIN,这个足够小的值既能避免上述情况,又能让代码更直观。

隐藏header的其它方法和原理可参考:0代码隐藏GroupedTableView上边多余的间隔

参考文章: