Android基于Glide的二次封装,借鉴Glide思想二次封装Fresco

本篇文章已授权微信公众号 dasu_Android(大苏)独家发布

最近封装了个 Fresco 的组件库:DFresco,就顺便来讲讲。

背景

Fresco 图片库很强大,我们项目中就是使用的 Fresco,但有一点就是,不怎么好使用,略麻烦。不同项目中,多多少少都需要对 Fresco 进行一层封装才能在 ui 里快速使用。

这就导致了,不同项目都根据自己的业务需求场景来进行封装,每次有新项目,复制粘贴时又得解决好多业务耦合的错误,麻烦,是真的麻烦~

而且,首次接触 Fresco,接入上手的成本相比其他图片库,如 Glide,成本都要大很多。

举个例子,假如你有这么个需求:加载一张网络上的 gif 图片,为了防止内存占用过多,需要设置分辨率压缩,最后显示到圆形控件上,同时,需要设置占位图,错误图,拉伸方式等。

那么此时,你的代码可能就是这样的:

ImageDecodeOptions imageDecodeOptions = ImageDecodeOptions.newBuilder()

.setDecodePreviewFrame(true).build();

ImageRequestBuilder builder = ImageRequestBuilder.newBuilderWithSource(mUri)

.setProgressiveRenderingEnabled(true)

.setImageDecodeOptions(imageDecodeOptions);

if (mWidth > 0 && mHeight > 0) {

builder.setResizeOptions(new ResizeOptions(mWidth, mHeight));

}

ImageRequest request = builder.build();

AbstractDraweeController controller = Fresco.newDraweeControllerBuilder()

.setImageRequest(request)

.setControllerListener(listener)

.setOldController(draweeView.getController())

.setAutoPlayAnimations(true).build();

draweeView.setController(controller);

同时,你可能还需要在 xml 中对 SimpleDrawwView 控件进行占位图等等的配置:

android:id="@+id/sdv_fresco"

android:layout_width="500dp"

android:layout_height="500dp"

fresco:actualImageScaleType="centerCrop"

fresco:fadeDuration="3000"

fresco:failureImage="@mipmap/ic_launcher"

fresco:failureImageScaleType="centerCrop"

fresco:placeholderImage="@mipmap/ic_launcher"

fresco:placeholderImageScaleType="centerCrop"

fresco:progressBarAutoRotateInterval="1000"

fresco:progressBarImage="@drawable/ani_rotate"

fresco:progressBarImageScaleType="centerCrop"

fresco:retryImage="@mipmap/ic_launcher"

fresco:retryImageScaleType="centerCrop"

fresco:backgroundImage="@mipmap/ic_launcher"

fresco:overlayImage="@mipmap/ic_launcher"

fresco:pressedStateOverlayImage="@mipmap/ic_launcher"

fresco:roundAsCircle="false"

fresco:roundingBorderWidth="2dip"

fresco:roundingBorderColor="@color/colorPrimary"/>

如果忘记了某个自定义属性名是什么的时候,还得到网上搜索下资料,是吧。

小结一下,使用 Fresco,你的接入学习成本至少需要知道 Fresco 的如下信息:

SimpleDraweeView 的自定义属性

ImageRequestBuilder 用法及大概用途

AbstractDraweeController 用法及大概用途

GenericDraweeHierarchy 用法及大概用途

如果涉及到一些网络下载监听,缓存之类的,那么你还要了解:

Imagepipeline 用法及大概用途

总之,Fresco 强大是强大,但使用起来不方便,不得不封装一层。

既然要封装,那么就直接借鉴 Glide 的使用思想来进行封装好了,如果有使用过 Glide 的应该很清楚,要实现以上功能,全程一个调用链即可。

二次封装

封装要达到的目的有两点:

使用简洁、方便

其他人接入直接上手的成本尽可能少,最好不用去看文档,去看源码

第一点可以参考 Glide 的使用方式来设计,那么第二点我的想法是借助 AndroidStudio 的代码提示功能来实现。

