SDWebImage的一些使用功能

使用場景:自定義的UITableViewCell上有圖片需要顯示, 要求網(wǎng)絡狀態(tài)為WIFI時, 顯示圖片高清圖; 網(wǎng)絡狀態(tài)為蜂窩移動網(wǎng)絡時, 顯示圖片縮略圖.如下圖樣例:



由于要監(jiān)聽網(wǎng)絡狀態(tài), 在這里筆者推薦使用AFNetWorking
1.在GitHub或者利用cocoa pods給項目導入第三方框架AFNetWorking.
2.在AppDelegate.m文件中的application:didFinishLaunchingWithOptions:方法中監(jiān)聽網(wǎng)絡狀態(tài)

// AppDelegate.m 文件中

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{
    // 監(jiān)控網(wǎng)絡狀態(tài)
    [[AFNetworkReachabilityManager sharedManager] startMonitoring];
}

// 以下代碼在需要監(jiān)聽網(wǎng)絡狀態(tài)的方法中使用
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];
    }
}

此時,確實能完成基本的按照當前網(wǎng)絡狀態(tài)下載對應的圖片, 但是真實開發(fā)中,這樣其實是不合理的.一下是需要注意的細節(jié):
1.SDWebImage會自動幫助開發(fā)者緩存圖片(包括內存緩存,沙盒緩存),所以我們需要設置用戶在wifi環(huán)境下下載的高清圖, 下次再蜂窩網(wǎng)絡狀態(tài)下打開應用也應顯示高清圖,而不是去下載縮略圖.
2.許多應用設置模塊帶有一個功能:移動網(wǎng)絡環(huán)境下仍然顯示高清圖,這個功能其實是將設置記錄在沙盒中.
3.當用戶處于離線狀態(tài)時候,無法合理處理業(yè)務.

于是, 開始加以改進.為了讓讀者你更容易理解,我先貼出邏輯代碼:

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

    if (緩存中有原圖) 
    {
        self.imageView.image = 原圖;
    } else 
    {
        if (Wifi環(huán)境) 
        {
            下載顯示原圖
        } else if (手機自帶網(wǎng)絡) 
        {
            if (3G\4G環(huán)境下仍然下載原圖) 
            {
                下載顯示原圖
            } else 
            {
                下載顯示小圖
            }
        } else 
        {
            if (緩存中有小圖) 
            {
                self.imageView.image = 小圖;
            } else  // 處理離線狀態(tài)
            {
                self.imageView.image = 占位圖片;
            }
        }
    }
}

實現(xiàn)上面的邏輯代碼:讀者可以一一對應上面的邏輯代碼.練習的時候推薦先寫邏輯代碼,再寫真實代碼
多多注意注釋解釋

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

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

    // 從內存\沙盒緩存中獲得原圖，
    UIImage *originalImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.originalImage];
    if (originalImage) { // 如果內存\沙盒緩存有原圖，那么就直接顯示原圖（不管現(xiàn)在是什么網(wǎng)絡狀態(tài)）
        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) { // 在使用手機自帶網(wǎng)絡
            //     用戶的配置項假設利用NSUserDefaults存儲到了沙盒中
            //    [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"alwaysDownloadOriginalImage"];
            //    [[NSUserDefaults standardUserDefaults] synchronize];
#warning 從沙盒中讀取用戶的配置項：在3G\4G環(huán)境是否仍然下載原圖
            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 { // 沒有網(wǎng)絡
            UIImage *thumbnailImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.thumbnailImage];
            if (thumbnailImage) { // 內存\沙盒緩存中有小圖
                self.imageView.image = thumbnailImage;
            } else { // 處理離線狀態(tài)，而且有沒有緩存時的情況
                self.imageView.image = placeholder;
            }
        }
    }
}

解決了嗎? 真正的坑才剛剛開始.

在表述上述代碼的坑之前, 我們先來分析一下UITableViewCell的緩存機制.

請看下圖: 有一個tableView正在同時顯示三個UITableViewCell, 每個tableviewCell包含一個imageView的子控件, 而且每個cell都有一個對應的模型屬性用來設置ImageView的圖片內容.
注意:由于沒有cell被推出屏幕, 此時緩存池為空.


1353118-c86dd6b6ab05e229.png

當有一個cell唄推到屏幕之外時, 系統(tǒng)會自動將這個cell放入自動緩存池.注意:cell對應的UIImage圖片數(shù)據(jù)模型并沒有清空!還是指向上一個使用cell.

