iOS-UI控件优化

一.tableView的优化

tableView作为iOS开发中使用最为频繁的控件之一，对其进行优化，对整个应用性能的提升显得至关重要。官方设计的框架中，已经包含了UITableViewCell的重用机制。

但是，tableView优化除了cell的重用之外还有很多工作要做。

1，提前计算并缓存好行高。

cell行高不确定，需要根据内容来计算，tableView每次滚动时都会调用的两个方法是：获得cell的行高（cell大小）和cell中的内容。这样的话，就很有必要把行高缓存起来，具体做法就是在模型中添加行高的属性。要不然，每 次滚动都要重新计算行高。

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath 

{

    NSDictionary *dict = self.dataList[indexPath.row];

    CGRect rect = [dict[@"frame"] CGRectValue];

    return rect.frame.height;

}

2，异步绘制，大幅提高性能。

cell上添加的控件，实质上系统都需要调用底层的接口进行绘制，当我们大量添加控件时，对资源的开销也会很大，所以我们可以选择直接绘制，调高效率。

//异步绘制

dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{

        CGRect rect = [_data[@"frame"] CGRectValue];

        UIGraphicsBeginImageContextWithOptions(rect.size, YES, 0);

        CGContextRef context = UIGraphicsGetCurrentContext();

//整个内容的背景

        [[UIColor colorWithRed:250/255.0 green:250/255.0 blue:250/255.0 alpha:1] set];

        CGContextFillRect(context, rect);

//转发内容的背景

        if ([_data valueForKey:@"subData"]) {

            [[UIColor colorWithRed:243/255.0 green:243/255.0 blue:243/255.0 alpha:1] set];

            CGRect subFrame = [_data[@"subData"][@"frame"] CGRectValue];

            CGContextFillRect(context, subFrame);

            [[UIColor colorWithRed:200/255.0 green:200/255.0 blue:200/255.0 alpha:1] set];

            CGContextFillRect(context, CGRectMake(0, subFrame.origin.y, rect.size.width, .5));

        }

         

        {

    //名字

            float leftX = SIZE_GAP_LEFT+SIZE_AVATAR+SIZE_GAP_BIG;

            float x = leftX;

            float y = (SIZE_AVATAR-(SIZE_FONT_NAME+SIZE_FONT_SUBTITLE+6))/2-2+SIZE_GAP_TOP+SIZE_GAP_SMALL-5;

            [_data[@"name"] drawInContext:context withPosition:CGPointMake(x, y) andFont:FontWithSize(SIZE_FONT_NAME)

                             andTextColor:[UIColor colorWithRed:106/255.0 green:140/255.0 blue:181/255.0 alpha:1]

                                andHeight:rect.size.height];

    //时间+设备

            y += SIZE_FONT_NAME+5;

            float fromX = leftX;

            float size = [UIScreen screenWidth]-leftX;

            NSString *from = [NSString stringWithFormat:@"%@  %@", _data[@"time"], _data[@"from"]];

            [from drawInContext:context withPosition:CGPointMake(fromX, y) andFont:FontWithSize(SIZE_FONT_SUBTITLE)

                   andTextColor:[UIColor colorWithRed:178/255.0 green:178/255.0 blue:178/255.0 alpha:1]

                      andHeight:rect.size.height andWidth:size];

        }

//将绘制的内容以图片的形式返回，并调主线程显示

UIImage *temp = UIGraphicsGetImageFromCurrentImageContext();

        UIGraphicsEndImageContext();

        dispatch_async(dispatch_get_main_queue(), ^{

            if (flag==drawColorFlag) {

                postBGView.frame = rect;

                postBGView.image = nil;

                postBGView.image = temp;

            }

}

//内容如果是图文混排，就添加View，用CoreText绘制

[self drawText];

}}

这里是需要异步绘制，但如果在重写drawRect方法就不需要用GCD异步线程了，因为drawRect本来就是异步绘制的。

3.滑动UITableView时按需加载对应内容，这个在大量图片展示，网络加载的时候很管用。（SDWebImage已经实现了异步加载）

//按需加载 - 如果目标行与当前行相差超过指定行数，只在目标滚动范围的前后指定3行加载。

