YYWebImage——异步图片加载框架

前言

在项目源码的 YYWebImageOperation.m 第 377 行:

 // request image from web
 // ...
 _connection = [[NSURLConnection alloc] initWithRequest:_request delegate:[_YYWebImageWeakProxy proxyWithTarget:self]];

该框架在加载网络图片时,请求网络使用的类仍然是:NSURLConnection

而在 Apple 的 NSURLConnection.h 头文件中早已明确声明此类不应该再使用了。

/*** DEPRECATED: The NSURLConnection class should no longer be used.  NSURLSession is the replacement for NSURLConnection ***/

NSURLSession 是 iOS 7 引入的特性。

因此,在项目还未更新到使用 NSURLSession 之前,不建议在项目生产环境下使用该库(考虑到后期迁移成本太高)。

README 文档

progressive 渐进式加载

YYWebImage 是一个异步图片加载框架 (YYKit 组件之一).

其设计目的是试图替代 SDWebImage、PINRemoteImage、FLAnimatedImage 等开源框架,它支持这些开源框架的大部分功能,同时增加了大量新特性、并且有不小的性能提升。

它底层用 YYCache 实现了内存和磁盘缓存, 用 YYImage 实现了 WebP/APNG/GIF 动图的解码和播放。
你可以查看这些项目以获得更多信息。

特性

  • 异步的图片加载,支持 HTTP 和本地文件。
  • 支持 GIF、APNG、WebP 动画(动态缓存,低内存占用)。
  • 支持逐行扫描、隔行扫描、渐进式图像加载。
  • UIImageView、UIButton、MKAnnotationView、CALayer 的 Category 方法支持。
  • 常见图片处理:模糊、圆角、大小调整、裁切、旋转、色调等。
  • 高性能的内存和磁盘缓存。
  • 高性能的图片设置方式,以避免主线程阻塞。
  • 每个类和方法都有完善的文档注释。

用法

从 URL 加载图片

// 加载网络图片
imageView.yy_imageURL = [NSURL URLWithString:@"http://github.com/logo.png"];
    
// 加载本地图片
imageView.yy_imageURL = [NSURL fileURLWithPath:@"/tmp/logo.png"];

从 URL 加载图片的方法

- (void)yy_setImageWithURL:(nullable NSURL *)imageURL 
               placeholder:(nullable UIImage *)placeholder;

- (void)yy_setImageWithURL:(nullable NSURL *)imageURL 
                   options:(YYWebImageOptions)options;

- (void)yy_setImageWithURL:(nullable NSURL *)imageURL
               placeholder:(nullable UIImage *)placeholder
                   options:(YYWebImageOptions)options
                completion:(nullable YYWebImageCompletionBlock)completion;

- (void)yy_setImageWithURL:(nullable NSURL *)imageURL
               placeholder:(nullable UIImage *)placeholder
                   options:(YYWebImageOptions)options
                  progress:(nullable YYWebImageProgressBlock)progress
                 transform:(nullable YYWebImageTransformBlock)transform
                completion:(nullable YYWebImageCompletionBlock)completion;

- (void)yy_setImageWithURL:(nullable NSURL *)imageURL
               placeholder:(nullable UIImage *)placeholder
                   options:(YYWebImageOptions)options
                   manager:(nullable YYWebImageManager *)manager
                  progress:(nullable YYWebImageProgressBlock)progress
                 transform:(nullable YYWebImageTransformBlock)transform
                completion:(nullable YYWebImageCompletionBlock)completion;

// highlightedImage
- (void)yy_setHighlightedImageWithURL:(nullable NSURL *)imageURL 
                          placeholder:(nullable UIImage *)placeholder;

- (void)yy_setHighlightedImageWithURL:(nullable NSURL *)imageURL 
                              options:(YYWebImageOptions)options;

- (void)yy_setHighlightedImageWithURL:(nullable NSURL *)imageURL
                          placeholder:(nullable UIImage *)placeholder
                              options:(YYWebImageOptions)options
                           completion:(nullable YYWebImageCompletionBlock)completion;

- (void)yy_setHighlightedImageWithURL:(nullable NSURL *)imageURL
                          placeholder:(nullable UIImage *)placeholder
                              options:(YYWebImageOptions)options
                             progress:(nullable YYWebImageProgressBlock)progress
                            transform:(nullable YYWebImageTransformBlock)transform
                           completion:(nullable YYWebImageCompletionBlock)completion;

