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)
             */ 
        }]; 
 
    } 
}