- (void)scrollViewWillEndDragging:(UIScrollView *)scrollView withVelocity:(CGPoint)velocity targetContentOffset:(inout CGPoint *)targetContentOffset{

    NSIndexPath *ip = [self indexPathForRowAtPoint:CGPointMake(0, targetContentOffset->y)];

    NSIndexPath *cip = [[self indexPathsForVisibleRows] firstObject];

    NSInteger skipCount = 8;

    if (labs(cip.row-ip.row)>skipCount) {

        NSArray *temp = [self indexPathsForRowsInRect:CGRectMake(0, targetContentOffset->y, self.width, self.height)];

        NSMutableArray *arr = [NSMutableArray arrayWithArray:temp];

        if (velocity.y<0) {

            NSIndexPath *indexPath = [temp lastObject];

            if (indexPath.row+33) {

   [arr addObject:[NSIndexPath indexPathForRow:indexPath.row-3 inSection:0]];

  [arr addObject:[NSIndexPath indexPathForRow:indexPath.row-2 inSection:0]];

                [arr addObject:[NSIndexPath indexPathForRow:indexPath.row-1 inSection:0]];

            }

        }

        [needLoadArr addObjectsFromArray:arr];

    }

}

记得在tableView:cellForRowAtIndexPath:方法中加入判断：

if (needLoadArr.count>0&&[needLoadArr indexOfObject:indexPath]==NSNotFound) {

[cell clear];

return;

}

滚动很快时，只加载目标范围内的Cell，这样按需加载，极大的提高流畅度。

4.使用不透明视图。
不透明的视图可以极大地提高渲染的速度。因此如非必要，可以将table cell及其子视图的opaque属性设为YES（默认值）。
其中的特例包括背景色，它的alpha值应该为1（例如不要使用clearColor）；图像的alpha值也应该为1，或者在画图时设为不透明。

当一个view是透明的，iOS需要渲染一个像素两次或多次，这是因为一个像素同时属于很多subviews。这是一个非常耗时的过程。

通过代码或者InterfaceBuilder能够很简单的做到。开发者应该多次检查所有的subviews是不透明的。

对于自定义代码，你可以通过代码来设置，如下：view.opaque = YES;

5.不要重复创建不必要的table cell。
前面说了，UITableView只需要一屏幕的UITableViewCell对象即可。因此在cell不可见时，可以将其缓存起来，而在需要时继续使用它即可。
而UITableView也提供了这种机制，只需要简单地设置一个identifier即可：

