iOS tableView的圖片緩衝非同步載入

標籤：uitableview   圖片緩衝   非同步載入   

1.建立一個viewController..h檔案實現UIScrollViewDelegate和UITableViewDelegate，並聲明ICTableViewDelegate（用來實現圖片有緩衝則載入圖片，無緩衝則請求圖片並緩衝下來再載入）.h檔案如下

#define KimageKey @"photoFileUrl"  ///為數組中每個item中存放圖片URL的key名字#define KidKey @"activityId"    ///為數組中每個item的id  用於緩衝之用#import <UIKit/UIKit.h>@protocol ICTableViewDelegate@required    -(void)cellImageDidLoad:(NSIndexPath *)indexPath image:(NSMutableArray *)imageArray;@end@interface ICTableViewController : UIViewController <UIScrollViewDelegate,UITableViewDelegate>{@public    id <WQTableViewDelegate> WQTableVieDelegate;    NSMutableArray *tableDataArray;    UITableView *wqTable;} @end

.m檔案如下：

- (void)loadCellImage{//方法實現實現圖片有緩衝則載入圖片，無緩衝則請求圖片並緩衝下來再載入        NSArray *indexPathsForLoad = [wqTable indexPathsForVisibleRows];    for (NSIndexPath *item in indexPathsForLoad) {        NSInteger rowNumberForCell = item.row;        NSLog(@"%li",(long)rowNumberForCell);        NSLog(@"%li",(unsigned long)[tableDataArray count]);        if (rowNumberForCell >[tableDataArray count] -1) {            return;        }        NSString *imageStr =tableDataArray[rowNumberForCell][@"photoFileUrl"];        NSLog(@"%@",imageStr);        NSMutableArray *imageArray = [NSMutableArray array];        if([imageStr length]!=0){            NSArray *photoUrl = [imageStr componentsSeparatedByString:MULTI_FILES_SEPARATOR];            for(int i=0;i<photoUrl.count -1;i++){                        //顯示圖片                NSData *imageData = [NSData dataWithContentsOfURL:[NSURL URLWithString:[[NSString stringWithFormat:@"%@/%@%@",[WiseApplicationViewController getImgBucketDomain],[WiseApplicationViewController getOrganizationId],photoUrl[i]] stringByAddingPercentEscapesUsingEncoding: NSUTF8StringEncoding]]];                NSString *imageName = [tableDataArray[rowNumberForCell][KimageKey] stringByAppendingString:[NSString stringWithFormat:@".temp"]];                NSString *imageDataPath = [NSHomeDirectory() stringByAppendingPathComponent:[@"Library/Caches/" stringByAppendingString:imageName]];                                if (![[NSFileManager defaultManager] fileExistsAtPath:imageDataPath]) {                                    [imageData writeToFile:imageDataPath atomically:YES];                    UIImage *image = [UIImage imageWithData:imageData];                                        [imageArray addObject:image];                                                        }                    }            [ICTableVieDelegate cellImageDidLoad:item image:imageArray];        }            }}#pragma mark - Table View delegate-(void)tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath{//<span style="font-family: 'Courier New'; white-space: pre-wrap; background-color: rgb(245, 245, 245); margin: 0px; padding: 0px; line-height: 1.5 !important;">拖拽</span><span style="line-height: 19px; white-space: pre-wrap; font-family: Arial, Helvetica, sans-serif;">tableView</span><span style="font-family: 'Courier New'; white-space: pre-wrap; background-color: rgb(245, 245, 245); margin: 0px; padding: 0px; line-height: 1.5 !important;">之後 完成減速時執行</span><span style="line-height: 19px; white-space: pre-wrap; font-family: Arial, Helvetica, sans-serif;">停止滾動時啟動緩衝載入圖片進程</span>        if (!tableView.isDragging && !tableView.isDecelerating)    {        [self performSelectorInBackground:@selector(loadCellImage) withObject:nil];    }}#pragma mark - Scroll View delegate- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{//<span style="font-family: 'Courier New'; white-space: pre-wrap; background-color: rgb(245, 245, 245); margin: 0px; padding: 0px; line-height: 1.5 !important;">拖拽<span style="background-color: rgb(240, 240, 240); line-height: 1.5;">Scroll</span><span style="background-color: rgb(240, 240, 240); line-height: 19px; font-family: Arial, Helvetica, sans-serif;">View</span><span style="margin: 0px; padding: 0px; line-height: 1.5 !important;">之後 完成減速時執行</span><span style="background-color: rgb(240, 240, 240); line-height: 19px; font-family: Arial, Helvetica, sans-serif;">啟動緩衝載入圖片進程</span></span>    [self performSelectorInBackground:@selector(loadCellImage) withObject:nil];}- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{//<span style="color: rgb(51, 51, 51); font-family: Verdana, sans-serif, 宋體; font-size: 13px; letter-spacing: 0.5px; line-height: 22.5px;">停止滾動時要執行的代碼</span>    if (!decelerate) {        [self performSelectorInBackground:@selector(loadCellImage) withObject:nil];    }}

然後具體子類繼承這個父類，並實現ICTableViewDelegate代理方法

#pragma mark ICTableViewDelegate-(void)cellImageDidLoad:(NSIndexPath *)indexPath image:(NSMutableArray *)imageArray{    EventShowTableViewCell *cell = (EventShowTableViewCell *)[_eventListTableView cellForRowAtIndexPath:indexPath];    if([imageArray count]!=0){        for(int i=0;i<imageArray.count;i++){            if (IS_IOS8_OR_LATER) {                CustomPhotoBtn *photoBtn = (CustomPhotoBtn *)[cell.contentView viewWithTag:(i +1)*10]//<span style="font-family: Arial, Helvetica, sans-serif;">CustomPhotoBtn</span><span style="font-family: Arial, Helvetica, sans-serif;">載入圖片封裝的一個控制項</span>                UIImage *thumbImg = [FileTransferHelp thumbnailWithImage:(UIImage *)imageArray[i] size:CGSizeMake(60, 40)];                [photoBtn.imgView setImage:thumbImg];                [cell.contentView addSubview:photoBtn];            }else{                CustomPhotoBtn *photoBtn = (CustomPhotoBtn *)[cell.contentView viewWithTag:(i +1)*10];                UIImage *thumbImg = [FileTransferHelp thumbnailWithImage:(UIImage *)imageArray[i] size:CGSizeMake(60, 40)];                [photoBtn.imgView setImage:thumbImg];                [cell addSubview:photoBtn];            }        }    }    }

在子類設定每個cell的內容的

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath

裡寫下

CustomPhotoBtn *photoBtn = [CustomPhotoBtn customPhotoBtn];//載入圖片封裝的一個控制項    [photoBtn.fileFullName setText:url];        NSString *imageName = [url stringByAppendingString:[NSString stringWithFormat:@".temp"]];        NSLog(@"imageName%@",imageName);    NSString *imageDataPath = [NSHomeDirectory() stringByAppendingPathComponent:[@"Library/Caches/" stringByAppendingString:imageName]]//從緩衝中找圖片    NSLog(@"imageDataPath%@",imageDataPath);//    [data writeToFile:imageDataPath atomically:YES];    UIImage *image = [UIImage imageWithData:[NSData dataWithContentsOfFile:imageDataPath]];    UIImage *thumbImg = [FileTransferHelp thumbnailWithImage:image size:CGSizeMake(60, 40)];    if (thumbImg) {        [photoBtn.imgView setImage:thumbImg];    }        return photoBtn;

iOS tableView的圖片緩衝非同步載入