iOS Color Misaligned Images优化

最近在做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上边多余的间隔。

参考文章：

• 《Aligned UIViews》
• 《Image Resizing Techniques》
• 0代码隐藏GroupedTableView上边多余的间隔

我的博客原址：iOS Color Misaligned Images优化