iOS开发TableView 图片优化

作者: 搬运工开发者 | 来源:发表于2017-05-19 11:39 被阅读251次

之前在上一家公司中开发开发了一个类似朋友圈的功能,之前是直接使用原生控件,并没有使用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<NSIndexPath *> *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

相关文章

网友评论

  • alanim:cell那里应该判断之前是否有加载过吧。之前加载过图片后来再滚动回来没有图片的话用户体验会很不好
    nenhall:博主的这方法不错,有效果,我依自己的项目改良一下:
    return cell的时候把collectionView.isDragging || collectionView.isDecelerating和mdoel数据一起传过去,cell里面自己根据传进来的bool判定是否高速滑动中:
    如果是:则通过sdwebimage从内存中去取图片,如有则设置图片,否则设置默认图
    如果否:sdwebimage下载图片;

    记得不能从磁盘中取图片,因为sdwebimage不会马上把图片保存到磁盘中
  • 谢谢生活:第三种方案怎样样?对于cell里面加了大图性能上应该可以。
    搬运工开发者:大图的可以考虑使用RunLoop优化,滚动的时候不加载已经每次RunLoop每次循环只加载一张图片
  • 老司机Wicky:图片加载这代码看起来好熟悉啊
    老司机Wicky:@搬运工开发者 自己的方案被别人采纳心里还是非常爽的:stuck_out_tongue_winking_eye:
    搬运工开发者:之前看了你的文章和其他人的博客和苹果demo的

本文标题:iOS开发TableView 图片优化

本文链接:https://www.haomeiwen.com/subject/zltyxxtx.html