舉例講解iOS中延遲加載和上拉刷新/下拉加載的實(shí)現(xiàn)
lazy懶加載(延遲加載)UITableView
舉個(gè)例子,當(dāng)我們?cè)谟镁W(wǎng)易新聞App時(shí),看著那么多的新聞,并不是所有的都是我們感興趣的,有的時(shí)候我們只是很快的滑過,想要快速的略過不喜歡的內(nèi)容,但是只要滑動(dòng)經(jīng)過了,圖片就開始加載了,這樣用戶體驗(yàn)就不太好,而且浪費(fèi)內(nèi)存.
這個(gè)時(shí)候,我們就可以利用lazy加載技術(shù),當(dāng)界面滑動(dòng)或者滑動(dòng)減速的時(shí)候,都不進(jìn)行圖片加載,只有當(dāng)用戶不再滑動(dòng)并且減速效果停止的時(shí)候,才進(jìn)行加載.
剛開始我異步加載圖片利用SDWebImage來(lái)做,最后試驗(yàn)的時(shí)候出現(xiàn)了重用bug,因?yàn)殡m然SDWebImage實(shí)現(xiàn)了異步加載緩存,當(dāng)加載完圖片后再請(qǐng)求會(huì)直接加載緩存中的圖片,注意注意注意,關(guān)鍵的來(lái)了,如果是lazy加載,滑動(dòng)過程中是不進(jìn)行網(wǎng)絡(luò)請(qǐng)求的,cell上的圖片就會(huì)發(fā)生重用,當(dāng)你停下來(lái)能進(jìn)行網(wǎng)絡(luò)請(qǐng)求的時(shí)候,才會(huì)變回到當(dāng)前Cell應(yīng)有的圖片,大概1-2秒的延遲吧(不算延遲,就是沒有進(jìn)行請(qǐng)求,也不是沒有緩存的問題).怎么解決呢?這個(gè)時(shí)候我們就要在Model對(duì)象中定義個(gè)一個(gè)UIImage的屬性,異步下載圖片后,用已經(jīng)緩存在沙盒中的圖片路徑給它賦值,這樣,才cellForRowAtIndexPath方法中,判斷這個(gè)UIImage對(duì)象是否為空,若為空,就進(jìn)行網(wǎng)絡(luò)請(qǐng)求,不為空,就直接將它賦值給cell的imageView對(duì)象,這樣就能很好的解決圖片短暫重用問題.
@下面我的代碼用的是自己寫的異步加載緩存類,SDWebImage的加載圖片的懶加載,會(huì)在后面的章節(jié)給出.(為什么不同呢,因?yàn)镾DWebImage我以前使用重來(lái)不關(guān)心它將圖片存儲(chǔ)在沙盒中的名字和路徑,但是要實(shí)現(xiàn)懶加載的話,一定要得到圖片路徑,所以在找SDWebImage如何存儲(chǔ)圖片路徑上花了點(diǎn)時(shí)間)
@model類
#import <Foundation/Foundation.h>
@interface NewsItem : NSObject
@property (nonatomic,copy) NSString * newsTitle;
@property (nonatomic,copy) NSString * newsPicUrl;
@property (nonatomic,retain) UIImage * newsPic; // 存儲(chǔ)每個(gè)新聞自己的image對(duì)象
- (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;
{
//解析數(shù)據(jù)
NSError * error = nil;
NSDictionary * dic = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableContainers error:&error];
NSMutableArray * originalArray = [dic objectForKey:@"news"];
//封裝數(shù)據(jù)對(duì)象
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實(shí)現(xiàn)回調(diào)
@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;
// 先判斷本地沙盒是否已經(jīng)存在圖像,存在直接獲取,不存在再下載,下載后保存
// 存在沙盒的Caches的子文件夾DownloadImages中
UIImage * image = [self loadLocalImage:imageUrl];
if (image == nil) {
// 沙盒中沒有,下載
// 異步下載,分配在程序進(jìn)程缺省產(chǎn)生的并發(fā)隊(duì)列
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設(shè)置
dispatch_async(dispatch_get_main_queue(), ^{
//將下載的圖像,存入newsItem對(duì)象中
UIImage * image = [UIImage imageWithData:imageData];
self.newsItem.newsPic = image;
//使用block實(shí)現(xiàn)回調(diào),通知圖像下載完成
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];
// 創(chuàng)建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 拼接圖像文件在沙盒中的路徑,因?yàn)閳D像URL有"/",要在存入前替換掉,隨意用"_"代替
NSString * imageName = [imageUrl stringByReplacingOccurrencesOfString:@"/" withString:@"_"];
NSString * imageFilePath = [downloadImagesPath stringByAppendingPathComponent:imageName];
return imageFilePath;
}
@end
@這里只給出關(guān)鍵代碼,網(wǎng)絡(luò)請(qǐng)求,數(shù)據(jù)處理,自定義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;
//判斷將要展示的新聞?dòng)袩o(wú)圖像
if (item.newsPic == nil) {
//沒有圖像下載
cell.picImageView.image = nil;
NSLog(@"dragging = %d,decelerating = %d",self.tableView.dragging,self.tableView.decelerating);
// ??執(zhí)行的時(shí)機(jī)與次數(shù)問題
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
{
//創(chuàng)建圖像下載器
ImageDownloader * downloader = [[ImageDownloader alloc] init];
//下載器要下載哪個(gè)新聞的圖像,下載完成后,新聞保存圖像
downloader.newsItem = item;
//傳入下載完成后的回調(diào)函數(shù)
[downloader setCompletionHandler:^{
//下載完成后要執(zhí)行的回調(diào)部分,block的實(shí)現(xiàn)
//根據(jù)indexPath獲取cell對(duì)象,并加載圖像
#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對(duì)象
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 - 延遲加載關(guān)鍵
//tableView停止拖拽,停止?jié)L動(dòng)
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
//如果tableview停止?jié)L動(dòng),開始加載圖像
if (!decelerate) {
[self loadImagesForOnscreenRows];
}
NSLog(@"%s__%d__|%d",__FUNCTION__,__LINE__,decelerate);
}
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView
{
//如果tableview停止?jié)L動(dòng),開始加載圖像
[self loadImagesForOnscreenRows];
}
下拉刷新和上拉加載的原理
很多App中,新聞或者展示類都存在下拉刷新和上拉加載的效果,網(wǎng)上提供了實(shí)現(xiàn)這種效果的第三方類(詳情請(qǐng)見MJRefresh和EGOTableViewPullRefresh),用起來(lái)很方便,但是閑暇之余,我們可以思考下,這種效果實(shí)現(xiàn)的原理是什么,我以前說過,只要是動(dòng)畫都是騙人的,只要不是硬件問題大部分效果都能在系統(tǒng)UI的基礎(chǔ)上做出來(lái).
下面是關(guān)鍵代碼分析:
// 下拉刷新的原理
- (void)scrollViewWillBeginDecelerating:(UIScrollView *)scrollView
{
if (scrollView.contentOffset.y < - 100) {
[UIView animateWithDuration:1.0 animations:^{
// frame發(fā)生偏移,距離頂部150的距離(可自行設(shè)定)
self.tableView.contentInset = UIEdgeInsetsMake(150.0f, 0.0f, 0.0f, 0.0f);
} completion:^(BOOL finished) {
/**
* 發(fā)起網(wǎng)絡(luò)請(qǐng)求,請(qǐng)求刷新數(shù)據(jù)
*/
}];
}
}
// 上拉加載的原理
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
NSLog(@"%f",scrollView.contentOffset.y);
NSLog(@"%f",scrollView.frame.size.height);
NSLog(@"%f",scrollView.contentSize.height);
/**
* 關(guān)鍵-->
* scrollView一開始并不存在偏移量,但是會(huì)設(shè)定contentSize的大小,所以contentSize.height永遠(yuǎn)都會(huì)比contentOffset.y高一個(gè)手機(jī)屏幕的
* 高度;上拉加載的效果就是每次滑動(dòng)到底部時(shí),再往上拉的時(shí)候請(qǐng)求更多,那個(gè)時(shí)候產(chǎn)生的偏移量,就能讓contentOffset.y + 手機(jī)屏幕尺寸高大于這
* 個(gè)滾動(dòng)視圖的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發(fā)生的偏移量,距離底部往上提高60(可自行設(shè)定)
self.tableView.contentInset = UIEdgeInsetsMake(0, 0, 60, 0);
} completion:^(BOOL finished) {
/**
* 發(fā)起網(wǎng)絡(luò)請(qǐng)求,請(qǐng)求加載更多數(shù)據(jù)
* 然后在數(shù)據(jù)請(qǐng)求回來(lái)的時(shí)候,將contentInset改為(0,0,0,0)
*/
}];
}
}
相關(guān)文章
iPhoneX無(wú)導(dǎo)航欄頁(yè)面適配問題解決方案
這篇文章主要介紹了iPhoneX無(wú)導(dǎo)航欄頁(yè)面適配問題解決方案,原全屏適配在iPhoneX會(huì)由于安全區(qū)域的變化導(dǎo)致顯示不全,本文給大家介紹的非常詳細(xì),需要的朋友可以參考下2017-11-11xcode8 關(guān)閉控制臺(tái)不打印不信息的解決方法(圖文詳解)
這篇文章主要介紹了xcode8 關(guān)閉控制臺(tái)不打印信息的解決方法,本文圖文并茂給大家介紹的非常詳細(xì),感興趣的朋友參考下吧2016-10-10IOS 開發(fā)之UILabel 或者 UIButton加下劃線鏈接
這篇文章主要介紹了IOS 開發(fā)之UILabel 或者 UIButton加下劃線鏈接的相關(guān)資料,需要的朋友可以參考下2017-07-07iOS10最新實(shí)現(xiàn)遠(yuǎn)程通知的開發(fā)教程詳解
這篇文章主要介紹了iOS10最新遠(yuǎn)程通知開發(fā)的實(shí)現(xiàn)過程,文章先對(duì)推送通知以及遠(yuǎn)程推送通知等進(jìn)行了基本介紹,然后通過示例代碼詳細(xì)介紹了iOS10 全新遠(yuǎn)程通知的教程,有需要的朋友們可以參考借鑒,下面來(lái)一起看看吧。2016-09-09