iOS網路開發（6）網狀圖片載入開源架構SDWebImage

標籤：ios   app   xcode   網路編程   緩衝   sdwebimage   

SDWebImage是一個第三方架構，用以實現網狀圖像的緩衝，及處理等功能。

    Github的託管： https://github.com/rs/SDWebImage

SDWebImage預設使用磁碟緩衝，

     在 沙箱/Library/Cache中可以找到帶WebImageCache字眼的目錄，可以找到緩衝的圖片

SDWebImage以分類的形式，對UIKit中的控制項擴充了網狀圖片載入介面，使用起來非常方便。

介紹SDWebImage中的幾個分類：

    UIImageView載入網狀圖片

    UIButton載入網狀圖片

    UIImage顯示GIF圖片

並介紹圖片下載進度的監聽，以及架構內實現流程的簡要說明

• UIImageView+WebCache分類

提供了大量的方法，從網路中載入圖片，而且這些操作全部是非同步

- (void)sd_setImageWithURL:(NSURL *)url- (void)sd_setImageWithURL:(NSURL *)url completed:(SDWebImageCompletionBlock)completedBlock

部分方法還提供了佔位圖片的操作

- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder completed:(SDWebImageCompletionBlock)completedBlock

部分方法還提供了額外選項用於指定緩衝的策略

- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options completed:(SDWebImageCompletionBlock)completedBlock

如：

    650) this.width=650;" src="http://s2.51cto.com/wyfs02/M00/7C/B3/wKioL1bWkGyghYH5AAGsIiQrXpI720.png" title="螢幕快照 2016-03-02 下午3.01.43.png" width="650" height="272" border="0" hspace="0" vspace="0" style="width:650px;height:272px;" alt="wKioL1bWkGyghYH5AAGsIiQrXpI720.png" />

• UIButton+WebCache分類

與UIImageView+WebCache類似，不過UIButton上可以顯示兩個圖片

背景圖片的載入

- (void)sd_setBackgroundImageWithURL:(NSURL *)url forState:(UIControlState)state- (void)sd_setBackgroundImageWithURL:(NSURL *)url forState:(UIControlState)state completed:(SDWebImageCompletionBlock)completedBlock- (void)sd_setBackgroundImageWithURL:(NSURL *)url forState:(UIControlState)state placeholderImage:(UIImage *)placeholder- (void)sd_setBackgroundImageWithURL:(NSURL *)url forState:(UIControlState)state placeholderImage:(UIImage *)placeholder completed:(SDWebImageCompletionBlock)completedBlock- (void)sd_setBackgroundImageWithURL:(NSURL *)url forState:(UIControlState)state placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options- (void)sd_setBackgroundImageWithURL:(NSURL *)url forState:(UIControlState)state placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options completed:(SDWebImageCompletionBlock)completedBlock

圖片的載入

- (void)sd_setImageWithURL:(NSURL *)url forState:(UIControlState)state- (void)sd_setImageWithURL:(NSURL *)url forState:(UIControlState)statecompleted:(SDWebImageCompletionBlock)completedBlock- (void)sd_setImageWithURL:(NSURL *)url forState:(UIControlState)stateplaceholderImage:(UIImage *)placeholder- (void)sd_setImageWithURL:(NSURL *)url forState:(UIControlState)stateplaceholderImage:(UIImage *)placeholder completed:(SDWebImageCompletionBlock)completedBlock- (void)sd_setImageWithURL:(NSURL *)url forState:(UIControlState)stateplaceholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options- (void)sd_setImageWithURL:(NSURL *)url forState:(UIControlState)stateplaceholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options completed:(SDWebImageCompletionBlock)completedBlock

• UIImage+GIF分類，用於載入gif圖片

這個分類提供了建立GIF圖片對象的方法

+ (UIImage *)sd_animatedGIFNamed:(NSString *)name+ (UIImage *)sd_animatedGIFWithData:(NSData *)data

      有興趣的朋友，可以在架構中看看這兩個方法的實現代碼   

• 圖片下載進度的監聽

很多App中，圖片載入時會有一個載入的進度條，UIImageView同樣提供了方法可以連續獲得圖片的下載進度：

- (void)sd_setImageWithURL:(NSURL *)url placeholderImage:(UIImage *)placeholder options:(SDWebImageOptions)options progress:(SDWebImageDownloaderProgressBlock)progressBlock completed:(SDWebImageCompletionBlock)completedBlock

 如：

    650) this.width=650;" src="http://s5.51cto.com/wyfs02/M01/7C/B4/wKioL1bWkmfhs2USAAFfZ_IzU-E627.png" title="螢幕快照 2016-03-02 下午3.10.38.png" width="649" height="170" border="0" hspace="0" vspace="0" style="width:649px;height:170px;" alt="wKioL1bWkmfhs2USAAFfZ_IzU-E627.png" />

• SDWebImage的原理分析

SDWebImage支援非同步圖片下載+緩衝，載入圖片的基本流程：

1. 顯示placeholderImage，SDWebImageManager根據URL開始處理圖片

2. 從記憶體緩衝中尋找圖片是否已被下載，如果找到，則回調顯示圖片

3. 如果沒有，則在子線程中尋找磁碟緩衝，，如果找到，則回調顯示圖片

4. 如果沒有，則開始從URL中下載圖片（使用一個SDWebImageDownloader下載器對象）

5. 通過代理方式，得到圖片下載資料後，進行圖片解碼後，回調顯示圖片

6. 將圖片儲存到SDImageCache中，記憶體緩衝和磁碟緩衝同時儲存，寫入磁碟的操作也將在子線程中執行

SDImageCache在初始化時會註冊一些訊息通知

     在記憶體警告或退到後台時清理記憶體緩衝，

     在程式退出時清理到期圖片

圖片解碼的目的（以空間換時間）

     UIImage的imageWithData:每次都會將Data解壓成映像，即每次顯示時都會有一個解壓操作

     SDWebImageDecoder是先將data資源解壓畫在一張圖片上，顯示時不再需要解壓

本文出自 “安萌” 部落格，請務必保留此出處http://annmeng.blog.51cto.com/3321237/1746756

iOS網路開發（6）網狀圖片載入開源架構SDWebImage