1353118-d0c90e08bb2416bd.png

當下一個cell進入屏幕, 系統(tǒng)會根據(jù)tableview注冊的標識找到對應的cell,拿來應用.上述進入緩存池的cell被重新添加進tableview,在tableview的DataSource方法tableView: cellForRowAtIndexPath:中設置改cell對應的模型數(shù)據(jù), 此時cell對應的如圖:

1353118-008b06a22a88fa7f.png

以上就是tableview重用機制的簡單介紹.

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

用一個場景來描述一下吧:當用戶所處環(huán)境wifi網(wǎng)速不夠快(不能立即將圖片下載完畢), 而在上述代碼, 在wifi環(huán)境下又是下載高清大圖.所以需要一定的時間來完成下載,而就在此時, 用戶不愿等, 想看看上次打開App時顯示的圖片,此時用戶會滑到處于下面cell來查看.注意:此時,上面的cell下載圖片操作并沒有暫停, 還處于下載圖片狀態(tài)中. 當用戶在查看上次打開App的顯示圖片時(上次打開App下載完成的圖片,SDWebImage會幫我們緩存,不用下載), 而正好需要顯示上次打開App時的圖片的cell是利用tableview重用機制而從緩存池中拿出來的cell,等到處于上面的cell的高清大圖已經(jīng)下載好了的時候,SDWebimage默認做法是,立馬把下載好的圖片設置給ImageView, 所以我們這時候會在底下的顯示的cell顯示上面的圖片, 造成數(shù)據(jù)錯亂, 這是非常嚴重的BUG.

那么該如何解決這個棘手的問題呢?

如果我們能在cell被從緩存池中拿出來使用的時候,將這個cell放入緩存池之前的下載操作移除, 那么久不會出現(xiàn)數(shù)據(jù)錯亂了.
這時候, 你可能會問我: 怎么移除下載操作? 下載操作不是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);
            }
        });
    }
}

我們驚奇的發(fā)現(xiàn),原來SDWebimage在下載圖片時, 第一件事就是關閉ImageView當前的下載操作!

是不是開始感嘆SDWebimage多么神奇了? 沒錯, 我們只需要把我們寫的那段代碼所有的直接訪問本地緩存代碼利用SDwebimage進行設置就OK了!
下面就是完成版代碼.

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

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

    // 從內存\沙盒緩存中獲得原圖
    UIImage *originalImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:item.originalImage];
    if (originalImage) { // 如果內存\沙盒緩存有原圖，那么就直接顯示原圖（不管現(xiàn)在是什么網(wǎng)絡狀態(tài)）
        [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) { // 在使用手機自帶網(wǎng)絡
            //     用戶的配置項假設利用NSUserDefaults存儲到了沙盒中
            //    [[NSUserDefaults standardUserDefaults] setBool:NO forKey:@"alwaysDownloadOriginalImage"];
            //    [[NSUserDefaults standardUserDefaults] synchronize];
#warning 從沙盒中讀取用戶的配置項：在3G\4G環(huán)境是否仍然下載原圖
            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 { // 沒有網(wǎng)絡
            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];
            }
        }
    }
}
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 發(fā)現(xiàn) 關注 消息 iOS 第三方庫、插件、知名博客總結 作者大灰狼的小綿羊哥哥關注 2017.06.26 09:4...
    肇東周閱讀 15,060評論 4贊 61
  • SDWebImage托管在github上。https://github.com/rs/SDWebImage 這個類...
    XLsn0w閱讀 798評論 0贊 0
  • 有榜單在問七夕送女朋友什么禮物比較合適，200塊以內的。 點贊最多的，是這樣一條評論：送她一個自由就好了。 朋友說...
    海邊的椰子閱讀 602評論 0贊 1
  • 六大心理咨詢實操課 融到了生活每一個細節(jié)，咨詢師的情操是這樣培育出來的！ 所有照片來自海馬爸爸心理六大技術的工作坊...
    企鵝媽媽閱讀 304評論 0贊 0
  • 第一年北漂 離家好幾千公里，還沒有適應大城市顛沛的生活節(jié)奏。今天是月餅節(jié)，傳說中的萬人空巷成了真的空巷，懷揣著奇妙...
    帥氣渣男閱讀 361評論 0贊 2

友情鏈接更多精彩內容