TableView 的优化
1 TableView 优化的原理:
当我们用APP 访问新闻的时候,新闻中的内容并不是我们都喜欢的内容,因此我们会快速的滑过,但是TableView的加载机制是只要用户滑过该条新闻,就会加载新闻.因此会让用户体验很差. TableView的优化目的就是当用户快速滑过自己不喜欢的内容的时候不加载该部分内容的图片,待滑动停止或者减速的时候才加载当前页面的图片.
2 实现过程:
当我们用 SDWebImage异步加载图片时,会出现重用的 BUG.这是因为虽然 SDWebImage 实现了异步加载缓存,但是当加载完图片后再次发送网络请求时会直接加载缓存中的图片.注意,如果是 lazy 加载的时候,滑动过程中是不进行网络请求的,cell 上的图片就会发生重用.当滑动停止的时候才会加载当前 cell 上的图片,但是会有1~2秒的延迟.解决办法就是在模型对象中定义一个 UIImage 属性,异步下载图片后,用已经缓存到沙盒的图片给他进行赋值,这样才能在cellForRowAtIndexPath方法中判断这个 UIImage 对象时候为空.若为空,则进行网络请求,不为空,则将它赋值给 cell 的imageView对象.这样就能解决图片短暂重用的问题.
3 代码实现过程
|
@model类 |
|
#import <foundation /foundation.h> |
|
@interface NewsItem : NSObject |
|
@property (nonatomic,copy) NSString * newsTitle; |
|
@property (nonatomic,copy) NSString * newsPicUrl; |
|
@property (nonatomic,retain) UIImage * newsPic; // 存储每个新闻自己的image对象 |
|
- (id)initWithDictionary:(NSDictionary *)dic; |
|
// 处理解析 |
|
+ (NSMutableArray *)handleData:(NSData *)data; |
|
@end
|
|
#import "NewsItem.h" |
|
#import "ImageDownloader.h" |
|
@implementation NewsItem |
|
- (void)dealloc |
|
{ |
|
self.newsTitle = nil; |
|
self.newsPicUrl = nil; |
|
self.newsPic = nil; |
|
[super dealloc]; |
|
} |
|
- (id)initWithDictionary:(NSDictionary *)dic |
|
{ |
|
self = [super init]; |
|
if (self) { |
|
self.newsTitle = [dic objectForKey:@"title"]; |
|
self.newsPicUrl = [dic objectForKey:@"picUrl"]; |
|
|
|
//从本地沙盒加载图像 |
|
ImageDownloader * downloader = [[[ImageDownloader alloc] init] autorelease]; |
|
self.newsPic = [downloader loadLocalImage:_newsPicUrl]; |
|
} |
|
return self; |
|
} |
|
+ (NSMutableArray *)handleData:(NSData *)data; |
|
{ |
|
//解析数据 |
|
NSError * error = nil; |
|
NSDictionary * dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error]; |
|
NSMutableArray * originalArray = [dic objectForKey:@"news"]; |
|
//封装数据对象 |
|
NSMutableArray * resultArray = [NSMutableArray array]; |
|
|
|
for (int i=0 ;i<[originalArray count]; i++) { |
|
NSDictionary * newsDic = [originalArray objectAtIndex:i]; |
|
NewsItem * item = [[NewsItem alloc] initWithDictionary:newsDic]; |
|
[resultArray addObject:item]; |
|
[item release]; |
|
} |
|
return resultArray; |
|
} |
|
@end |
|
|
|
@图片下载类 |
|
#import <foundation foundation.h=""> |
|
@class NewsItem; |
|
@interface ImageDownloader : NSObject |
|
@property (nonatomic,copy) NSString * imageUrl; |
|
@property (nonatomic,retain) NewsItem * newsItem; //下载图像所属的新闻 |
|
//图像下载完成后，使用block实现回调 |
|
@property (nonatomic,copy) void (^completionHandler)(void); |
|
//开始下载图像 |
|
- (void)startDownloadImage:(NSString *)imageUrl; |
|
//从本地加载图像 |
|
- (UIImage *)loadLocalImage:(NSString *)imageUrl; |
|
@end
|
|
#import "ImageDownloader.h" |
|
#import "NewsItem.h" |
|
@implementation ImageDownloader |
|
- (void)dealloc |
|
{ |
|
self.imageUrl = nil; |
|
Block_release(_completionHandler); |
|
[super dealloc]; |
|
} |
|
#pragma mark - 异步加载 |
|
- (void)startDownloadImage:(NSString *)imageUrl |
|
{ |
|
self.imageUrl = imageUrl; |
|
// 先判断本地沙盒是否已经存在图像，存在直接获取，不存在再下载，下载后保存 |
|
// 存在沙盒的Caches的子文件夹DownloadImages中 |
|
UIImage * image = [self loadLocalImage:imageUrl]; |
|
if (image == nil) { |
|
// 沙盒中没有，下载 |
|
// 异步下载,分配在程序进程缺省产生的并发队列 |
|
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^{ |
|
// 多线程中下载图像 |
|
NSData * imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:imageUrl]]; |
|
// 缓存图片 |
|
[imageData writeToFile:[self imageFilePath:imageUrl] atomically:YES]; |
|
// 回到主线程完成UI设置 |
|
dispatch_async(dispatch_get_main_queue(), ^{ |
|
//将下载的图像，存入newsItem对象中 |
|
UIImage * image = [UIImage imageWithData:imageData]; |
|
self.newsItem.newsPic = image; |
|
//使用block实现回调，通知图像下载完成 |
|
if (_completionHandler) { |
|
_completionHandler(); |
|
} |
|
|
|
}); |
|
|
|
}); |
|
} |
|
|
|
} |
|
#pragma mark - 加载本地图像 |
|
- (UIImage *)loadLocalImage:(NSString *)imageUrl |
|
{ |
|
self.imageUrl = imageUrl; |
|
// 获取图像路径 |
|
NSString * filePath = [self imageFilePath:self.imageUrl]; |
|
UIImage * image = [UIImage imageWithContentsOfFile:filePath]; |
|
if (image != nil) { |
|
return image; |
|
} |
|
return nil; |
|
} |
|
#pragma mark - 获取图像路径 |
|
- (NSString *)imageFilePath:(NSString *)imageUrl |
|
{ |
|
// 获取caches文件夹路径 |
|
NSString * cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) lastObject]; |
|
// 创建DownloadImages文件夹 |
|
NSString * downloadImagesPath = [cachesPath stringByAppendingPathComponent:@"DownloadImages"]; |
|
NSFileManager * fileManager = [NSFileManager defaultManager]; |
|
if (![fileManager fileExistsAtPath:downloadImagesPath]) { |
|
[fileManager createDirectoryAtPath:downloadImagesPath withIntermediateDirectories:YES attributes:nil error:nil]; |
|
} |
|
#pragma mark 拼接图像文件在沙盒中的路径,因为图像URL有"/",要在存入前替换掉,随意用"_"代替 |
|
NSString * imageName = [imageUrl stringByReplacingOccurrencesOfString:@"/" withString:@"_"]; |
|
NSString * imageFilePath = [downloadImagesPath stringByAppendingPathComponent:imageName]; |
|
return imageFilePath; |
|
} |
|
@end</foundation> |
|
@这里只给出关键代码,网络请求,数据处理,自定义cell自行解决 |
|
#pragma mark - Table view data source |
|
- (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView |
|
{ |
|
// Return the number of sections. |
|
return 1; |
|
} |
|
- (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section |
|
{ |
|
// Return the number of rows in the section. |
|
if (_dataArray.count == 0) { |
|
return 10; |
|
} |
|
return [_dataArray count]; |
|
} |
|
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath |
|
{ |
|
static NSString *cellIdentifier = @"Cell"; |
|
NewsListCell *cell = [tableView dequeueReusableCellWithIdentifier:cellIdentifier ]; |
|
if (!cell) { |
|
cell = [[[NewsListCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:cellIdentifier] autorelease]; |
|
} |
|
NewsItem * item = [_dataArray objectAtIndex:indexPath.row]; |
|
cell.titleLabel.text = item.newsTitle; |
|
//判断将要展示的新闻有无图像 |
|
if (item.newsPic == nil) { |
|
//没有图像下载 |
|
cell.picImageView.image = nil; |
|
|
|
NSLog(@"dragging = %d,decelerating = %d",self.tableView.dragging,self.tableView.decelerating); |
|
// ??执行的时机与次数问题 |
|
if (self.tableView.dragging == NO && self.tableView.decelerating == NO) { |
|
[self startPicDownload:item forIndexPath:indexPath]; |
|
} |
|
}else{ |
|
//有图像直接展示 |
|
NSLog(@"1111"); |
|
cell.picImageView.image = item.newsPic; |
|
} |
|
|
|
cell.titleLabel.text = [NSString stringWithFormat:@"indexPath.row = %ld",indexPath.row]; |
|
return cell; |
|
} |
|
- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath |
|
{ |
|
return [NewsListCell cellHeight]; |
|
} |
|
//开始下载图像 |
|
- (void)startPicDownload:(NewsItem *)item forIndexPath:(NSIndexPath *)indexPath |
|
{ |
|
//创建图像下载器 |
|
ImageDownloader * downloader = [[ImageDownloader alloc] init]; |
|
//下载器要下载哪个新闻的图像，下载完成后，新闻保存图像 |
|
downloader.newsItem = item; |
|
//传入下载完成后的回调函数 |
|
[downloader setCompletionHandler:^{ |
|
//下载完成后要执行的回调部分，block的实现 |
|
//根据indexPath获取cell对象，并加载图像 |
|
#pragma mark cellForRowAtIndexPath-->没看到过 |
|
NewsListCell * cell = (NewsListCell *)[self.tableView cellForRowAtIndexPath:indexPath]; |
|
cell.picImageView.image = downloader.newsItem.newsPic; |
|
}]; |
|
//开始下载 |
|
[downloader startDownloadImage:item.newsPicUrl]; |
|
[downloader release]; |
|
} |
|
- (void)loadImagesForOnscreenRows |
|
{ |
|
#pragma mark indexPathsForVisibleRows-->没看到过 |
|
//获取tableview正在window上显示的cell，加载这些cell上图像。通过indexPath可以获取该行上需要展示的cell对象 |
|
NSArray * visibleCells = [self.tableView indexPathsForVisibleRows]; |
|
for (NSIndexPath * indexPath in visibleCells) { |
|
NewsItem * item = [_dataArray objectAtIndex:indexPath.row]; |
|
if (item.newsPic == nil) { |
|
//如果新闻还没有下载图像，开始下载 |
|
[self startPicDownload:item forIndexPath:indexPath]; |
|
} |
|
} |
|
} |
|
#pragma mark - 延迟加载关键 |
|
//tableView停止拖拽，停止滚动 |
|
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate |
|
{ |
|
//如果tableview停止滚动，开始加载图像 |
|
if (!decelerate) { |
|
[self loadImagesForOnscreenRows]; |
|
} |
|
NSLog(@"%s__%d__|%d",__FUNCTION__,__LINE__,decelerate); |
|
} |
|
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView |
|
{ |
|
//如果tableview停止滚动，开始加载图像 |
|
[self loadImagesForOnscreenRows]; |
|
} |