SDWebImage的一些使用功能

使用场景:自定义的UITableViewCell上有图片需要显示, 要求网络状态为WIFI时, 显示图片高清图; 网络状态为蜂窝移动网络时, 显示图片缩略图.如下图样例:



由于要监听网络状态, 在这里笔者推荐使用AFNetWorking
1.在GitHub或者利用cocoa pods给项目导入第三方框架AFNetWorking.
2.在AppDelegate.m文件中的application:didFinishLaunchingWithOptions:方法中监听网络状态

// AppDelegate.m 文件中

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{
    // 监控网络状态
    [[AFNetworkReachabilityManager sharedManager] startMonitoring];
}

// 以下代码在需要监听网络状态的方法中使用
AFNetworkReachabilityManager *mgr = [AFNetworkReachabilityManager sharedManager];
    if (mgr.isReachableViaWiFi)     { // 在使用Wifi, 下载原图

    } else     { // 其他,下载小图

    }
 }

这时就会有iOS学习者开始抱怨:这不是很简单吗?于是三下五除二写完了一下代码.

// 利用MVC,在设置cell的模型属性时候,下载图片
- setItem:(CustomItem *)item
{
    _item = item;

    UIImage *placeholder = [UIImage imageNamed:@"placeholderImage"];

    AFNetworkReachabilityManager *mgr = [AFNetworkReachabilityManager sharedManager];
    if (mgr.isReachableViaWiFi) { // 在使用Wifi, 下载原图
        [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
    } else { // 其他,下载小图
        [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
    }
}

此时,确实能完成基本的按照当前网络状态下载对应的图片, 但是真实开发中,这样其实是不合理的.一下是需要注意的细节:
1.SDWebImage会自动帮助开发者缓存图片(包括内存缓存,沙盒缓存),所以我们需要设置用户在wifi环境下下载的高清图, 下次再蜂窝网络状态下打开应用也应显示高清图,而不是去下载缩略图.
2.许多应用设置模块带有一个功能:移动网络环境下仍然显示高清图,这个功能其实是将设置记录在沙盒中.
3.当用户处于离线状态时候,无法合理处理业务.

于是, 开始加以改进.为了让读者你更容易理解,我先贴出逻辑代码:

- setItem:(CustomItem *)item
{
    _item = item;

    if (缓存中有原图) 
    {
        self.imageView.image = 原图;
    } else 
    {
        if (Wifi环境) 
        {
            下载显示原图
        } else if (手机自带网络) 
        {
            if (3G\4G环境下仍然下载原图) 
            {
                下载显示原图
            } else 
            {
                下载显示小图
            }
        } else 
        {
            if (缓存中有小图) 
            {
                self.imageView.image = 小图;
            } else  // 处理离线状态
            {
                self.imageView.image = 占位图片;
            }
        }
    }
}

实现上面的逻辑代码:读者可以一一对应上面的逻辑代码.练习的时候推荐先写逻辑代码,再写真实代码
多多注意注释解释

- setItem:(CustomItem *)item
{
    _item = item;

     // 占位图片
    UIImage *placeholder = [UIImage imageNamed:@"placeholderImage"];

    // 从内存\沙盒缓存中获得原图,
    UIImage *originalImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.originalImage];
    if (originalImage) { // 如果内存\沙盒缓存有原图,那么就直接显示原图(不管现在是什么网络状态)
        self.imageView.image = originalImage;
    } else { // 内存\沙盒缓存没有原图
        AFNetworkReachabilityManager *mgr = [AFNetworkReachabilityManager sharedManager];
        if (mgr.isReachableViaWiFi) { // 在使用Wifi, 下载原图
            [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
        } else if (mgr.isReachableViaWWAN) { // 在使用手机自带网络
            //     用户的配置项假设利用NSUserDefaults存储到了沙盒中
            //    [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"alwaysDownloadOriginalImage"];
            //    [[NSUserDefaults standardUserDefaults] synchronize];
#warning 从沙盒中读取用户的配置项:在3G\4G环境是否仍然下载原图
            BOOL alwaysDownloadOriginalImage = [[NSUserDefaults standardUserDefaults] boolForKey:@"alwaysDownloadOriginalImage"];
            if (alwaysDownloadOriginalImage) { // 下载原图
                [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
            } else { // 下载小图
                [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
            }
        } else { // 没有网络
            UIImage *thumbnailImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.thumbnailImage];
            if (thumbnailImage) { // 内存\沙盒缓存中有小图
                self.imageView.image = thumbnailImage;
            } else { // 处理离线状态,而且有没有缓存时的情况
                self.imageView.image = placeholder;
            }
        }
    }
}

解决了吗? 真正的坑才刚刚开始.

在表述上述代码的坑之前, 我们先来分析一下UITableViewCell的缓存机制.

请看下图: 有一个tableView正在同时显示三个UITableViewCell, 每个tableviewCell包含一个imageView的子控件, 而且每个cell都有一个对应的模型属性用来设置ImageView的图片内容.
注意:由于没有cell被推出屏幕, 此时缓存池为空.


1353118-c86dd6b6ab05e229.png

当有一个cell呗推到屏幕之外时, 系统会自动将这个cell放入自动缓存池.注意:cell对应的UIImage图片数据模型并没有清空!还是指向上一个使用cell.

1353118-d0c90e08bb2416bd.png

当下一个cell进入屏幕, 系统会根据tableview注册的标识找到对应的cell,拿来应用.上述进入缓存池的cell被重新添加进tableview,在tableview的DataSource方法tableView: cellForRowAtIndexPath:中设置改cell对应的模型数据, 此时cell对应的如图:

1353118-008b06a22a88fa7f.png

以上就是tableview重用机制的简单介绍.

重新回来,那么上面所说的真正的坑在哪呢?

用一个场景来描述一下吧:当用户所处环境wifi网速不够快(不能立即将图片下载完毕), 而在上述代码, 在wifi环境下又是下载高清大图.所以需要一定的时间来完成下载,而就在此时, 用户不愿等, 想看看上次打开App时显示的图片,此时用户会滑到处于下面cell来查看.注意:此时,上面的cell下载图片操作并没有暂停, 还处于下载图片状态中. 当用户在查看上次打开App的显示图片时(上次打开App下载完成的图片,SDWebImage会帮我们缓存,不用下载), 而正好需要显示上次打开App时的图片的cell是利用tableview重用机制而从缓存池中拿出来的cell,等到处于上面的cell的高清大图已经下载好了的时候,SDWebimage默认做法是,立马把下载好的图片设置给ImageView, 所以我们这时候会在底下的显示的cell显示上面的图片, 造成数据错乱, 这是非常严重的BUG.

那么该如何解决这个棘手的问题呢?

如果我们能在cell被从缓存池中拿出来使用的时候,将这个cell放入缓存池之前的下载操作移除, 那么久不会出现数据错乱了.
这时候, 你可能会问我: 怎么移除下载操作? 下载操作不是SDWebimage帮我们做的么?
说的没错, 确实是SDWebimage帮我们下载图片的, 我们来扒一扒SDWebimage源码, 看看他是怎么完成的.

- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock {
    // 关闭当前图片的下载操作
    [self sd_cancelCurrentImageLoad];
    objc_setAssociatedObject(self, &imageURLKey, url, OBJC_ASSOCIATION_RETAIN_NONATOMIC);

    if (!(options & SDWebImageDelayPlaceholder)) {
        dispatch_main_async_safe(^{
            self.image = placeholder;
        });
    }

    if (url) {

        // check if activityView is enabled or not
        if ([self showActivityIndicatorView]) {
            [self addActivityIndicator];
        }

        __weak __typeof(self)wself = self;
        id <SDWebImageOperation> operation = [SDWebImageManager.sharedManager downloadImageWithURL:url options:options progress:progressBlock completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
            [wself removeActivityIndicator];
            if (!wself) return;
            dispatch_main_sync_safe(^{
                if (!wself) return;
                if (image && (options & SDWebImageAvoidAutoSetImage) && completedBlock)
                {
                    completedBlock(image, error, cacheType, url);
                    return;
                }
                else if (image) {
                    wself.image = image;
                    [wself setNeedsLayout];
                } else {
                    if ((options & SDWebImageDelayPlaceholder)) {
                        wself.image = placeholder;
                        [wself setNeedsLayout];
                    }
                }
                if (completedBlock && finished) {
                    completedBlock(image, error, cacheType, url);
                }
            });
        }];
        [self sd_setImageLoadOperation:operation forKey:@"UIImageViewImageLoad"];
    } else {
        dispatch_main_async_safe(^{
            [self removeActivityIndicator];
            if (completedBlock) {
                NSError *error = [NSError errorWithDomain:SDWebImageErrorDomain code:-1 userInfo:@{NSLocalizedDescriptionKey : @"Trying to load a nil url"}];
                completedBlock(nil, error, SDImageCacheTypeNone, url);
            }
        });
    }
}

我们惊奇的发现,原来SDWebimage在下载图片时, 第一件事就是关闭ImageView当前的下载操作!

是不是开始感叹SDWebimage多么神奇了? 没错, 我们只需要把我们写的那段代码所有的直接访问本地缓存代码利用SDwebimage进行设置就OK了!
下面就是完成版代码.

- setItem:(CustomItem *)item
{
    _item = item;

  // 占位图片
    UIImage *placeholder = [UIImage imageNamed:@"placeholderImage"];

    // 从内存\沙盒缓存中获得原图
    UIImage *originalImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.originalImage];
    if (originalImage) { // 如果内存\沙盒缓存有原图,那么就直接显示原图(不管现在是什么网络状态)
        [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
    } else { // 内存\沙盒缓存没有原图
        AFNetworkReachabilityManager *mgr = [AFNetworkReachabilityManager sharedManager];
        if (mgr.isReachableViaWiFi) { // 在使用Wifi, 下载原图
            [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
        } else if (mgr.isReachableViaWWAN) { // 在使用手机自带网络
            //     用户的配置项假设利用NSUserDefaults存储到了沙盒中
            //    [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"alwaysDownloadOriginalImage"];
            //    [[NSUserDefaults standardUserDefaults] synchronize];
#warning 从沙盒中读取用户的配置项:在3G\4G环境是否仍然下载原图
            BOOL alwaysDownloadOriginalImage = [[NSUserDefaults standardUserDefaults] boolForKey:@"alwaysDownloadOriginalImage"];
            if (alwaysDownloadOriginalImage) { // 下载原图
                [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.originalImage] placeholderImage:placeholder];
            } else { // 下载小图
                [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
            }
        } else { // 没有网络
            UIImage *thumbnailImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.thumbnailImage];
            if (thumbnailImage) { // 内存\沙盒缓存中有小图
                [self.imageView sd_setImageWithURL:[NSURL URLWithString:item.thumbnailImage] placeholderImage:placeholder];
            } else {
                [self.imageView sd_setImageWithURL:nil placeholderImage:placeholder];
            }
        }
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,858评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,372评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,282评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,842评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,857评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,679评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,406评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,311评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,767评论 1 315
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,945评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,090评论 1 350
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,785评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,420评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,988评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,101评论 1 271
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,298评论 3 372
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,033评论 2 355

推荐阅读更多精彩内容

  • 发现 关注 消息 iOS 第三方库、插件、知名博客总结 作者大灰狼的小绵羊哥哥关注 2017.06.26 09:4...
    肇东周阅读 12,105评论 4 62
  • SDWebImage托管在github上。https://github.com/rs/SDWebImage 这个类...
    XLsn0w阅读 715评论 0 0
  • 有榜单在问七夕送女朋友什么礼物比较合适,200块以内的。 点赞最多的,是这样一条评论:送她一个自由就好了。 朋友说...
    海边的椰子阅读 571评论 0 1
  • 六大心理咨询实操课 融到了生活每一个细节,咨询师的情操是这样培育出来的! 所有照片来自海马爸爸心理六大技术的工作坊...
    企鹅妈妈阅读 280评论 0 0
  • 第一年北漂 离家好几千公里,还没有适应大城市颠沛的生活节奏。今天是月饼节,传说中的万人空巷成了真的空巷,怀揣着奇妙...
    帅气渣男阅读 312评论 0 2