iOS开发TableView 图片优化

之前在上一家公司中开发开发了一个类似朋友圈的功能,之前是直接使用原生控件,并没有使用CoreText实现(CoreText进行绘制也是一种很好的优化方案),对于图片的处理主要是做以下处理(项目中使用了前两种,第三种是在网上看到的主要来源于这三个地方http://www.jianshu.com/p/328e503900d0,

http://www.2cto.com/kf/201504/392433.html,
https://developer.apple.com/library/prerelease/content/samplecode/LazyTableImages/Introduction/Intro.html#):
1、使用更加轻量级的layer显示图片
2、重新生成固定大小的图片
3、当tableView滚动的时候不进行图片下载(直接占位图片显示),停止滚动的时候在进行下载图片
现在主要将的第三种方法,以下是实现的主要代码:
1、定义属性

@property (nonatomic, strong) NSArray *array;
@property (nonatomic, strong) NSMutableArray *downImageArray;
@property (nonatomic, weak) UITableView *tableView;

2、viewDidLoad

- (void)viewDidLoad {
    [super viewDidLoad];
    _downImageArray = [NSMutableArray array];
    UITableView *tableView = [[UITableView alloc] initWithFrame:self.view.bounds];
    tableView.delegate = self;
    tableView.dataSource = self;
    [tableView registerNib:[UINib nibWithNibName:@"TableViewCell" bundle:nil] forCellReuseIdentifier:@"cell"];
    [self.view addSubview:tableView];
    _tableView = tableView;
    _array = @[@"http://app.fssgjz.cn:5287/agent/M22quanmiannengfu.png",
               @"http://app.fssgjz.cn:5287/agent/5Ayishufengx.png",
               @"http://app.fssgjz.cn:5287/agent/fengxiong.png",
               @"http://app.fssgjz.cn:5287/agent/quban.png",
               @"http://app.fssgjz.cn:5287/agent/meibi.png",
               @"http://app.fssgjz.cn:5287/agent/meifu.png",
               @"http://app.fssgjz.cn:5287/agent/huanyanshu.png",
               @"http://app.fssgjz.cn:5287/agent/baogongshu.png",
               @"http://app.fssgjz.cn:5287/agent/action_ticket_main.png",
               @"http://app.fssgjz.cn:5287/agent/action_choose_zr.png",
               @"http://app.fssgjz.cn:5287/agent/action_choose_main2.png",
               
               @"http://app.fssgjz.cn:5287/agent/M22quanmiannengfu.png",
               @"http://app.fssgjz.cn:5287/agent/5Ayishufengx.png",
               @"http://app.fssgjz.cn:5287/agent/fengxiong.png",
               @"http://app.fssgjz.cn:5287/agent/quban.png",
               @"http://app.fssgjz.cn:5287/agent/meibi.png",
               @"http://app.fssgjz.cn:5287/agent/meifu.png",
               @"http://app.fssgjz.cn:5287/agent/huanyanshu.png",
               @"http://app.fssgjz.cn:5287/agent/baogongshu.png",
               @"http://app.fssgjz.cn:5287/agent/action_ticket_main.png",
               @"http://app.fssgjz.cn:5287/agent/action_choose_zr.png",
               @"http://app.fssgjz.cn:5287/agent/action_choose_main2.png",
               
               @"http://app.fssgjz.cn:5287/agent/M22quanmiannengfu.png",
               @"http://app.fssgjz.cn:5287/agent/5Ayishufengx.png",
               @"http://app.fssgjz.cn:5287/agent/fengxiong.png",
               @"http://app.fssgjz.cn:5287/agent/quban.png",
               @"http://app.fssgjz.cn:5287/agent/meibi.png",
               @"http://app.fssgjz.cn:5287/agent/meifu.png",
               @"http://app.fssgjz.cn:5287/agent/huanyanshu.png",
               @"http://app.fssgjz.cn:5287/agent/baogongshu.png",
               @"http://app.fssgjz.cn:5287/agent/action_ticket_main.png",
               @"http://app.fssgjz.cn:5287/agent/action_choose_zr.png",
               @"http://app.fssgjz.cn:5287/agent/action_choose_main2.png",
               
               @"http://app.fssgjz.cn:5287/agent/M22quanmiannengfu.png",
               @"http://app.fssgjz.cn:5287/agent/5Ayishufengx.png",
               @"http://app.fssgjz.cn:5287/agent/fengxiong.png",
               @"http://app.fssgjz.cn:5287/agent/quban.png",
               @"http://app.fssgjz.cn:5287/agent/meibi.png",
               @"http://app.fssgjz.cn:5287/agent/meifu.png",
               @"http://app.fssgjz.cn:5287/agent/huanyanshu.png",
               @"http://app.fssgjz.cn:5287/agent/baogongshu.png",
               @"http://app.fssgjz.cn:5287/agent/action_ticket_main.png",
               @"http://app.fssgjz.cn:5287/agent/action_choose_zr.png",
               @"http://app.fssgjz.cn:5287/agent/action_choose_main2.png"
               ];
}

3、tableView代码
sdwebimage对下载的图片有缓存作用,downImageArray用于存储那些图片已经下载过的NSIndxPath,tableView属性isDragging表示正在快速滚动,isDecelerating表示正在慢速滚动,当tableView 正在滚动而且该cell 的图片还没下载的时候直接显示占位图片,

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    TableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell" forIndexPath:indexPath];
    if ((self.tableView.isDragging || self.tableView.isDecelerating) && ![self.downImageArray containsObject:indexPath]) {
        cell.iconView.image = [UIImage imageNamed:@"1.jpg"];
        return cell;
    }
    [cell.iconView sd_setImageWithURL:[NSURL URLWithString:_array[indexPath.row]] placeholderImage:[UIImage imageNamed:@"1.jpg"] completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, NSURL *imageURL) {
        if (![self.downImageArray containsObject:indexPath]) {
            [self.downImageArray addObject:indexPath];
        }
    }];
    return cell;
}

- (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath {
    return 89.0;
}

5、tableView滚动、刷新处理

//结束快速滚动,开始慢速滚动
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate {
    if (!decelerate) {
        [self reload];
    }
}

//慢速滚动结束
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
    [self reload];
}
// 数据刷新
- (void)reload {
    NSArray *arr = [self.tableView indexPathsForVisibleRows];
 //存储需要下载图片的indexpath
    NSMutableArray *arrToReload = [NSMutableArray array];
    for (NSIndexPath *indexPath in arr) {
        //判断该cell的图片是否已经下载
        if (![self.downImageArray containsObject:indexPath]) {
            [arrToReload addObject:indexPath];
        }
    }
    [self.tableView reloadRowsAtIndexPaths:arrToReload withRowAnimation:UITableViewRowAnimationNone];
}
//当cell移除界面的时候停止当前正在下载图片
- (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    TableViewCell *tableViewCell = (TableViewCell *)cell;
    [tableViewCell.iconView sd_cancelCurrentImageLoad];
}

苹果文档也有这方面的资料
https://developer.apple.com/library/prerelease/content/samplecode/LazyTableImages/Introduction/Intro.html#

另外也有的一些APP为了使用更加流畅,当tableView快速滚动或者滚动的时候不加载现在显示数据vvebo就是这样处理的,vvebo地址:https://github.com/johnil/VVeboTableViewDemo

你可能感兴趣的:(iOS开发TableView 图片优化)