YYWebImage 是一個異步圖片加載框架 (YYKit 組件之一).
其設計目的是試圖替代 SDWebImage、PINRemoteImage、FLAnimatedImage 等開源框架，它支持這些開源框架的大部分功能，同時增加了大量新特性、並且有不小的性能提升。
它底層用 YYCache 實現了內存和磁盤緩存, 用 YYImage 實現了 WebP/APNG/GIF 動圖的解碼和播放。
你可以查看這些項目以獲得更多信息。
特性
- 異步的圖片加載，支持 HTTP 和本地文件。
- 支持 WebP、APNG、GIF 動畫。
- 支持逐行掃描、隔行掃描、漸進式圖像加載。
- UIImageView、UIButton、MKAnnotationView、CALayer 的 Category 方法支持。
- 常見圖片處理：模糊、圓角、大小調整、裁切、旋轉、色調等。
- 高性能的內存和磁盤緩存。
- 高性能的圖片設置方式，以避免主線程阻塞。
- 每個類和方法都有完善的文檔註釋。
用法
從 URL 加載圖片
1 |
<span style="font-size: medium;">// 加載網絡圖片 |
2 |
imageView.yy_imageURL = [NSURL URLWithString:@"http://github.com/logo.png"]; |
5 |
imageView.yy_imageURL = [NSURL fileURLWithPath:@"/tmp/logo.png"];</span> |
加載動圖
1 |
<span style="font-size: medium;">// 只需要把 `UIImageView` 替換爲 `YYAnimatedImageView` 即可。 |
2 |
UIImageView *imageView = [YYAnimatedImageView new]; |
3 |
imageView.yy_imageURL = [NSURL URLWithString:@"http://github.com/ani.webp"];</span> |
漸進式圖片加載
1 |
<span style="font-size: medium;">// 漸進式：邊下載邊顯示 |
2 |
[imageView yy_setImageWithURL:url options:YYWebImageOptionProgressive]; |
4 |
// 漸進式加載，增加模糊效果和漸變動畫 （見本頁最上方的GIF演示） |
5 |
[imageView yy_setImageWithURL:url options:YYWebImageOptionProgressiveBlur ｜ YYWebImageOptionSetImageWithFadeAnimation];</span> |
加載、處理圖片
1 |
<span style="font-size: medium;">// 1. 下載圖片 |
4 |
// 4. 顯示圖片時增加一個淡入動畫，以獲得更好的用戶體驗 |
6 |
[imageView yy_setImageWithURL:url |
8 |
options:YYWebImageOptionSetImageWithFadeAnimation |
9 |
progress:^(NSInteger receivedSize, NSInteger expectedSize) { |
10 |
progress = (float)receivedSize / expectedSize; |
12 |
transform:^UIImage *(UIImage *image, NSURL *url) { |
13 |
image = [image yy_imageByResizeToSize:CGSizeMake(100, 100) contentMode:UIViewContentModeCenter]; |
14 |
return [image yy_imageByRoundCornerRadius:10]; |
16 |
completion:^(UIImage *image, NSURL *url, YYWebImageFromType from, YYWebImageStage stage, NSError *error) { |
17 |
if (from == YYWebImageFromDiskCache) { |
18 |
NSLog(@"load from disk cache"); |
安裝
Cocoapods
- 將 cocoapods 更新至最新版本.
- 在 Podfile 中添加pod "YYWebImage"。
- 執行pod install或pod update。
- 導入 <YYWebImage/YYWebImage.h>。
Carthage
- 在 Cartfile 中添加github "ibireme/YYWebImage"。
- 執行carthage update --platform ios並將生成的 framework 添加到你的工程。
- 導入 <YYWebImage/YYWebImage.h>。
- 注意: carthage framework 並沒有包含 webp 組件。如果你需要支持 webp，可以用 Cocoapods 安裝，或者手動安裝。
手動安裝
- 下載 YYWebImage 文件夾內的所有內容。
- 將 YYWebModel 內的源文件添加(拖放)到你的工程。
- 鏈接以下 frameworks:如果你需要支持 webp，可以將Vendor/WebP.framework(靜態庫) 加入你的工程。
- UIKit.framework
- CoreFoundation.framework
- QuartzCore.framework
- AssetsLibrary.framework
- ImageIO.framework
- Accelerate.framework
- MobileCoreServices.framework
- libsqlite3
- libz
-
- 導入YYWebImage.h。
------------------------------------------------------------------------------------------------------------------------------
YYWebImage的基本用法
1.框架集成
* github地址 : https://github.com/ibireme/YYWebImage
* CocoaPods集成 : `pod 'YYWebImage'`
2.準備工作
* 導入主頭文件 `#import <YYWebImage.h>`
* 準備控件
* 展示靜態圖 `@property (weak, nonatomic) IBOutlet UIImageView *imgView;`
* 展示GIF/靜態圖 `@property (weak, nonatomic) IBOutlet YYAnimatedImageView *imgView;`
3.特點
* 異步的圖片加載，支持 HTTP 和本地文件。
* 支持 GIF、APNG、WebP 動畫（動態緩存，低內存佔用）。
* 支持逐行掃描、隔行掃描、漸進式圖像加載。
* UIImageView、UIButton、MKAnnotationView、CALayer 的 Category 方法支持。
* 常見圖片處理：模糊、圓角、大小調整、裁切、旋轉、色調等。
* 高性能的內存和磁盤緩存。
* 高性能的圖片設置方式，以避免主線程阻塞。
* 每個類和方法都有完善的文檔註釋。
4.緩存相關
- (void)cache {
// 獲取緩存管理類
YYImageCache *cache = [YYWebImageManager sharedManager].cache;
// 獲取內存緩存大小
NSInteger memCost = cache.memoryCache.totalCost/1024;
// 獲取內存緩存個數
NSInteger memCount = cache.memoryCache.totalCount;
// 獲取磁盤緩存大小
NSInteger diskCost = cache.diskCache.totalCost/1024;
// 獲取磁盤緩存個數
NSInteger diskCount = cache.diskCache.totalCount;
// 清空緩存內存緩存
[cache.memoryCache removeAllObjects];
// 清空磁盤緩存
[cache.diskCache removeAllObjects];
// 清空磁盤緩存，帶進度回調
[cache.diskCache removeAllObjectsWithProgressBlock:^(int removedCount, int totalCount) {
// progress
} endBlock:^(BOOL error) {
// end
}];
}
5.加載、處理圖片
- 下載圖片
- 獲得圖片下載進度
- 調整圖片大小
- 顯示圖片時增加一個淡入動畫，以獲得更好的用戶體驗
- (void)loadImageAndHandle {
NSURL *URL = [NSURL URLWithString:@"http://img.taopic.com/uploads/allimg/130815/235089-130Q513004496.jpg"];
[self.imgView yy_setImageWithURL:URL placeholder:nil options:YYWebImageOptionSetImageWithFadeAnimation progress:^(NSInteger receivedSize, NSInteger expectedSize) {
// 計算進度
float progress = (float)receivedSize/expectedSize;
NSLog(@"%f",progress);
} transform:^UIImage * _Nullable(UIImage * _Nonnull image, NSURL * _Nonnull url) {
// 可以額外處理圖片在返回 : 截取中心點周圍100x100的範圍
// return [image yy_imageByResizeToSize:CGSizeMake(100, 100) contentMode:UIViewContentModeCenter];
// 返回原始圖片
return image;
} completion:^(UIImage * _Nullable image, NSURL * _Nonnull url, YYWebImageFromType from, YYWebImageStage stage, NSError * _Nullable error) {
// 測試 : 是否是從磁盤加載的
if (from == YYWebImageFromDiskCache) {
NSLog(@"load from disk cache");
}
}];
}
6.漸進式下載
- (void)loadProgressive {
NSURL *URL;
URL = [NSURL URLWithString:@"http://img.taopic.com/uploads/allimg/110721/8114-110H109430691.jpg"];
// 漸進式 : 邊下載邊顯示
// [self.imgView yy_setImageWithURL:URL options:YYWebImageOptionProgressive];
URL = [NSURL URLWithString:@"http://pic11.nipic.com/20101125/5592256_172526068815_2.jpg"];
// 漸進式 : 增加模糊效果和漸變動畫
[self.imgView yy_setImageWithURL:URL options:YYWebImageOptionProgressiveBlur | YYWebImageOptionSetImageWithFadeAnimation];
}
7.加載動圖
- 展示動圖的自定義控件
YYAnimatedImageView
- (void)loadGIF {
NSURL *URL = [NSURL URLWithString:@"http://image.nihaowang.com/news/2015-04-27/c30f866d-9300-4f6e-86f6-58f408630e14.gif"];
self.imgView.yy_imageURL = URL;
}
8.普通用法,最常用的
@property (weak, nonatomic) YYAnimatedImageView *imageView;
- (void)loadImageNormal {
NSURL *URL = [NSURL URLWithString:@"http://img01.taopic.com/150509/318761-15050ZP24418.jpg"];
// 可以設置佔位圖
[self.imgView yy_setImageWithURL:URL placeholder:nil];
// 不可以設置佔位圖
// self.imgView.yy_imageURL = URL;
}