- (void)yy_setHighlightedImageWithURL:(nullable NSURL *)imageURL
                          placeholder:(nullable UIImage *)placeholder
                              options:(YYWebImageOptions)options
                              manager:(nullable YYWebImageManager *)manager
                             progress:(nullable YYWebImageProgressBlock)progress
                            transform:(nullable YYWebImageTransformBlock)transform
                           completion:(nullable YYWebImageCompletionBlock)completion;

YYWebImageOptions - 控制图片操作的选项

/// 控制图像操作的选项.
typedef NS_OPTIONS(NSUInteger, YYWebImageOptions) {
    
    /// 下载图像时在状态栏上显示网络活动指示器。
    YYWebImageOptionShowNetworkActivity = 1 << 0,
    
    /// 在下载期间显示渐进/隔行扫描/基线图像(与Web浏览器相同)。
    /// progressive/interlaced/baseline
    YYWebImageOptionProgressive = 1 << 1,
    
    /// 在下载过程中显示模糊的逐行JPEG或隔行扫描PNG图像。
    /// 这将忽略基线图像以获得更好的用户体验。
    YYWebImageOptionProgressiveBlur = 1 << 2,
    
    /// 使用 NSURLCache 而不是 YYImageCache
    YYWebImageOptionUseNSURLCache = 1 << 3,
    
    /// 允许不可信的 SSL 证书。
    YYWebImageOptionAllowInvalidSSLCertificates = 1 << 4,
    
    /// 允许应用程序处于后台状态时在后台下载图像。
    YYWebImageOptionAllowBackgroundTask = 1 << 5,
    
    /// 处理存储在 NSHTTPCookieStore 中的 Cookie。
    YYWebImageOptionHandleCookies = 1 << 6,
    
    /// 从远程加载映像并刷新映像缓存。
    YYWebImageOptionRefreshImageCache = 1 << 7,
    
    /// 不要将图像从磁盘中加载,或缓存到磁盘。
    YYWebImageOptionIgnoreDiskCache = 1 << 8,
    
    /// 在设置新的 URL 之前,不要更改视图的图像。
    YYWebImageOptionIgnorePlaceHolder = 1 << 9,
    
    /// 忽略图像解码。
    /// This may used for image downloading without display.
    YYWebImageOptionIgnoreImageDecoding = 1 << 10,
    
    /// 忽略多帧图像解码。
    /// This will handle the GIF/APNG/WebP/ICO image as single frame image.
    YYWebImageOptionIgnoreAnimatedImage = 1 << 11,
    
    /// 使用淡入淡出动画设置图像。
    /// This will add a "fade" animation on image view's layer for better user experience.
    YYWebImageOptionSetImageWithFadeAnimation = 1 << 12,
    
    /// 图像提取完成时,请勿将图像设置为视图。
    /// You may set the image manually.
    YYWebImageOptionAvoidSetImage = 1 << 13,
    
    /// 当 URL 无法下载时,此标志将 URL 添加到黑名单(内存中)
    /// 这样系统就不会无限尝试下载
    YYWebImageOptionIgnoreFailedURL = 1 << 14,
};

加载动图

// 只需要把 `UIImageView` 替换为 `YYAnimatedImageView` 即可。
UIImageView *imageView = [YYAnimatedImageView new];
imageView.yy_imageURL = [NSURL URLWithString:@"http://github.com/ani.webp"];

渐进式图片加载

// 渐进式:边下载边显示
[imageView yy_setImageWithURL:url options:YYWebImageOptionProgressive];
    
// 渐进式加载,增加模糊效果和渐变动画 (见本页最上方的GIF演示)
[imageView yy_setImageWithURL:url options:YYWebImageOptionProgressiveBlur | YYWebImageOptionSetImageWithFadeAnimation];

加载、处理图片

// 1. 下载图片
// 2. 获得图片下载进度
// 3. 调整图片大小、加圆角
// 4. 显示图片时增加一个淡入动画,以获得更好的用户体验
    