static NSString *CellIdentifier = @"xxx";
UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
if (cell == nil) {
	cell = [[[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier] autorelease];
}

值得一提的是，cell被重用时，它内部绘制的内容并不会被自动清除，因此你可能需要调用setNeedsDisplayInRect:或setNeedsDisplay方法。

6.减少subviews的数量,尽量少用addView给Cell动态添加View，可以初始化时就添加，然后通过hide来控制是否显示

UITableViewCell包含了textLabel、detailTextLabel和imageView等view，而你还可以自定义一些视图放在它的contentView里。然而view是很大的对象，创建它会消耗较多资源，并且也影响渲染的性能。
如果你的table cell包含图片，且数目较多，使用默认的UITableViewCell会非常影响性能。奇怪的是，使用自定义的view，而非预定义的view，明显会快些。
当然，最佳的解决办法还是继承UITableViewCell，并在其drawRect:中自行绘制：

- (void)drawRect:(CGRect)rect {
	if (image) {
		[image drawAtPoint:imagePoint];
		self.image = nil;
	} else {
		[placeHolder drawAtPoint:imagePoint];
	}	

	[text drawInRect:textRect withFont:font lineBreakMode:UILineBreakModeTailTruncation];
}

不过这样一来，你会发现选中一行后，这个cell就变蓝了，其中的内容就被挡住了。最简单的方法就是将cell的selectionStyle属性设为UITableViewCellSelectionStyleNone，这样就不会被高亮了。
此外还可以创建CALayer，将内容绘制到layer上，然后对cell的contentView.layer调用addSublayer:方法。这个例子中，layer并不会显著影响性能，但如果layer透明，或者有圆角、变形等效果，就会影响到绘制速度了。解决办法可参见后面的预渲染图像。

7.不要做多余的绘制工作。
在实现drawRect:的时候，它的rect参数就是需要绘制的区域，这个区域之外的不需要进行绘制。
例如上例中，就可以用CGRectIntersectsRect、CGRectIntersection或CGRectContainsRect判断是否需要绘制image和text，然后再调用绘制方法。

8.预渲染图像。
你会发现即使做到了上述几点，当新的图像出现时，仍然会有短暂的停顿现象。解决的办法就是在bitmap context里先将其画一遍，导出成UIImage对象，然后再绘制到屏幕，详细做法可见《利用预渲染加速iOS设备的图像显示》。

9.不要阻塞主线程。
做到前几点后，你的table view滚动时应该足够流畅了，不过你仍可能让用户感到不爽。常见的现象就是在更新数据时，整个界面卡住不动，完全不响应用户请求。
出现这种现象的原因就是主线程执行了耗时很长的函数或方法，在其执行完毕前，无法绘制屏幕和响应用户请求。其中最常见的就是网络请求了，它通常都需要花费数秒的时间，而你不应该让用户等待那么久。
解决办法就是使用多线程，让子线程去执行这些函数或方法。这里面还有一个学问，当下载线程数超过2时，会显著影响主线程的性能。因此在使用ASIHTTPRequest时，可以用一个NSOperationQueue来维护下载请求，并将其maxConcurrentOperationCount设为2。而NSURLRequest则可以配合GCD来实现，或者使用NSURLConnection的setDelegateQueue:方法。
当然，在不需要响应用户请求时，也可以增加下载线程数，以加快下载速度：

- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
	if (!decelerate) {
		queue.maxConcurrentOperationCount = 5;
	}
}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
	queue.maxConcurrentOperationCount = 5;
}

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView {
	queue.maxConcurrentOperationCount = 2;
}

此外，自动载入更新数据对用户来说也很友好，这减少了用户等待下载的时间。例如每次载入50条信息，那就可以在滚动到倒数第10条以内时，加载更多信息：

- (void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
	if (count - indexPath.row < 10 && !updating) {
		updating = YES;
		[self update];
	}
}
// update方法获取到结果后，设置updating为NO

还有一点要注意的就是当图片下载完成后，如果cell是可见的，还需要更新图像：

NSArray *indexPaths = [self.tableView indexPathsForVisibleRows];
for (NSIndexPath *visibleIndexPath in indexPaths) {
	if (indexPath == visibleIndexPath) {
		MyTableViewCell *cell = (MyTableViewCell *)[self.tableView cellForRowAtIndexPath:indexPath];
		cell.image = image;
		[cell setNeedsDisplayInRect:imageRect];
		break;
	}
}
// 也可不遍历，直接与头尾相比较，看是否在中间即可。

最后还是前面所说过的insertRowsAtIndexPaths:withRowAnimation:方法，插入新行需要在主线程执行，而一次插入很多行的话（例如50行），会长时间阻塞主线程。而换成reloadData方法的话，瞬间就处理完了。

10减少预加载时间

- (UITableViewCell *)tableView:(UITableView *)tableViewcellForRowAtIndexPath:(NSIndexPath *)indexPath {

// Initialize and return the Cell here

}

通常，我会通过缓存来重用图片，同时减少初始化的过程。当OS需要为TableView渲染一个新的cell，会通过调用下面的方法来返回一个新的cell：

因此，如果你在这里阻塞了太长的时间，UserInterface渲染的过程就会被阻塞；它将不能做任何事情或显示任何新的东西。这就是为什么用户看到在某个地方滚动停止的原因。

为了使这个过程尽可能的快，你可以去除一些逻辑，延迟计算，通过重用来缓存数据和图片。另外一个方法是通过首先使用默认的图片和数据来重用cell。当要获取图片或数据的时候，你可以使用多线程，然后稍后进行填充。从用户的角度来看，这种方法将会使得滚动更加流程，加载图片的速度更快。

11、避免使用图形特效

避免在UIImage中使用复杂的图形特效(例如渐变)。