开发者社区> 吞吞吐吐的> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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>  
  
@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) 
             */  
        }];  
  
    }  
}  
复制代码

 

下面详细说一下cell下载图片的思路(无沙盒缓存)
1、创建两个字典,一个用来缓存图片images,一个用来缓存下载图片的操作operations;
2、这两个字典都是用图片的url链接作为键key;
3、当需要显示单元格图片前,首先判断images字典中是否已经存在下载好的图片,如果存在,直接显示图片即可,如果不存在,那么就先放一张占位图片;
4、此时,再判断operations字典中的下载操作是否存在,如果不存在,就创建一个现在图片的操作并添加到队列中执行,下载图片成功后,将图片保存到images字典中,然后回到主线程刷新UI,显示新的图片(占位图片消失)。切记,不管图片是否下载成功,一定要将这个下载图片的操作operations

字典中删除,目的有三个:
——1——防止图片下载操作没有成功,而这个操作却被保留了下来,那么其他单元格的图片就会nil
——2——防止operations字典会一直累加,如果图片数量大,会给内存增加负担

——3——每一次cell的刷新都会重新创建下载操作下载对应的图片


5、在内存出现警告时,需要处理的操作:
-(void)didReceiveMemoryWarining{
[super didReceiveMemoryWarining];
//取消所有操作
[self.queue cancelAllOperations];
//清空字典
[self.operations removeAllObjects];
[self.images removeAllObjects];
}


6、为了提高用户体验,节约流量和时间,
所以在用户拖拽开始时应该挂起图片下载操作 [self.queue setSuspended:YES];
拖拽结束后启动图片下载操作 [self.queue setSuspended:NO];

这是sdWebImage的基本思路,只不过sdWebImage用的是沙盒存储。

还有就是,刷新单元格时,必须刷新指定的单元格即可,即[self.tableView reloadRowsAtIndexPaths:@[IndexPath] withRowAnimation:UITableViewRowAnimationNone];

 

无沙盒缓存时:

[图片]



沙盒缓存时:

[图片]

 

7、存入沙盒时,一张图片必须对应一个文件,存到Caches文件下。
UIImage ——> data——>file


※存取图片:
PNG图片:
NSData *data = UIImagePNGRepresentation(image);
[data writeToFile:CachesfileName atomically:YES]

JPG图片:
NSData *data = UIImageJPGRepresentation(image,1.0);
[data writeToFile:CachesfileName atomically:YES];

※获取图片:
NSData *data = [NSData dataWithContentsOfFile:CachesfileName];
if(data){
cell.imageView.image = [UIImage imageWithData:data];
}
else{
显示占位图片;
下载图片;
}

一般情况下,自定义operation类,在该自定义类的重写main方法执行下载任务(对象创建后会自动调用main方法),然后通过设置协议和代理方法将图片传到主控制器的主线程中刷新UI,极大的简化了代码。

直接省去block,没有循环引用的问题

SDWebImage的默认缓存时长是一个星期

程序猿神奇的手,每时每刻,这双手都在改变着世界的交互方式!
本文转自当天真遇到现实博客园博客,原文链接:http://www.cnblogs.com/XYQ-208910/p/5127902.html,如需转载请自行联系原作者

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
iOS NSInvocation应用与理解
iOS NSInvocation应用与理解
49 0
iOS7应用开发3、Objective-C
【跟随教授的讲解和演示,并重做了课上的demo之后,惊奇地发现自己写的程序有bug,界面上12张卡牌出现后,点击任何一个,其他所有卡牌都会变成一块白板……在经历了长时间的调试之后悲催地发现,在最后的updateUI这个函数中改变背景的函数写错了,setBackgroundImage:写成了setImage:,被这一无脑的失误纠结了这么久,丢人啊……各种bug改完后,前几次课的代码都已经传到博客的资源中了,可到我的资源页下载。
755 0
iOS-底层原理 32:启动优化(三)二进制重排
iOS-底层原理 32:启动优化(三)二进制重排
23 0
ios授权登录sdk分享(不包含支付功能)
说明:   为了解决开发者在ios中使用支付宝授权接口产品上架问题,所以推出授权登录相关sdk(不包含支付功能) 如果商户有使用到支付宝登录授权功能接口,可以参考使用。   ios SDK:AFAuthSDK.
492 0
抖音分享和授权(iOS)
准备工作 注册appkey 抖音开放平台 集成sharesdk 下载地址 Xcode配置:urlScheme为注册的appkey, 白名单:douyinsharesdk ,douyinopensdk 业务代码 初始化 #import <ShareSDK/ShareSDK.
1845 0
4849
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载