比如,你只需知道,组件的入口是 DFresco 即可,其他都通过 AndroidStudio 来给你提示,如:

0a7141fbd575f81b36e35c9165cc192d.png

当你在 AndroidStudio 上输入 DFresco. 后,界面上会弹出你可用 api,这些就是我开放给你的入口,我将这个使用过程划分成几个步骤,每个步骤能做什么,该做什么,我都给你规定好了,你参照着提示,直接从方法命名上就能够知道该如何使用了,AndroidStudio 会一步步引导你。

这里就两个入口,一个是用来初始化 Fresco 的:

init(Context)

这个内部封装了一些默认的初始化配置,比如内存大小配置,内部日志配置等等。

init(Context, ImagePipelineConfig)

这个是开放给你的自定义配置,如果你不想使用默认的配置的话。

source(String url) :加载网络上的图片

source(File localFile) :加载磁盘上的图片

source(Context context, int resId) :加载 res 内的 drawable 资源图片

source(Uri uri) :通用的加载方式

我将常用的几种图片来源单独封装出来使用,方便。

9c2ec3726f4abb88caa3cf1192723183.png

当调用了 source() 后就进入了第二个步骤,这个步骤中,我将图片相关的配置设计到另外一个步骤中去,否则连同图片配置的 api 也都在这里的话,会搞得蛮乱的,可能让使用者到这里后不清楚该调用哪些接口了。

所以,我会把控每个步骤的 api,尽量让每个步骤的 api 做的事都比较相近,比如这里:

intoTarget(SimpleDraweeView) 加载图片显示到控件上

intoTarget(SimpleDraweeView,ControllerListener) 加载图片显示到控件上,允许监听这个过程

intoTarget(BaseBitmapDataSubscriber) 只加载图片到内存中,以 Bitmap 形式存在

我的需求场景大概就是直接加载图片显示到控件上,或者有时候只是需要将图片加载到内存中,但不用显示到某个控件上,反而要取得图片的 Bitmap 对象,所以我将这些都封装起来了。

resize(int width, int height)

这个实际上就是对 Fresco 中的 ResizeOptions 的一层封装而已,简化使用,不至于像以前那么麻烦。

enterImageConfig()

如果你都使用默认配置的话,那么是不用再去调用那些各种配置的接口的,所以我才将图片配置封装到另外一个步骤中,这个步骤你可进,可不进,如果有需求,那么通过这个方法进入图片配置步骤:

d45e146869baaf2e17f688b21c6e416b.png

这里的配置项很多,也是因为这个原因,所以才不想让这些接口跟上一个步骤放一起,不然很容易让使用者懵掉。而进入了图片配置这个步骤后,这里提供的 api 其实就是对 GenericDraweeHierarchy 的用途进行了一层封装,或者说对 SimpleDraweeView 的自定义属性进行了一层封装。

如果你不熟悉,没关系,其实就是一些常用的功能,如设置控件为圆形、圆角、边框,设置占位图、失败图、进度图、图片拉伸方式、淡入淡出动画时长等等。

这样封装的目的在于,你可以通过一条调用链的形式就设置完所有的配置,就像 Glide 的使用一样,而不用再去 new 很多 Fresco 的类,再去拼接。

进入图片配置步骤只是一个可选的步骤,进来之后当然就要出去,所以当完成了你的配置后,需要调用:finishImageConfig(),如:

840f41df3b3cf03fa3339b6526cff559.png

这样就完成了图片配置,将流程切回主线了,就可以继续根据你的需要设置图片显示的目标了。

当然,为了防止再次进入图片配置步骤这样造成之前的配置项失效的场景,我借鉴了 Fresco 的 init 处理方法,即,如果一次使用过程中,重复进入图片配置步骤,那么程序会抛异常来提醒你不能这么做。

以上,就是 DFresco 组件的封装思想,欢迎指点一下哈~

