IOS-SDWebImage根據網路狀態載入圖片

標籤：

iOS開發-你真的會用SDWebImage？ 2016-05-17 hosea_zhou 有意思啊

原創hosea_zhou

原文地址：
http://www.jianshu.com/p/dabc0c6d083e

猿吧 - 資源共用論壇:

http://www.coderbar.cn

最近論壇裡有最新的視頻資料哦!

SDWebImage作為目前最受歡迎的圖片下載第三方架構，使用率很高。但是你真的會用嗎？本文接下來將通過例子分析如何合理使用SDWebImage。

使用情境：自訂的UITableViewCell上有圖片需要顯示，要求網路狀態為WiFi時，顯示圖片高清圖；網路狀態為蜂窩移動網路時，顯示圖片縮圖。如範例：

圖中顯示的圖片符合根據網路狀態下載要求

由於要監聽網路狀態，在這裡筆者推薦使用AFNetWorking。

1. 在GitHub或者利用cocoaPod給項目匯入第三方架構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. iOS本機資料存取，看這裡就夠了

4. 當使用者處於離線狀態時候，無法合理處理業務。

 

• 於是，開始加以改進。為了讓讀者你更容易理解，我先貼出虛擬碼：

- 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被推出螢幕，此時緩衝池為空白。

cell還沒有被推入緩衝池

• 當有一個cell被推到螢幕之外時，系統會自動將這個cell放入自動緩衝池。注意:cell對應的UIImage圖片資料模型並沒有清空！還是指向上一個使用的cell。

cell被放入緩衝池

• 當下一個cell進入螢幕，系統會根據tableView註冊的標識找到對應的cell，拿來應用。上述進入緩衝池的cell被重新添加進tableView，在tableView的Data Source方法tableView: cellForRowAtIndexPath:中設定改cell對應的模型資料，此時cell對應的

cell被放入緩衝池

• 以上就是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];

            }

        }

    }

}

 

本文就介紹到這裡，如有疑問或錯誤，歡迎指出。喜歡就點個關注吧。

IOS-SDWebImage根據網路狀態載入圖片