「翻译」进阶技巧:UITableViewCell的content异步加载的正确解决方案

原文:Advanced issues: Asynchronous UITableViewCell content loading done right

有什么问题?

你是否经常好奇,为什么你UITableView的加载往往“几乎”是完美的?我的意思是,你已经明确地告诉了iOS,所有单元格的工作(例如从远程URL加载图片或者渲染内容)都要在后台线程中异步地完成计算。但是有时候这还不够,主要有两个原因:

  1. 当一个cell离开了可见区域时,你所调用的异步操作仍然在工作。这通常会造成不必要的对系统资源的使用,甚至会由不知道哪个cell完成的异步任务返回而产生bug般的结果。
  2. UITableViewCells通常是被复用的实例。也就是说被加载到view的cell所持有的数据原本是属于另一个完全不同的cell的。这常常会造成一种令人沮丧的,被称作“Cell switching"的bug。

问题解决啦!

首先,你要明白解决这个问题的方法有很多——有些非常好,而有些则,呃,很恶心。我接下来准备介绍的方法基于一个Apple提供的demo(WWDC 2012 session 211),你知道的,这些家伙非常精通iOS。
在我们的例子里,我将使用一个简单的UITableView实例,用于显示你的Facebook好友的名字和资料照片。核心思路是:我们需要在UITableViewDataSourcetableView:cellForRowAtIndexPath:代理方法被调用时加载资料照片。如果操作成功,并且该cell依然在view当中,我们就简单地把图片添加到cell里用于显示详情照片的image view即可。(这一操作需要在主线程中完成)。否则的话,我们要确保我们并没有执行setImage操作。
在开始之前,有一些准备工作:为后台运行的operations定义一个NSOperationQueue,我们在这里称之为imageLoadingOperationQueue。同样的,为存储指向特定operations的引用对象们定义一个NSMutableDictionary——在这个示例中我们将为Facebook的唯一id和oprations对象在facebookUidToImageDownloadOperations字典建立map映射。
最重要的部分已经写在代码注释中,看完注释你就明白了:

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    FacebookFriend *friend = [self.facebookFriends objectAtIndex:indexPath.row];
    FacebookFriendCell *cell = [tableView dequeueReusableCellWithIdentifier:FB_CELL_IDENTIFIER forIndexPath:indexPath];
    cell.lblName.text = friend.name;
 
    //为加载图片到资料image view的操作创建一个block operation
    NSBlockOperation *loadImageIntoCellOp = [[NSBlockOperation alloc] init];
    //定义一个weak operation,以便在block内引用而不用产生引用循环
    __weak NSBlockOperation *weakOp = loadImageIntoCellOp;
    [loadImageIntoCellOp addExecutionBlock:^(void){
        //一些异步任务。一旦Image下载完成,它将会在主线程被加载到view当中
        UIImage *profileImage = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL URLWithString:friend.imageUrl]]];
        [[NSOperationQueue mainQueue] addOperationWithBlock:^(void) {
            //在执行操作前检查操作是否已经取消。我们使用cellForRowAtIndexPath来确保对于不可见cell会返回nil
            if (!weakOp.isCancelled) {
                FacebookFriendCell *theCell = (FacebookFriendCell *)[tableView cellForRowAtIndexPath:indexPath];
                [theCell.ivProfile setImage:profileImage];
                [self.facebookUidToImageDownloadOperations removeObjectForKey:friend.uid];
            }
        }];
    }];
 
    //在NSMutableDictionary中保存一个指向operation的引用,以便稍后可以取消
    if (friend.uid) {
        [self.facebookUidToImageDownloadOperations setObject:loadImageIntoCellOp forKey:friend.uid];
    }
 
    //将operation添加到指定的后台队列
    if (loadImageIntoCellOp) {
        [self.imageLoadingOperationQueue addOperation:loadImageIntoCellOp];
    }
 
    //确保cell不会持有任何来自重用的数据的痕迹-
    //这里是一个assign placeholder的好地方
    cell.ivProfile.image = nil;
 
    return cell;
}

现在剩下的事情就是利用iOS 6.0中引入的新的UITableViewDelegate方法:tableView:didEndDisplayingCell:forRowAtIndexPath:,在我们不再需要加载数据到单元格时调用它。
下面的代码似乎是获取相关的operation并且取消它的最佳位置:

- (void)tableView:(UITableView *)tableView didEndDisplayingCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath {
    FacebookFriend *friend = [self.facebookFriends objectAtIndex:indexPath.row];
    //Fetch operation that doesn't need executing anymore
    NSBlockOperation *ongoingDownloadOperation = [self.facebookUidToImageDownloadOperations objectForKey:friend.uid];
    if (ongoingDownloadOperation) {
        //Cancel operation and remove from dictionary
        [ongoingDownloadOperation cancel];
        [self.facebookUidToImageDownloadOperations removeObjectForKey:friend.uid];
    }
}

同样的,当table不再被需要时,不要忘记利用*** NSOperationQueue 并且调用cancelAllOperations***:

- (void)viewDidDisappear:(BOOL)animated {
    [self.imageLoadingOperationQueue cancelAllOperations];
}

搞定!现在你自己也拥有了流畅如法拉利般的UITableView啦,不用谢~
😉
😉
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容

  • *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,121评论 29 470
  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,016评论 4 62
  • Swift版本点击这里欢迎加入QQ群交流: 594119878最新更新日期:18-09-17 About A cu...
    ylgwhyh阅读 25,266评论 7 249
  • 我做了个梦,梦到自己已经老了,大约八十岁的样子,具体有没有那么大岁数我不清楚。可以确定的是,梦里的我应该比我妈妈的...
    不写诗了阅读 866评论 24 26
  • 建筑小品,其实不是今天的,是昨天的,忘了拍照,然后就跟朋友去酒吧浪了,今天补打卡。
    七分颜色阅读 150评论 0 0