另外,参考了 Glide 的一些处理,当你的 intoTarget 是传入了 SimpleDraweeView 控件时,DFresco 内部会自动根据控件的大小对图片进行一次分辨率压缩,降低图片占用内存,当然,如果你有手动调用了 resize(),那么以你的为主。

使用示例

compile 'com.dasu.image:fresco:0.0.1'

使用之前,需先初始化,建议在 Application 中进行:

DFresco.init(this);

//加载 res 中的 drawable 图片到 SimpleDraweeView 控件上(默认支持 gif 图,并且会自动根据控件宽高进行分辨率压缩,降低内存占用

DFresco.source(mContext, R.drawable.weixin).intoTarget(mSimpleDraweeView);

//加载磁盘中的图片,手动设置分辨率的压缩,并获取 bitmap 对象,监听回调,手动显示到 ImageView 控件上

DFresco.source(new File("/mnt/sdcard/weixin.jpg"))

.resize(500, 500)

.intoTarget(new BaseBitmapDataSubscriber() {

@Override

protected void onNewResultImpl(Bitmap bitmap) {

Log.w("!!!!!!", "bitmap:ByteCount = " + bitmap.getByteCount() + ":::bitmap:AllocationByteCount = " + bitmap.getAllocationByteCount());

Log.w("!!!!!!", "" + bitmap.getWidth() + ":::height:" + bitmap.getHeight());

mImageView.setImageBitmap(bitmap);

}

@Override

protected void onFailureImpl(DataSource> dataSource) {

Log.e("!!!!!!", "onFailureImpl");

}

});

//加载网络图片,进行各种配置,如缩放方式,占位图,圆形,圆角,动画时长等等,最后自动显示到 SimpleDraweeView 控件上

DFresco.source("https://upload-images.jianshu.io/upload_images/1924341-9e528ee638e837a5.png")

.enterImageConfig() //进入配置步骤

.allFitXY() //所有图片,包括占位图等等的拉伸方式

.animFade(3000) //淡入淡出动画时长

.placeholderScaleType(ScalingUtils.ScaleType.CENTER_INSIDE) //设置占位图的拉伸方式,后面设置的会覆盖前面的

.actualScaleType(ScalingUtils.ScaleType.CENTER)

// .asRound(50) //设置圆角,(圆角和圆形不能同时设置)

.asCircle() //设置控件显示为圆形控件

.roundBorderColor(Color.RED) //设置圆角或圆形的边框颜色

.roundBorderWidth(20) //设置圆角或圆形的边框宽度

.failure(R.drawable.timg) //设置失败图

.progressBar(R.drawable.aaaa) //设置加载进度图

.retry(R.drawable.weixin) //设置重试时的图

.placeholder(R.drawable.image) //设置占位图

.finishImageConfig() //退出配置步骤

.intoTarget(mSimpleDraweeView);

