iOS开发--多图下载-仿SDWebImage简单处理

前言

昨天公司有新人过来面试,统一被问到了这个多图下载的相关问题,感觉有一个小伙子回答的挺完善,同时感觉有不少朋友在广泛使用SDWebImage的同时忽略了内部的实现细节,所以感觉有必要再次说上一说,希望对大家有所帮助

在实现多图下载时我们需要考虑的问题

在我们平时下载图片的时候都是使用的SDWebImage这个非常牛X的框架,其实它内部已经帮我们做了很多的细节处理,才保证了我们的图片下载以及显示包括程序顺畅运行,下面我们就来分析下自己实现完美的图片下载会遇到什么问题呢
这里采用tabbleView每一个cell都需要下载显示图片为例来说明

1)首先我们需要考虑到图片的缓存问题,不然每次用户下载完的图片离开当前页面再回来就需要重复下载
  • 图片缓存第一步,就需要先弄一个内存缓存,也就是自己创建一个数组,用来存放已经下载下来的图片
    • 这样每次用户上拉、下拉或者从其他页面回来再次显示图片的时候不至于重复下载
  • 而且直接从内存缓存里面取的话速度是非常快的,这样不会造成卡顿也不会给用户带来不好的体验
  • 图片缓存第二步,一个完美的图片缓存,不可能需要用户退出程序再次进去后再去重新下载之前已经下载过的图片吧,所以我们需要给用户已经下载过的图片保存到沙盒里面
    • 这里啰嗦的普及一个沙盒文件夹知识,就知道我们需要把缓存的图片放到哪一个文件夹下面了
  1)Documents:
  1-1 该目录下面的数据在连接手机时会备份
  1-2 苹果官方不允许把下载的数据存放于该目录下,否则审核直接被拒
  2)Libriary:下面有2个子文件夹
  2-1 caches:存放缓存文件
  2-2 perference:该目录用来存放偏好设置如登录名密码等等
  3)Tmp
  该文件夹下的文件会被随时删除,所以这个里面最好不要存放用户的东西
 *** 所以很明显,我们需要把图片存放于caches文件夹下
  • 紧接着就是图片如何存如何取的问题了,这里先不说图片的下载,这是一个麻烦的过程,所以这里先说存取问题,也就是我们常说的二级缓存
  • 每次图片需要展示的时候,首先判断图片是否存在于当前的内存缓存中,也就是我们创建的存放图片的数组,有的话就拿出来显示
  • 如果数组里面没有我们需要显示的图片,那么我们就去沙盒缓存里面去取
    • 如果沙盒缓存有,从沙盒缓存里面取出显示
    • 然后将其存放于内存缓存中,以便在程序不退出的时候用户再次需要这张图片的时候快速获取并显示
  • 如果沙盒缓存也没有的话,这个时候就真的需要去网络进行下载,下载之后,不仅需要把图片缓存到沙盒,还需要把图片保存到内存缓存中
2)OK,解决了图片缓存之后,那么就需要进入最复杂的情况了,就是如何处理下载图片的时候产生的各种奇葩的问题
  • 奇葩问题列表
  • 下载图片实质上属于耗时操作,耗时操作我们是需要放在子线程中去处理的
  • 我们需要弄一个字典去存放图片的下载操作,字典的key就使用图片的url,本质上这个是唯一的,value自然就是图片本身了
    • 之所以要使用字典存放图片的下载操作是因为,万一用户网速慢,这个时候图片是不会马上下载完成的,这个时候用户万一上下拖动页面或者进入其他页面再次回到这个页面,我们是需要判断之前的下载操作是否存在的,如果存在就不需要再去创建了,等待下载即可,如果不存在才需要创建的
  • 还要考虑的就是存在下载操作但是下载失败的情况,也就是image是空的,这个时候我们需要去移除下载操作,以便用户上拉下拉的时候重新创建下载任务重新下载图片,不然下载失败操作还在,这样永远都无法重新下载了
  • 下载创建回到主线程刷新UI的时候我们这里不能用tableView的reloadata方法,原因是你如果使用了这个方法,那么用户在图片还没有下载完成的时候上下来回拖动的话,cell会循环利用到其他地方,这样图片如果在这个时候下载好,就会把图片显示到错误的位置,比如本来是第2行的图片显示到第5行去了
    • 我们需要采用刷新指定行的方式,这样无论你什么时间下载好图片,你cell再循环利用,无论当前cell是否显示在屏幕,我只要在下载好的时候去找到之前的indexPath去刷新,去给image赋值就行了,都会按照正确的位置去显示
      [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationMiddle];
  • 完善的下载还需要监听内存警告,在收到内存警告的时候移除内存缓存,并将这个数组赋值nil,并且移除下载队列中的的操作

