Fresco · 基本使用及Gif和webP播放及循环播放详解
Facebook 出品的一个强大的图片加载组件
Fresco 是一个强大的图片加载组件。使用它之后,你不需要再去关心图片的加载和显示这些繁琐的事情! 支持 Android 2.3 及以后的版本。
这里我们要解决的问题在于当切图资源没有给webP加入循环播放的设置,这就要前端进行处理,实现自动播放webp格
式动图且循环播放。
有的同志就要拿着你的显示屏打我头了,那为什么不让UI或者原型将webp动图加入循环展示的设置呢?
那我就要拿着我8块钱地摊买的人字拖打回去了。这里我们说的时UI或者设计没有给这个样子的webp动图,我们前台该怎么去处理的问题。
文章目录
特性
内存管理
-
解压后的图片,即Android中的Bitmap,占用大量的内存。大的内存占用势必引发更加频繁的GC。在5.0以下,GC将会显著地引发界面卡顿。
-
在5.0以下系统,Fresco将图片放到一个特别的内存区域。当然,在图片不显示的时候,占用的内存会自动被释放。这会使得APP更加流畅,减少因图片内存占用而引发的OOM。
-
Fresco 在低端机器上表现一样出色,你再也不用因图片内存占用而思前想后。
图片绘制
Fresco 的 Drawees 设计,带来一些有用的特性:
- 自定义居中焦点
- 圆角图,当然圆圈也行
- 下载失败之后,点击重现下载
- 自定义占位图,自定义overlay, 或者进度条
- 指定用户按压时的overlay
图片加载
圆角图片 圆形图片 快速配置
Fresco的 Image Pipeline
允许你用很多种方式来自定义图片加载过程,比如:
为同一个图片指定不同的远程路径,或者使用已经存在本地缓存中的图片
先显示一个低清晰度的图片,等高清图下载完之后再显示高清图
加载完成回调通知
对于本地图,如有EXIF缩略图,在大图加载完成之前,可先显示缩略图
缩放或者旋转图片
对已下载的图片再次处理
支持WebP解码,即使在早先对WebP支持不完善的Android系统上也能正常使用!
图片的渐进式呈现
渐进式的JPEG图片格式已经流行数年了,渐进式图片格式先呈现大致的图片轮廓,
然后随着图片下载的继续,呈现逐渐清晰的图片,这对于移动设备,尤其是慢网络有极大的利好,可带来更好的用户体验。
Android 本身的图片库不支持此格式,但是Fresco支持。使用时,和往常一样,
仅仅需要提供一个图片的URI即可,剩下的事情,Fresco会处理。
动图加载
加载 Gif
图和 WebP
动图在任何一个Android开发者眼里看来都是一件非常头疼的事情。每一帧都是一张很大的Bitmap
,每一个动画都有很多帧。Fresco让你没有这些烦恼,它处理好每一帧并管理好你的内存。
I.基本使用
GIF格式图片
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)//设置资源地址
.setAutoPlayAnimations(true)//设置是否自动播放
.build();
simpleDraweeView.setController(controller);
引入框架
官方文档引入版本
dependencies {
// 在 API < 14 上的机器支持 WebP 时,需要添加
compile 'com.facebook.fresco:animated-base-support:0.12.0'
// 支持 GIF 动图,需要添加
compile 'com.facebook.fresco:animated-gif:0.12.0'
// 支持 WebP (静态图+动图),需要添加
compile 'com.facebook.fresco:animated-webp:0.12.0'
compile 'com.facebook.fresco:webpsupport:0.12.0'
// 仅支持 WebP 静态图,需要添加
compile 'com.facebook.fresco:webpsupport:0.12.0'
}
注意:官网引入的版本知识作为引入及使用示范,目前位置陆陆续续发布了许多新版本,项目使用上,尽量使用尽可能的新版本。
这里博客中使用的**1.9.0
**版本,其中修复了以前的内存泄漏或者图片处理上的问题,优化了和减少了代码上的冗余等,
dependencies {
//必须添加
implementation 'com.facebook.fresco:fresco:1.9.0'
//依需要添加
// For animated GIF support
implementation 'com.facebook.fresco:animated-gif:1.9.0'
// For WebP support, including animated WebP
implementation 'com.facebook.fresco:animated-webp:1.9.0'
implementation 'com.facebook.fresco:webpsupport:1.9.0'
// For WebP support, without animations
implementation 'com.facebook.fresco:webpsupport:1.9.0'
// Provide the Android support library (you might already have this or a similar dependency)
implementation 'com.android.support:support-core-utils:28.0.0'
}
引入资源
URI引入支持的类型
类型 | Scheme | 示例 |
---|---|---|
远程图片 | http://,https:// ,两种协议同时支持 | HttpURLConnection 或者参考 使用其他网络加载方案,OkHttp 是一个流行的开源网络请求库,使用广泛的是Retrofit2网络框架(依照实际情况结合力选择) |
本地文件 | file:// | FileInputStream |
Contentprovider | content:// | ContentResolver |
asset目录下的资源 | asset:// | AssetManager |
res目录下的资源 | res:// | Resources.openRawResource |
Uri中指定图片数据 | data:mime/type;base64 | 数据类型必须符合 rfc2397 规定 (仅支持 UTF-8) |
初始化
在
Application
的继承类中的Oncreate();方法
中初始化Fresco.initialize(this);
使用
XML(布局文件)中使用
注意:SimpleDraweeView必须指定确定大小,不支持wrap_content
res 示例:Uri uri = Uri.parse("res://包名(实际可以是任何字符串甚至留空)/" + R.drawable.ic_launcher);
- 只有图片资源才能使用在Image pipeline中,比如(PNG)。其他资源类型,比如字符串,或者XML Drawable在Image pipeline中没有意义。所以加载的资源不支持这些类型。
- 像ShapeDrawable这样声明在XML中的drawable可能引起困惑。注意到这毕竟不是图片。如果想把这样的drawable作为图像显示,那么把这个drawable设置为占位图,然后把URI设置为null。
fresco声明:
xmlns:fresco="http://schemas.android.com/apk/res-auto
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_blue_light">
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/imageView"
android:layout_width="0dp"
android:layout_height="280dp"
android:layout_marginStart="67dp"
android:layout_marginLeft="67dp"
android:layout_marginEnd="67dp"
android:layout_marginRight="67dp"
android:layout_marginBottom="123dp"
fresco:layout_constraintBottom_toBottomOf="parent"
fresco:layout_constraintEnd_toEndOf="parent"
fresco:layout_constraintStart_toStartOf="parent"
fresco:placeholderImage="@drawable/ic_launcher_background" />
</android.support.constraint.ConstraintLayout>
简单加载网络图片
Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/logo.png");
SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
draweeView.setImageURI(uri);
SimpleDraweeView配置示例
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/my_image_view"
android:layout_width="20dp"
android:layout_height="20dp"
fresco:fadeDuration="300"
fresco:actualImageScaleType="focusCrop"
fresco:placeholderImage="@color/wait_color"
fresco:placeholderImageScaleType="fitCenter"
fresco:failureImage="@drawable/error"
fresco:failureImageScaleType="centerInside"
fresco:retryImage="@drawable/retrying"
fresco:retryImageScaleType="centerCrop"
fresco:progressBarImage="@drawable/progress_bar"
fresco:progressBarImageScaleType="centerInside"
fresco:progressBarAutoRotateInterval="1000"
fresco:backgroundImage="@color/blue"
fresco:overlayImage="@drawable/watermark"
fresco:pressedStateOverlayImage="@color/red"
fresco:roundAsCircle="false"
fresco:roundedCornerRadius="1dp"
fresco:roundTopLeft="true"
fresco:roundTopRight="false"
fresco:roundBottomLeft="false"
fresco:roundBottomRight="true"
fresco:roundWithOverlayColor="@color/corner_color"
fresco:roundingBorderWidth="2dp"
fresco:roundingBorderColor="@color/border_color"
/>
各种使用详解
在xml中使用
在java中使用
Drawee的各种效果配置
进度条
缩放
圆角和圆圈
使用ControllerBuilder
渐进式JPEG图
动画支持
多图请求及图片复用
监听下载事件
缩放和旋转图片
修改图片
图片请求(Image Requests)
自定义View
Image Pipeline
Image Pipeline介绍
Image pipeline 负责完成加载图像,变成Android设备可呈现的形式所要做的每个事情。
流程如下:
- 检查内存缓存,如有,返回
- 后台线程开始后续工作
- 检查是否在未解码内存缓存中。如有,解码,变换,返回,然后缓存到内存缓存中。
- 检查是否在磁盘缓存中,如果有,变换,返回。缓存到未解码缓存和内存缓存中。
- 从网络或者本地加载。加载完成后,解码,变换,返回。存到各个缓存中。
既然本身就是一个图片加载组件,那么一图胜千言。
1. 上图中,disk cache
实际包含了未解码的内存缓存在内,统一在一起只是为了逻辑稍微清楚一些。关于缓存,更多细节可以参考这里。
Image pipeline 可以从本地加载图片,也可以从网络。支持 PNG
,GIF
,WebP
, JPEG
。
2.各个Android系统的WebP适配
在Android 3.0系统之前,Android是不支持 WebP
格式的。在4.1.2之前,扩展WebP
格式是不支持的。 在Image pipeline的支持下,从2.3之后,都可以使用WebP
格式。
GIF动图加载与WebP动图加载
1.GIF图片加载
将setAutoPlayAnimations();值为true
- 实现自动播放
- 实现循环播放
Uri uri = Uri.parse("http://img.soogif.com/qaDs69glJi2ojoMMJCDAocDvyIQlwfaN.gif");
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)//设置资源地址
.setAutoPlayAnimations(true)//设置是否自动播放
.build();
simpleDraweeView.setController(controller);
目前 支持 webp 动图 的 三方图片库,只有Fresco,想控制 动图 播放 和 暂停 的 也只有 Fresco
(声明:其他的三方库也都用过,只不过本文的功能 目前只有 Fresco 能简单实现)
2.webP格式的动图循环自动播放
http://voddafz06jj.vod.126.net/voddafz06jj/videoPreview_1821338293_IQAB9DSR.webp
这是.webp
动图地址
Uri uri = Uri.parse("http://voddafz06jj.vod.126.net/voddafz06jj/videoPreview_1821338293_IQAB9DSR.webp");
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setUri(uri)//设置资源地址
.setAutoPlayAnimations(true)//设置是否自动播放
.build();
simpleDraweeView.setController(controller);
图片示例:
webP格式动图自动播放但不循环播放
对应GIF的自动循环播放方式就不适用于webP格式的动图。那么如何做?
注意:
同时还要设置.setAutoPlayAnimations(true)
//DraweeController
Uri uri = Uri.parse("http://voddafz06jj.vod.126.net/voddafz06jj/videoPreview_1821338293_IQAB9DSR.webp");
final DraweeController controller = Fresco.newDraweeControllerBuilder()
.setAutoPlayAnimations(true)
.setUri(uri)
.setControllerListener(new BaseControllerListener<ImageInfo>() {
@Override
public void onFinalImageSet(
String id,
@Nullable ImageInfo imageInfo,
@Nullable Animatable animatable) {
if (animatable instanceof AnimatedDrawable2) {
AnimatedDrawable2 animatedDrawable = (AnimatedDrawable2) animatable;
animatedDrawable.setAnimationBackend(new LoopCountModifyingBackend(animatedDrawable.getAnimationBackend(), 1000));//设置循环次数
}
}
})
.build();
simpleDraweeView.setController(controller);
//LoopCountModifyingBackend
public class LoopCountModifyingBackend extends AnimationBackendDelegate {
private int mLoopCount;
public LoopCountModifyingBackend(@Nullable AnimationBackend animationBackend,int loopCount) {
super(animationBackend);
mLoopCount = loopCount;
}
@Override
public int getLoopCount() {
return mLoopCount;
}
}
图片示例:
webP格式动图自动播放且循环播放
【提供好的可自动循环播放的webp动图】
https://isparta.github.io/compare-webp/image/gif_webp/webp/1.webp
【提供的无循环播放的webp动图】
http://voddafz06jj.vod.126.net/voddafz06jj/videoPreview_1821338293_IQAB9DSR.webp
推荐资源
[1]从零开始撸一个Fresco之gif和Webp动画
[2]Fresco官文
[3]GIF/PNG/JPG和WEBP/base64/apng图片优点和缺点整理
[4]Glide官文
[5] Glide(Github)
[6]网络加载图片对比(Fresco/Glide)
转载请注明出处
作者: maiduoduo
邮箱: maiduoduo0@163.com
博客主页: https://blog.csdn.net/Maiduoudo