iOS优化：解决iOS中像素不对齐问题
[这是第1篇]
导语：像素对齐并不是一个复杂的问题，但是开发中稍不注意的话，是会造成像素不对齐的情况（恰恰容易被忽视掉），本文使用一个案例来分析如何解决像素不对齐问题。
背景知识：像素对齐
1、基础
-
iOS设备上，有逻辑像素（point）和 物理像素（pixel)之分，像素对齐指的是物理像素对齐，对齐就是像素点的值是整数，如某视图的宽高是100pixel * 100 pixel。
-
point和pixel的比例是通过[[UIScreen mainScreen] scale]来制定的。在没有视网膜屏之前，1point = 1pixel；但是2x和3x的视网膜屏出来之后，1point等于2pixel或3pixel。
-
在UI设计师提供的设计稿标注，和在代码中设置frame，其中x,y,width,height的单位是 逻辑像素（point）；GPU在渲染图形之前，系统会将逻辑像素（point）换算成 物理像素（pixel）。
2、像素对齐 VS 像素不对齐
-
逻辑像素（point）乘以2（2x的视网膜屏） 或3（3x的视网膜屏）得到整数值，或者说得到的浮点数且小数点后都是0的，这就像素对齐了，否则就是像素不对齐。
-
出现像素不对齐的情况，会导致在GPU渲染时，对没对齐的边缘，需要进行插值计算，这个插值计算的过程会有性能损耗。
3、发现像素不对齐
-
在模拟器上提供了Debug -->Color Misaligned Images选项可以把像素不对齐的部分显示出来；也可以使用Core Animation中Display Settings中的Color Misaligned Images选项将像素不对齐的部分显示出来
-
当UIView(及其子类)的frame像素不对齐显示洋红色；当图片的像素大小与控件的大小不一致而导致需要缩放时，显示黄色。
-
因为项目中大量使用UITableView来构建UI界面【详细参考iOS实录1：使用UITableView构建UI界面】。下面就QSUseTableViewDemo中的详情页来对比优化前后的效果。优化前，开启模拟器上的Debug -->Color Misaligned Images选项，发现：文本部分出现洋红色（frame像素不对齐）和 图片部分是黄色(图片的缩放导致的不对齐)。
优化前.png
一、文本计算的坑
1、存在的问题
理论上设置View的大小，最好预先设置好，尽量不要计算。但是项目中，很多时候需要先计算出文本在某字体下的宽高，再设置view的frame。，有时候文本计算得到的width和height是小数，如16.48、15.32。如果直接使用，必然会造成像素不对齐的问题(因为16.48、15.32乘以2或3得到的都不是整数)。
2、解决办法
我们在项目扩展了NSString方法，使用新增的方法统一计算文本的大小，在这些方法中使用ceil()将小数点后数据除去，使得计算的结果小数点后都是0
//单行的
- (CGSize)textSizeWithFont:(UIFont*)font{
CGSize textSize = [self sizeWithAttributes:@{NSFontAttributeName:font}];
textSize = CGSizeMake((int)ceil(textSize.width), (int)ceil(textSize.height));
return textSize;
}
/**
根据字体、行数、行间距和constrainedWidth计算多行文本占据的size
**/
- (CGSize)textSizeWithFont:(UIFont*)font
numberOfLines:(NSInteger)numberOfLines
lineSpacing:(CGFloat)lineSpacing
constrainedWidth:(CGFloat)constrainedWidth
isLimitedToLines:(BOOL *)isLimitedToLines{
if (self.length == 0) {
return CGSizeZero;
}
CGFloat oneLineHeight = font.lineHeight;
CGSize textSize = [self boundingRectWithSize:CGSizeMake(constrainedWidth, MAXFLOAT) options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:font} context:nil].size;
CGFloat rows = textSize.height / oneLineHeight;
CGFloat realHeight = oneLineHeight;
// 0 不限制行数
if (numberOfLines == 0) {
if (rows >= 1) {
realHeight = (rows * oneLineHeight) + (rows - 1) * lineSpacing;
}
}else{
if (rows > numberOfLines) {
rows = numberOfLines;
if (isLimitedToLines) {
*isLimitedToLines = YES; //被限制
}
}
realHeight = (rows * oneLineHeight) + (rows - 1) * lineSpacing;
}
return CGSizeMake(ceil(constrainedWidth),ceil(realHeight));
}
@end
二、UITableview的header和footer高度的坑
1、存在的问题
项目中使用Group Style的UITableview，为了避免让系统去设置header或者footer的高度，我们自己去设置tableView:heightForHeaderInSection: tableView:heightForFooterInSection的值，早前做法是直接将其返回0.01f，达到隐藏header和footer的效果，但是这么做是会造成像素不对齐。
2、解决办法
使用尽可能下的数值，0.01还不够小，直接使用系统提供的CGFLOAT_MIN吧。
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section{
return CGFLOAT_MIN;
}
- (CGFloat)tableView:(UITableView *)tableView heightForFooterInSection:(NSInteger)section{
return CGFLOAT_MIN;
}
注意：在设置UITableViewCell的高度时候，使用的浮点数，小数点后不可以有0的数，否则造成像素不对齐。
3、解决效果
注明：经过第一和第二步的优化，文本像素不对齐的问题解决了。
文本像素不对齐解决.png
三、图片像素不对齐的情况
1、存在的问题
图片的size和显示图片的imageView的size（逻辑像素（point））不相等。
2、解决办法
图片分为两种，本地图片和网络上下载的图片，前者是UI提供的，存在项目中，这就要求**UI设计师同事提供@2x和@3x图片，因为@2x的图片在@3x的屏幕上也会发生像素不对齐的问题；而网络上获取的图片没有@2x和@3x的区别，需要我们缩放图片到与UIImageView对应的尺寸，且缩放后的图片的scale和[UIScreen mainScreen].scale相等，再显示出来。
1）图片缩放的方法(分类新增UIImage的缩放方法)
- (UIImage *)scaleImageWithSize:(CGSize)size{
if (CGSizeEqualToSize(size, self.size)) {
return self;
}
//创建上下文
UIGraphicsBeginImageContextWithOptions(size, YES, [UIScreen mainScreen].scale);
//绘图
[self drawInRect:CGRectMake(0, 0, size.width, size.height)];
//获取新图片
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}
2）图片缩放在非主线程，更新图片在主线程
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{
//压缩背景图片 & 头像图片
UIImage *bgImage = [[UIImage imageNamed:self.cellModel.bgImageName] scaleImageWithSize:_bgImageView.frame.size];
UIImage *image = [[UIImage imageNamed:self.cellModel.iconImageName] scaleImageWithSize:_iconImageView.frame.size];
dispatch_sync(dispatch_get_main_queue(), ^{
_bgImageView.image = bgImage;
_iconImageView.image = image;
_iconImageView.hidden = (image != nil) ? NO : YES;
});
});
注明：图片的缩放是相对耗时的，不应该放在UI线程（主线程），否则影响UI的流程体验；这里使用加载本地图片，模拟从网络获取图片。一般项目中使用SDWebImage来下载网络图片，为了更好处理图片的缩放和圆角等问题，需要在原来库增加某些特性（图片缩放、裁圆角和缓存等），这个后面再说。
3、解决效果
经过第三步的优化，图片不对齐的问题（黄色区域没有了）被解决。
图片像素不对齐解决.png
总结：解决像素不对齐的基本准则
1、frame设置时候，使用整数; 需要计算frame时候，计算的结果使用ceil处理一下，避免小数点后有非0数存在。UITableViewCell的高度的高度是整数。
2、项目中，要求UI设计师提供@2x和@3x的切图。
3、设置imageView的size要和切图的size(逻辑像素（point）)相等。
4、网络上获取的图片的size要缩放和imageView的size(逻辑像素（point）)要相等，缩放后的图片的scale和[UIScreen mainScreen].scale要相等。解决方案参考iOS实录17：网络图片的优化显示
5、缩放这样的耗时操作应该放到子线程去做。最好做缓存，避免每次显示都需要缩放操作。
源代码直通车：QSUseTableViewDemo