核心代码

  • 首先创建一个存放已下载图片的内存缓存字典-- iconsDict
  • 再创建一个存放已创建下载操作的操作字典 -- operationsDict
  • 创建一个非主队列,可供全局操作,目的是将下载操作添加到队列中,让下载可以异步执行 -- downloadQueue
  • iconsDict、operationsDict、downloadQueue需要多次被访问到,需要使用到懒加载最好哦
- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:ID ];
    //这里我自己弄了一个模型,来给cell内部子控件赋值,这里就给赋值操作简单化了,没有使用MVC
    LBApp *model = self.appMarray[indexPath.row];

    cell.textLabel.text = model.name;
    NSString *downloadStr = [NSString stringWithFormat:@"已有%@下载",model.download];
    cell.detailTextLabel.text =downloadStr;

    // 先从内存缓存中取出图片
    UIImage *image = [self.iconsDict objectForKey:model.icon];
    if (image) {// 内存中有图片
        cell.imageView.image = image;
    }else {// 内存中没有图片
        // 获得Caches文件夹
         NSString *cachesPath = [NSSearchPathForDirectoriesInDomains(NSCachesDirectory, NSUserDomainMask, YES) firstObject];
        // 获得文件名
         NSString *filename = [app.icon lastPathComponent];
        // 获取文件全路径
         NSString *file = [cachesPath stringByAppendingPathComponent:filename];
        // 加载沙盒的文件数据
        NSData *data = [NSData dataWithContentsOfFile:fullPath];
        if (data) {// 直接利用沙盒中图片
            UIImage *image = [UIImage imageWithData:data];
            cell.imageView.image = image;
            // 存到字典中
            [self.iconsDict setObject:image forKey:model.icon];

        }else {// 没有的话就下载图片
            NSBlockOperation *download = nil;
            //显示占位图片
            cell.imageView.image = [UIImage imageNamed:@"placeholder"];
            download = self.operationsDict[model.icon];
            if (download) {//如果存在下载操作,什么也不做等待下载

            }else {//创建下载操作
                download = [NSBlockOperation blockOperationWithBlock:^{
                    //加载图片
                    NSURL *url = [NSURL URLWithString:model.icon];
                    NSData *data = [NSData dataWithContentsOfURL:url];
                    UIImage *image = [UIImage imageWithData:data];
                    if (!image) {//下载失败
                    //下载失败移除下载操作,以便用户上拉下拉的时候重新创建下载任务重新下载图片
                        [self.operationsDict removeObjectForKey:model.icon];
                        return ;
                    }
                    //下载成功
                    //image存进内存缓存,需要先存进内存然后再去刷新ui,因为刷新ui会重新调用cellForRow方法,这个时候如果内存有图片,就会直接从内存加载然后显示上去
                    [self.iconsDict setObject:image forKey:model.icon];

                    [[NSOperationQueue mainQueue] addOperationWithBlock:^{//回到主线程刷新UI
                       //刷新指定行
                        [self.tableView reloadRowsAtIndexPaths:@[indexPath] withRowAnimation:UITableViewRowAnimationMiddle];
                    }];
                    //image数据写入磁盘缓存
                    [data writeToFile:fullPath atomically:YES];
                    //下载完成的时候移除下载操作
                    [self.operationsDict removeObjectForKey:model.icon];
                }];
                //将下载操作添加到队列中,让下载可以异步执行
                [self.downloadQueue addOperation:download];
                //将下载操作添加到操作字典中,防止没有下载完成上下拖拽的时候重复创建下载操作
                 self.operationsDict[model.icon] = download;
            }   
        }   
    }
    return cell;
}

结束语

这里这个大致的思路就说完毕了,大家如果有兴趣可以多去研究研究SDWebImage内部的实现,对大家的帮助会很大哦,当然存在不完善的地方希望大家可以共同讨论学习哦,感谢您花时间阅读,文字描述较多,但是这些理论性的东西难免如此,非常抱歉

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

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,400评论 25 707
  • 前不久做了一个生成快照的需求,其中用到 SDWebImage 来下载图片,在使用该框架的过程中也遇到了一些问题,索...
    ShannonChenCHN阅读 14,045评论 12 241
  • *面试心声:其实这些题本人都没怎么背,但是在上海 两周半 面了大约10家 收到差不多3个offer,总结起来就是把...
    Dove_iOS阅读 27,121评论 29 470
  • 我的爱如一朵花开 安静地绽放在时间之外 亲爱的妈妈啊 我不能时时陪伴在您身旁 只能让美丽的康乃馨来替代 我的爱如一...
    简JN阅读 309评论 5 10
  • 其实,许多事从一开始就已料到了结局,往后所有的折腾,都不过只是为了拖延散场的时间 。
    Luke米儿阅读 152评论 0 0