简介
Fresco是一个在Android应用程序中显示图像的强大系统。
Fresco负责图像的加载和显示。它将从网络、本地存储或本地资源加载图像,图像加载完成前会显示一个占位图片。它有两个级别的缓存:一个在内存中,另一个在内部存储器中。
在android 4.x及更低版本中,Fresco将图像放在android内存的一个特殊区域。这可以让您的应用程序运行得更快,减少因为内存不足的错误。
github地址:https://github.com/facebook/fresco#requirements
Fresco还支持:
- 渐进式JPEG流
- 显示动画gif和webp
- 图像加载和显示的广泛定制(将图片变成圆形或者用有圆角的矩形)
- 图片加载中的占位图、加载失败的占位图、重新加载的占位图
主要依赖
implementation 'com.facebook.fresco:fresco:2.0.0'
所需架构环境
一定 arm64-v8a 或者单独 armeabi-v7a (他不能与armeabi一起),否则会报libimagepipeline.so 找不到的错误,导致不显示网络图片。 在这里强烈建议只选择单独使用 armeabi-v7a 这个库
ndk {
// 设置支持的SO库架构
abiFilters 'armeabi-v7a'
}
其他依赖
compile 'com.facebook.fresco:animated-gif:1.5.0'//加载gif动图需添加此库
compile 'com.facebook.fresco:animated-webp:1.5.0'//加载webp动图需添加此库
compile 'com.facebook.fresco:webpsupport:1.5.0'//支持webp需添加此库
compile 'com.facebook.fresco:imagepipeline-okhttp3:1.5.0'//网络实现层使用okhttp3需添加此库
compile 'jp.wasabeef:fresco-processors:2.1.0@aar'//用于提供fresco的各种图片变换
初始化说明
// 使用Fresco需要初始化,建议是在基类里初始化
public class MyApplication extends Application {
@Override
public void onCreate() {
super.onCreate();
Fresco.initialize(this);
}
}
如何使用xml属性
<!-- 其他元素-->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:fresco="http://schemas.android.com/apk/res-auto"
android:layout_height="match_parent"
android:layout_width="match_parent">
xmlns:fresco="http://schemas.android.com/apk/res-auto" 是关键。
使用说明
在官方的https://www.fresco-cn.org/docs/index.html网站中提供非常详细的使用说明,并且是中文文档,直接查看即可。下面只提供一些简单的基本属性与使用说明。
基本属性说明
<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" //圆形图 true圆形 false不是圆形
fresco:roundedCornerRadius="1dp" //矩形圆角图
fresco:roundTopLeft="true" //左上是否圆角 true是 false否
fresco:roundTopRight="false" //右上是否圆角
fresco:roundBottomLeft="false" //左下是否圆角
fresco:roundBottomRight="true" //右下是否圆角
fresco:roundWithOverlayColor="@color/corner_color" //设置圆形图或者圆角后的背景颜色(不可以使用图片)
fresco:roundingBorderWidth="2dp" //圆形图或者圆角图边框的宽度
fresco:roundingBorderColor="@color/border_color" //圆形图或者圆角图边框颜色
/>
图片尺寸缩放类型
- 类型描述
- center居中,无缩放
- centerCrop保持宽高比缩小或放大,使得两边都大于或等于显示边界。居中显示。
- focusCrop同centerCrop, 但居中点不是中点,而是指定的某个点
- centerInside使两边都在显示边界内,居中显示。如果图尺寸大于显示边界,则保持长宽比缩小图片。
- fitCenter保持宽高比,缩小或者放大,使得图片完全显示在显示边界内。居中显示
- fitStart同上。但不居中,和显示边界左上对齐
- fitEnd同fitCenter, 但不居中,和显示边界右下对齐
- fitXY不保存宽高比,填充满显示边界
- none如要使用tile mode显示, 需要设置为none
基本的加载网络图片
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);
先显示低分辨率的图,然后是高分辨率的图
假设你要显示一张高分辨率的图,但是这张图下载比较耗时。与其一直显示占位图,你可能想要先下载一个较小的缩略图。
这时,你可以设置两个图片的URI,一个是低分辨率的缩略图,一个是高分辨率的图。
Uri lowResUri, highResUri;
DraweeController controller = Fresco.newDraweeControllerBuilder()
.setLowResImageRequest(ImageRequest.fromUri(lowResUri))
.setImageRequest(ImageRequest.fromUri(highResUri))
.setOldController(mSimpleDraweeView.getController())
.build();
mSimpleDraweeView.setController(controller);
动图无法在低分辨率那一层显示。
SimpleDraweeView 自适应图片高度
因为SimpleDraweeView 自身不会根据实际图片改变高度或宽度,所以我们需要添加控制器监听,来监听图片返回时的图片信息重新设置view的高度或者宽度。下面的例子就是根据图片高度自适应SimpleDraweeView的高度。
/**
* 设置图片view并且自适应高度
*/
private void setImageView(SimpleDraweeView simpleDraweeView, String uri) {
ControllerListener controllerListener = new ControllerListener() {
@Override
public void onSubmit(String id, Object callerContext) {
//在提交图像请求之前回调
}
@Override
public void onFinalImageSet(String id, @Nullable Object imageInfo, @Nullable Animatable animatable) {
//在设置最终图像后回调
if (imageInfo == null){
return;
}
ImageInfo info = (ImageInfo) imageInfo;
ViewGroup.LayoutParams layoutParams = simpleDraweeView.getLayoutParams();
layoutParams.height = info.getHeight();
simpleDraweeView.setLayoutParams(layoutParams);
}
@Override
public void onIntermediateImageSet(String id, @Nullable Object imageInfo) {
//设置任何中间图像后回调
}
@Override
public void onIntermediateImageFailed(String id, Throwable throwable) {
//在获取中间图像失败后回调
}
@Override
public void onFailure(String id, Throwable throwable) {
//在获取最终图像失败后回调
}
@Override
public void onRelease(String id) {
//在控制器释放获取的图像后回调
}
};
DraweeController draweeController = Fresco.newDraweeControllerBuilder()
.setControllerListener(controllerListener)
.setUri(uri)
.build();
simpleDraweeView.setController(draweeController);
}
加载显示本地图片
类型 | Scheme | 示例 |
---|---|---|
远程图片 | http://, https:// | HttpURLConnection 或者参考 使用其他网络加载方案 |
本地文件 | file:// | FileInputStream |
Content provider | content:// | ContentResolver |
asset目录下的资源 | asset:// | AssetManager |
res目录下的资源 | res:// | Resources.openRawResource |
Uri中指定图片数据 | data:mime/type;base64, | 数据类型必须符合 rfc2397规定 (仅支持 UTF-8) |
用法demo:
demo1:
Uri uri = Uri.parse("res://包名(实际可以是任何字符串甚至留空)/" + R.drawable.ic_launcher);
demo2:
Uri uri = Uri.parse("res://com.xxx.xxx/" + R.mipmap.photo);
userIcon.setImageURI(uri);
demo3:
Uri imageUri = Uri.parse("file://"+filePath);
image.setImageURI(imageUri);
demo4:
image.setImageURI("asset://android_asset/permissionimage/1.png");
另外,Fresco还有一个功能,它是支持自动显示视频缩略图的.只要使用直接把视频路径导入就行.
清除指定路径图片缓存
ImagePipeline imagePipeline = Fresco.getImagePipeline(); //因为Fresco框架对同名文件会自动使用缓存,导致图片会显示之前的图像,所以这里为了保证实时更新图片需要清除这种图片的缓存
Uri uri = Uri.parse("file://" + address);
imagePipeline.evictFromMemoryCache(uri);//从内存缓存中逐出
imagePipeline.evictFromDiskCache(uri);//从磁盘缓存中逐出
imagePipeline.evictFromCache(uri);//从缓存中逐出
高斯模糊效果
fun showUrlBlur(draweeView: SimpleDraweeView, url: String?, iterations: Int, blurRadius: Int) {
try {
val uri: Uri = Uri.parse(url)
val request = ImageRequestBuilder.newBuilderWithSource(uri)
.setPostprocessor(IterativeBoxBlurPostProcessor(iterations, blurRadius))
.build()
val controller = Fresco.newDraweeControllerBuilder()
.setOldController(draweeView.controller)
.setImageRequest(request)
.build()
draweeView.controller = controller
} catch (e: Exception) {
e.printStackTrace()
}
}
设置磁盘缓存
ImagePipelineConfig.Builder imagePipelineConfigBuilder = ImagePipelineConfig.newBuilder(context);
imagePipelineConfigBuilder.setMainDiskCacheConfig(DiskCacheConfig.newBuilder(context)
.setBaseDirectoryPath(context.getExternalCacheDir())//设置磁盘缓存的路径
.setBaseDirectoryName(BaseConstants.APP_IMAGE)//设置磁盘缓存文件夹的名称
.setMaxCacheSize(MAX_DISK_CACHE_SIZE)//设置磁盘缓存的大小
.build());
ImagePipelineConfig config = imagePipelineConfigBuilder.build();
Fresco.initialize(context, config);//初始化