大家好,我是 dasu,欢迎关注我的公众号(dasuAndroidTv),如果你觉得本篇内容有帮助到你,可以转载但记得要关注,要标明原文哦,谢谢支持~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
<h4>Fresco封装,快速上手,图像后处理,超大图高清预览,缩小放大,双击放大等一一俱全。</h4> ====================== [![](https://jitpack.io/v/CarGuo/FrescoUtils.svg)](https://jitpack.io/#CarGuo/FrescoUtils) [![Build Status](https://travis-ci.org/CarGuo/FrescoUtils.svg?branch=master)](https://travis-ci.org/CarGuo/FrescoUtils) ## 因为某些原因,现在使用jitpack.io,还请使用依赖的各位切换到jitpack。 #### 在project下的build.gradle添加 ``` allprojects { repositories { ... maven { url 'https://jitpack.io' } } } ``` #### 在module下的build.gradle添加 ``` dependencies { compile 'com.github.CarGuo:FrescoUtils:v1.0.8' } ``` * 1.0.8 update fresco to 1.5.0 * 1.0.7 增加option配置方法; ``` /** * @param imageView 图片加载控件 * @param loadOption 加载配置构造器 */ public static void loadFrescoImage(FrescoImageView imageView, LoadOption loadOption) ``` * 1.0.6 update fresco to 1.3.0; * 1.0.5 update fresco to 1.2.0;移除无用依赖; * 1.0.4 update fresco to 1.0.1,update scaleImage to 3.6.0 * 1.0.3 update fresco to 1.0.0 * 1.0.2 最低API调整到15 * 1.0.1 增加了额FrescoHelper直接超大图加载接口 ``` /** * 超大图片的就接口 * * @param context 上下玩 * @param imageView 图片加载控件 * @param imageUri 图片地址 * @param defaultId 默认失败图片 */ public static void loadBigImage(final Context context, final SubsamplingScaleImageView imageView, String imageUri, final int defaultId) ``` <h4><a href="http://www.jianshu.com/p/cd058a924288">简书入口 这里有详细介绍</a></h4> ## 效果显示 <img src="https://github.com/CarGuo/FrescoUtils/blob/master/01.jpg" width="240px" height="426px"/> <img src="https://github.com/CarGuo/FrescoUtils/blob/master/02.jpg" width="240px" height="426px"/> <p></p> ### 动态图效果 <img src="https://github.com/CarGuo/FrescoUtils/blob/master/01.gif" width="240px" height="426px"/> <img src="https://github.com/CarGuo/FrescoUtils/blob/master/02.gif" width="240px" height="426px"/> <p></p> ### 记得记得在Application里初始化 ``` ImagePipelineConfig config = ImagePipelineConfig.newBuilder(this) .setDownsampleEnabled(true) .build(); Fresco.initialize(this, config); ``` ### FrescoHelper 封装了针对 <a href="https://github.com/HomHomLin/FrescoImageView">FrescoImageView</a> 的工具类,直接使用FrescoImageView作为ImageView使用即可。 封装了多种类型,这是最全的一种 ``` /** * @param imageView 图片加载控件 * @param uri 路径或者URL * @param defaultImg 默认图片 * @param cornerRadius 弧形角度 * @param isCircle 是否为圆 * @param loadLocalPath 是否本地资源,如果显示R.drawable.xxx,Path可以为null,前提isCircle为true * @param isAnima 是否显示GIF动画 * @param size 是否再编码 * @param postprocessor 图像显示处理 */ public static void loadFrescoImage(FrescoImageView imageView, String uri, int defaultImg, int cornerRadius, boolean isCircle, boolean loadLocalPath, boolean isAnima, Point size, Postprocessor postprocessor) { init(imageView, cornerRadius, isCircle, isAnima, size, postprocessor); if (loadLocalPath) { imageView.loadLocalImage(uri, defaultImg); } else { imageView.loadView(uri, defaultImg); } } ··· FrescoHelper.loadFrescoImage(frescoImageView, recyclerDataModel.getUrl(), R.mipmap.ic_launcher, 2, false, recyclerDataModel.getSize(), new BlurPostprocessor(context, 10)); ``` ### 带有<a href="https://github.com/wasabeef/fresco-processors">fresco-processors</a>各种处理特效,高斯,五角形等。 <img src="https://github.com/wasabeef/fresco-processors/raw/master/art/demo.gif" width="240px" height="426px"/> ### 带有<a href="https://github.com/davemorrissey/subsampling-scale-image-view">subsampling-scale-image-view</a>实现超高清图片超长图片不模糊显示。 <img src="https://github.com/CarGuo/FrescoUtils/blob/master/01.gif" width="240px" height="426px"/> ### 带有<a href="https://github.com/ongakuer/PhotoDraweeView">PhotoDraweeView</a> 功能与PhotoView一样,支持双击放大,单击返回,手动放大与缩小等。 <img src="https://github.com/ongakuer/PhotoDraweeView/raw/master/screenshot.gif" width="240px" height="426px"/>

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值