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内部的实现，对大家的帮助会很大哦，当然存在不完善的地方希望大家可以共同讨论学习哦，感谢您花时间阅读，文字描述较多，但是这些理论性的东西难免如此，非常抱歉