iOS開發-你真的會用SDWebImage？

iOS開發-你真的會用SDWebImage？
SDWebImage作為目前最受歡迎的圖片下載第三方架構，使用率很高。但是你真的會用嗎？本文接下來將通過例子分析如何合理使用SDWebImage。使用情境：自訂的UITableViewCell上有圖片需要顯示，要求網路網路狀態為WiFi時，顯示圖片高清圖；網路狀態為蜂窩移動網路時，顯示圖片縮圖。如範例：

由於要監聽網路狀態，在這裡筆者推薦使用AFNetWorking。
在GitHub或者利用cocoaPod給項目匯入第三方架構AFNetWorking。在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];    }}

此時，確實能完成基本的按照當前網路狀態下載對應的圖片，但是真實開發中，這樣其實是不合理的。以下是需要注意的細節：

SDWebImage會自動協助開發中緩衝圖片（包括記憶體緩衝，沙箱緩衝），所以我們需要設定使用者在 WiFi環境下下載的 高清圖，下次在 蜂窩網路狀態下開啟應用也應顯示 高清圖，而不是去下載縮圖。許多應用設定模組帶有一個功能： 移動網路環境下仍然顯示高清圖。這個功能其實是將設定記錄在沙箱中，關於資料儲存到本地，可以查看本人另一篇簡書首頁文章
iOS本機資料存取，看這裡就夠了當使用者處於離線狀態時候，無法合理處理業務。

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

- 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對應的UIImage圖片資料模型並沒有清空！還是指向上一個使用的cell。

當下一個cell進入螢幕，系統會根據tableView註冊的標識找到對應的cell，拿來應用。上述進入緩衝池的cell被重新添加進tableView，在tableView的Data Source方法tableView: cellForRowAtIndexPath:中設定改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  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];            }        }    }}

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