举例讲解iOS中延迟加载和上拉刷新/下拉加载的实现

【 tulaoshi.com - 编程语言 】

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 
 
@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 

代码如下：

@这里只给出关键代码,网络请求,数据处理,自定义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]; 
 
}

下拉刷新和上拉加载的原理
很多App中,新闻或者展示类都存在下拉刷新和上拉加载的效果,网上提供了实现这种效果的第三方类(详情请见MJRefresh和EGOTableViewPullRefresh),用起来很方便,但是闲暇之余,我们可以思考下,这种效果实现的原理是什么,我以前说过,只要是动画都是骗人的,只要不是硬件问题大部分效果都能在系统UI的基础上做出来.
下面是关键代码分析:
代码如下：

// 下拉刷新的原理 
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView 
{ 
    if (scrollView.contentOffset.y - 100) { 
         
        [UIView animateWithDuration:1.0 animations:^{ 
             
            //  frame发生偏移,距离顶部150的距离(可自行设定) 
            self.tableView.contentInset = UIEdgeInsetsMake(150.0f, 0.0f, 0.0f, 0.0f); 
        } completion:^(BOOL finished) { 
             
            /**
             *  发起网络请求,请求刷新数据
             */ 
 
        }]; 
    } 
} 
 
// 上拉加载的原理 
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(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__); 
        [UIView commitAnimations]; 
         
        [UIView animateWithDuration:1.0 animations:^{ 
            //  frame发生的偏移量,距离底部往上提高60(可自行设定) 
            self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 60, 0); 
        } completion:^(BOOL finished) { 
             
            /**
             *  发起网络请求,请求加载更多数据
             *  然后在数据请求回来的时候,将contentInset改为(0,0,0,0)
             */ 
        }]; 
 
    } 
}