举例讲解iOS中延迟加载和上拉刷新/下拉加载的实现
lazy懒加载(延迟加载)UITableView
举个例子,当我们在用网易新闻App时,看着那么多的新闻,并不是所有的都是我们感兴趣的,有的时候我们只是很快的滑过,想要快速的略过不喜欢的内容,但是只要滑动经过了,图片就开始加载了,这样用户体验就不太好,而且浪费内存.
这个时候,我们就可以利用lazy加载技术,当界面滑动或者滑动减速的时候,都不进行图片加载,只有当用户不再滑动并且减速效果停止的时候,才进行加载.
刚开始我异步加载图片利用SDWebImage来做,最后试验的时候出现了重用bug,因为虽然SDWebImage实现了异步加载缓存,当加载完图片后再请求会直接加载缓存中的图片,注意注意注意,关键的来了,如果是lazy加载,滑动过程中是不进行网络请求的,cell上的图片就会发生重用,当你停下来能进行网络请求的时候,才会变回到当前Cell应有的图片,大概1-2秒的延迟吧(不算延迟,就是没有进行请求,也不是没有缓存的问题).怎么解决呢?这个时候我们就要在Model对象中定义个一个UIImage的属性,异步下载图片后,用已经缓存在沙盒中的图片路径给它赋值,这样,才cellForRowAtIndexPath方法中,判断这个UIImage对象是否为空,若为空,就进行网络请求,不为空,就直接将它赋值给cell的imageView对象,这样就能很好的解决图片短暂重用问题.
@下面我的代码用的是自己写的异步加载缓存类,SDWebImage的加载图片的懒加载,会在后面的章节给出.(为什么不同呢,因为SDWebImage我以前使用重来不关心它将图片存储在沙盒中的名字和路径,但是要实现懒加载的话,一定要得到图片路径,所以在找SDWebImage如何存储图片路径上花了点时间)
@model类
#import<Foundation/Foundation.h>
@interfaceNewsItem: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"
@implementationNewsItem
-(void)dealloc
{
self.newsTitle=nil;
self.newsPicUrl=nil;
self.newsPic=nil;
[superdealloc];
}
-(id)initWithDictionary:(NSDictionary*)dic
{
self=[superinit];
if(self){
self.newsTitle=[dicobjectForKey:@"title"];
self.newsPicUrl=[dicobjectForKey:@"picUrl"];
//从本地沙盒加载图像
ImageDownloader*downloader=[[[ImageDownloaderalloc]init]autorelease];
self.newsPic=[downloaderloadLocalImage:_newsPicUrl];
}
returnself;
}
+(NSMutableArray*)handleData:(NSData*)data;
{
//解析数据
NSError*error=nil;
NSDictionary*dic=[NSJSONSerializationJSONObjectWithData:dataoptions:NSJSONReadingMutableContainerserror:&error];
NSMutableArray*originalArray=[dicobjectForKey:@"news"];
//封装数据对象
NSMutableArray*resultArray=[NSMutableArrayarray];
for(inti=0;i<[originalArraycount];i++){
NSDictionary*newsDic=[originalArrayobjectAtIndex:i];
NewsItem*item=[[NewsItemalloc]initWithDictionary:newsDic];
[resultArrayaddObject:item];
[itemrelease];
}
returnresultArray;
}
@end
@图片下载类
#import<Foundation/Foundation.h>
@classNewsItem;
@interfaceImageDownloader: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"
@implementationImageDownloader
-(void)dealloc
{
self.imageUrl=nil;
Block_release(_completionHandler);
[superdealloc];
}
#pragmamark-异步加载
-(void)startDownloadImage:(NSString*)imageUrl
{
self.imageUrl=imageUrl;
//先判断本地沙盒是否已经存在图像，存在直接获取，不存在再下载，下载后保存
//存在沙盒的Caches的子文件夹DownloadImages中
UIImage*image=[selfloadLocalImage:imageUrl];
if(image==nil){
//沙盒中没有，下载
//异步下载,分配在程序进程缺省产生的并发队列
dispatch_async(dispatch_get_global_queue(DISPATCH_QUEUE_PRIORITY_DEFAULT,0),^{
//多线程中下载图像
NSData*imageData=[NSDatadataWithContentsOfURL:[NSURLURLWithString:imageUrl]];
//缓存图片
[imageDatawriteToFile:[selfimageFilePath:imageUrl]atomically:YES];
//回到主线程完成UI设置
dispatch_async(dispatch_get_main_queue(),^{
//将下载的图像，存入newsItem对象中
UIImage*image=[UIImageimageWithData:imageData];
self.newsItem.newsPic=image;
//使用block实现回调，通知图像下载完成
if(_completionHandler){
_completionHandler();
}
});
});
}
}
#pragmamark-加载本地图像
-(UIImage*)loadLocalImage:(NSString*)imageUrl
{
self.imageUrl=imageUrl;
//获取图像路径
NSString*filePath=[selfimageFilePath:self.imageUrl];
UIImage*image=[UIImageimageWithContentsOfFile:filePath];
if(image!=nil){
returnimage;
}
returnnil;
}
#pragmamark-获取图像路径
-(NSString*)imageFilePath:(NSString*)imageUrl
{
//获取caches文件夹路径
NSString*cachesPath=[NSSearchPathForDirectoriesInDomains(NSCachesDirectory,NSUserDomainMask,YES)lastObject];
//创建DownloadImages文件夹
NSString*downloadImagesPath=[cachesPathstringByAppendingPathComponent:@"DownloadImages"];
NSFileManager*fileManager=[NSFileManagerdefaultManager];
if(![fileManagerfileExistsAtPath:downloadImagesPath]){
[fileManagercreateDirectoryAtPath:downloadImagesPathwithIntermediateDirectories:YESattributes:nilerror:nil];
}
#pragmamark拼接图像文件在沙盒中的路径,因为图像URL有"/",要在存入前替换掉,随意用"_"代替
NSString*imageName=[imageUrlstringByReplacingOccurrencesOfString:@"/"withString:@"_"];
NSString*imageFilePath=[downloadImagesPathstringByAppendingPathComponent:imageName];
returnimageFilePath;
}
@end
@这里只给出关键代码,网络请求,数据处理,自定义cell自行解决
#pragmamark-Tableviewdatasource
-(NSInteger)numberOfSectionsInTableView:(UITableView*)tableView
{
//Returnthenumberofsections.
return1;
}
-(NSInteger)tableView:(UITableView*)tableViewnumberOfRowsInSection:(NSInteger)section
{
//Returnthenumberofrowsinthesection.
if(_dataArray.count==0){
return10;
}
return[_dataArraycount];
}
-(UITableViewCell*)tableView:(UITableView*)tableViewcellForRowAtIndexPath:(NSIndexPath*)indexPath
{
staticNSString*cellIdentifier=@"Cell";
NewsListCell*cell=[tableViewdequeueReusableCellWithIdentifier:cellIdentifier];
if(!cell){
cell=[[[NewsListCellalloc]initWithStyle:UITableViewCellStyleDefaultreuseIdentifier:cellIdentifier]autorelease];
}
NewsItem*item=[_dataArrayobjectAtIndex: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){
[selfstartPicDownload:itemforIndexPath:indexPath];
}
}else{
//有图像直接展示
NSLog(@"1111");
cell.picImageView.image=item.newsPic;
}
cell.titleLabel.text=[NSStringstringWithFormat:@"indexPath.row=%ld",indexPath.row];
returncell;
}
-(CGFloat)tableView:(UITableView*)tableViewheightForRowAtIndexPath:(NSIndexPath*)indexPath
{
return[NewsListCellcellHeight];
}
//开始下载图像
-(void)startPicDownload:(NewsItem*)itemforIndexPath:(NSIndexPath*)indexPath
{
//创建图像下载器
ImageDownloader*downloader=[[ImageDownloaderalloc]init];
//下载器要下载哪个新闻的图像，下载完成后，新闻保存图像
downloader.newsItem=item;
//传入下载完成后的回调函数
[downloadersetCompletionHandler:^{
//下载完成后要执行的回调部分，block的实现
//根据indexPath获取cell对象，并加载图像
#pragmamarkcellForRowAtIndexPath-->没看到过
NewsListCell*cell=(NewsListCell*)[self.tableViewcellForRowAtIndexPath:indexPath];
cell.picImageView.image=downloader.newsItem.newsPic;
}];
//开始下载
[downloaderstartDownloadImage:item.newsPicUrl];
[downloaderrelease];
}
-(void)loadImagesForOnscreenRows
{
#pragmamarkindexPathsForVisibleRows-->没看到过
//获取tableview正在window上显示的cell，加载这些cell上图像。通过indexPath可以获取该行上需要展示的cell对象
NSArray*visibleCells=[self.tableViewindexPathsForVisibleRows];
for(NSIndexPath*indexPathinvisibleCells){
NewsItem*item=[_dataArrayobjectAtIndex:indexPath.row];
if(item.newsPic==nil){
//如果新闻还没有下载图像，开始下载
[selfstartPicDownload:itemforIndexPath:indexPath];
}
}
}
#pragmamark-延迟加载关键
//tableView停止拖拽，停止滚动
-(void)scrollViewDidEndDragging:(UIScrollView*)scrollViewwillDecelerate:(BOOL)decelerate
{
//如果tableview停止滚动，开始加载图像
if(!decelerate){
[selfloadImagesForOnscreenRows];
}
NSLog(@"%s__%d__|%d",__FUNCTION__,__LINE__,decelerate);
}
-(void)scrollViewDidEndDecelerating:(UIScrollView*)scrollView
{
//如果tableview停止滚动，开始加载图像
[selfloadImagesForOnscreenRows];
}
下拉刷新和上拉加载的原理
很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来.
下面是关键代码分析:
//下拉刷新的原理
-(void)scrollViewWillBeginDecelerating:(UIScrollView*)scrollView
{
if(scrollView.contentOffset.y<-100){
[UIViewanimateWithDuration:1.0animations:^{
// frame发生偏移,距离顶部150的距离(可自行设定)
self.tableView.contentInset=UIEdgeInsetsMake(150.0f,0.0f,0.0f,0.0f);
}completion:^(BOOLfinished){
/**
* 发起网络请求,请求刷新数据
*/
}];
}
}
//上拉加载的原理
-(void)scrollViewDidEndDragging:(UIScrollView*)scrollViewwillDecelerate:(BOOL)decelerate
{
NSLog(@"%f",scrollView.contentOffset.y);
NSLog(@"%f",scrollView.frame.size.height);
NSLog(@"%f",scrollView.contentSize.height);
/**
* 关键-->
* scrollView一开始并不存在偏移量,但是会设定contentSize的大小,所以contentSize.height永远都会比contentOffset.y高一个手机屏幕的
* 高度;上拉加载的效果就是每次滑动到底部时,再往上拉的时候请求更多,那个时候产生的偏移量,就能让contentOffset.y+手机屏幕尺寸高大于这
* 个滚动视图的contentSize.height
*/
if(scrollView.contentOffset.y+scrollView.frame.size.height>=scrollView.contentSize.height){
NSLog(@"%d%s",__LINE__,__FUNCTION__);
[UIViewcommitAnimations];
[UIViewanimateWithDuration:1.0animations:^{
// frame发生的偏移量,距离底部往上提高60(可自行设定)
self.tableView.contentInset=UIEdgeInsetsMake(0,0,60,0);
}completion:^(BOOLfinished){
/**
* 发起网络请求,请求加载更多数据
* 然后在数据请求回来的时候,将contentInset改为(0,0,0,0)
*/
}];
}
}