[imageView yy_setImageWithURL:url
   placeholder:nil
   options:YYWebImageOptionSetImageWithFadeAnimation // 淡入动画
   progress:^(NSInteger receivedSize, NSInteger expectedSize) {
       // 获得图片下载进度
       progress = (float)receivedSize / expectedSize;
   }
   transform:^UIImage *(UIImage *image, NSURL *url) {
       // 调整图片大小
       image = [image yy_imageByResizeToSize:CGSizeMake(100, 100) contentMode:UIViewContentModeCenter];
       // 切圆角
       return [image yy_imageByRoundCornerRadius:10];
   }
   completion:^(UIImage *image, NSURL *url, YYWebImageFromType from, YYWebImageStage stage, NSError *error) {
       if (from == YYWebImageFromDiskCache) {
           // 如果图片是从已缓存的磁盘中加载进来的,执行这里的操作
           NSLog(@"load from disk cache");
       }
   }];

Tips: 如果图片下载完成后,在 transform Block 中调整图片大小、加圆角无效,可能是缓存的原因,先选择 YYWebImageOptionRefreshImageCache 刷新缓存或者 YYWebImageOptionIgnoreDiskCache 忽略缓存。

加载、处理图片示例 2

// 设置图片并切圆角
[self.imgView setImageWithURL:_data.imageURL
                  placeholder:[UIImage imageNamed:@"image_default"]
                      options:YYWebImageOptionSetImageWithFadeAnimation // 淡入动画
                     progress:nil
                    transform:^UIImage * _Nullable(UIImage * _Nonnull image, NSURL * _Nonnull url) {
                        // 调整大小,切圆角
                        image = [image imageByResizeToSize:CGSizeMake(72, 56) contentMode:UIViewContentModeScaleAspectFill];
                        return [image imageByRoundCornerRadius:3];
                   }
                   completion:^(UIImage * _Nullable image, NSURL * _Nonnull url, YYWebImageFromType from, YYWebImageStage stage, NSError * _Nullable error) {
                       if (from == YYWebImageFromDiskCache) {
                           BLYLogDebug(@"load image from disk cache");
                       }
                   }];

图片缓存

YYImageCache *cache = [YYWebImageManager sharedManager].cache;
    
// 获取缓存大小
cache.memoryCache.totalCost;
cache.memoryCache.totalCount;
cache.diskCache.totalCost;
cache.diskCache.totalCount;
    
// 清空缓存
[cache.memoryCache removeAllObjects];
[cache.diskCache removeAllObjects];
    
// 清空磁盘缓存,带进度回调
[cache.diskCache removeAllObjectsWithProgressBlock:^(int removedCount, int totalCount) {
   // progress
} endBlock:^(BOOL error) {
   // end
}];

用颜色生成图片

+ (nullable UIImage *)yy_imageWithColor:(UIColor *)color;
+ (nullable UIImage *)yy_imageWithColor:(UIColor *)color size:(CGSize)size;

安装

CocoaPods

  1. 将 cocoapods 更新至最新版本.
  2. 在 Podfile 中添加 pod 'YYWebImage'
  3. 执行 pod installpod update
  4. 导入 <YYWebImage/YYWebImage.h>。
  5. 注意:pod 配置并没有包含 WebP 组件, 如果你需要支持 WebP,可以在 Podfile 中添加 pod 'YYImage/WebP'。你可以调用 YYImageWebPAvailable() 来检查一下 WebP 组件是否被正确安装。

Carthage

  1. 在 Cartfile 中添加 github "ibireme/YYWebImage"
  2. 执行 carthage update --platform ios 并将生成的 framework 添加到你的工程。
  3. 导入 <YYWebImage/YYWebImage.h>。
  4. 注意: carthage framework 并没有包含 webp 组件。如果你需要支持 WebP,可以用 CocoaPods 安装,或者手动安装。

手动安装

  1. 下载 YYWebImage 文件夹内的所有内容。
  2. 将 YYWebImage 内的源文件添加(拖放)到你的工程。
  3. 链接以下 frameworks:
  • UIKit
  • CoreFoundation
  • QuartzCore
  • AssetsLibrary
  • ImageIO
  • Accelerate
  • MobileCoreServices
  • sqlite3
  • libz
  1. 导入 YYWebImage.h
  2. 注意:如果你需要支持 WebP,可以将 Vendor/WebP.framework(静态库) 加入你的工程。你可以调用 YYImageWebPAvailable() 来检查一下 WebP 组件是否被正确安装。

文档

你可以在 CocoaDocs 查看在线 API 文档,也可以用 appledoc 本地生成文档。

系统要求

该项目最低支持 iOS 6.0Xcode 8.0

许可证

YYWebImage 使用 MIT 许可证,详情见 LICENSE 文件。

相关链接

移动端图片格式调研

iOS 处理图片的一些小 Tip

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345