Android--Fresco的简单使用
来源:互联网 发布:omega7 知乎 编辑:程序博客网 时间:2024/06/10 17:02
引入Fresco:
编辑 build.gradle
文件:
dependencies {
//Fresco,无论使用哪个模块的功能,都必须要添加的基础依赖
compile 'com.facebook.fresco:fresco:0.14.1'
//下面的依赖根据需求,用到哪个模块,就导入对应的依赖即可.
// 仅支持 WebP 静态图,需要添加
compile 'com.facebook.fresco:webpsupport:0.14.1'
// 支持 GIF 动图,需要添加
compile 'com.facebook.fresco:animated-gif:0.14.1'
// 支持 WebP静态图及 WebP 动图,需要添加
compile 'com.facebook.fresco:animated-webp:0.14.1'
compile 'com.facebook.fresco:webpsupport:0.14.1'
// 在 API < 14 上的机器支持 WebP 时,需要添加
compile 'com.facebook.fresco:animated-base-support:0.14.1'
}
想要使用Fresco还需要做一下事情:
在加载图片之前,你必须初始化Fresco
类。你只需要调用Fresco.initialize
一次即可完成初始化,在Application
里面做这件事再适合不过了(如下面的代码),注意多次的调用初始化是无意义的。
[MyApp.java]public class MyApp extends Application {@Overridepublic void onCreate() {super.onCreate();Fresco.initialize(this);}}
做完上面的工作后,你需要在 AndroidManifest.xml
中指定你的 Application 类。为了下载网络图片,请确认你声明了网络请求的权限。
<manifest ... > <uses-permission android:name="android.permission.INTERNET" /> <application ... android:label="@string/app_name" android:name=".MyApp" > ... </application> ...</manifest>在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">加入
SimpleDraweeView
:<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="130dp" android:layout_height="130dp" fresco:placeholderImage="@drawable/my_drawable" />注意:这里必须要设置layout_width和layout_height属性,否则不展示图 片,而且不是将属性值设置为wrap_content(因为我们使用Fresco加载图片是可以添加多个图层的,如果设置为wrap_content,但是不同图层的图片像素大小不同的话就会造成重绘的问题,用户体验特别差)
开始加载图片:
Uri uri = Uri.parse("图片地址");SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);draweeView.setImageURI(uri);
剩下的,Fresco会替你完成:
- 显示占位图直到加载完成;
- 下载图片;
- 缓存图片;
- 图片不再显示时,从内存中移除;
等等等等。
一、Fresco主要包括两方面:
Image Pipeline模块:负责从网络,从本地系统文件,本地资源加载图片,为了最大限度节省空间和CPU时间,它含有三级缓存(2ji级内存,1级磁盘)。
Fresco中设计有一个叫做Drawees模块,它会再图片加载完成之前显示占位图,加载完成后,自动释放未目标图片, 并且会及时的释放内存和空间占用,我们实现基本功能一般使用Drawees就可以了,Drawees主要包括下面几个部分:
a. DraweeView:继承于View,我们一般展示图片使用的是DraweeView的子类SimpleDraweeView,我们可以在XML和Java代码中使用,具体使用方式如模块三中介绍所示:
b. DraweeController:负责和Fresco中的 image pipeline交互,我们可以创建一个这个类的实例,来对加载的图片进行更多的控制。
c. DraweeHierarchy:可以通过它来在Java代码中自定义图片的展示,当然也可以在XML布局中定义,我们在模块三中会介绍XML中的属性设置。
d. Listeners:监听图片下载,如果你想在图片下载成功或者失败之后做操作的话,可以监听这个Listeners。
二、SimpleDraweeView在XML中的属性设置:
在XML布局中可以设置很多属性: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"//图片加载失败时显示,提示用户点击重新加载,重复加载4次还是没有加载出来的时候才会显示failureImage的图片,要显示retryImage还必须在代码中设置.setTapToRetryEnabled(true)fresco:retryImageScaleType="centerCrop" //重新加载的图片缩放类型fresco:progressBarImage="@drawable/progress_bar" //进度条图片fresco:progressBarImageScaleType="centerInside"fresco:progressBarAutoRotateInterval="1000"//进度图自动旋转间隔时间(单位:毫秒ms)fresco:backgroundImage="@color/blue"//背景图片,这里的背景图片首先被绘制fresco:overlayImage="@drawable/watermark"// 设置叠加图,在xml中只能设置一张叠加图片,如果需要多张图片的话,需要在java代码中设置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" //边框颜色
上面的ImageScaleType有下面一些缩放类型:
类型 描述
三、DraweeHierarchy使用
我们上面了解了在XML中设置图片的属性,一般情况下在XML中设置就可以了,但是如果想在java代码中设置更多的定制化,我们就需要使用DraweeHierarchy,如下所示:创建一个Builder然后传递给draweeView就可以了:GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());GenericDraweeHierarchy hierarchy = builder .setProgressBarImage(new ProgressBarDrawable()) .build();draweeView.setHierarchy(hierarchy);
下面为facebook官方给出的方法:
当然,相应的set方法也会对应相应的get方法,我们这里就只贴出了常用的方法,由于篇幅原因,其他方法我们就不贴出了,大家可以自己查看API。
我们这里只针对几个比较常用的方法进行介绍:
RoundingParams params = new RoundingParams();params.setCornersRadius((float) 50.0);GenericDraweeHierarchyBuilder builder = new GenericDraweeHierarchyBuilder(getResources());GenericDraweeHierarchy hierarchy = builder .setProgressBarImage(new ProgressBarDrawable())// 设置进度条 .setProgressBarImageScaleType(ScalingUtils.ScaleType.CENTER)// 设置进度条缩放类型 .setActualImageScaleType(ScalingUtils.ScaleType.FOCUS_CROP)// 设置实际图像的缩放类型 .setActualImageFocusPoint(new PointF(0,0))// 设置缩放类型为focusCrop时,需要设置一个FocusPoint坐标 .setBackground(getResources().getDrawable(R.mipmap.ic_launcher))// 设置背景 .setFadeDuration(5000)// 设置图片从渐变色的持续时间 .setFailureImage(getResources().getDrawable(R.drawable.fail))// 失败时显示的图片 .setOverlay(getResources().getDrawable(R.color.overlay))// 覆盖层 .setPlaceholderImage(getResources().getDrawable(R.drawable.place))// 设置占位图 .setPlaceholderImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE)// 设置占位图的缩放类型 .setPressedStateOverlay(getResources().getDrawable(R.drawable.overlay))// 点击时候的覆盖层 .setRetryImage(getResources().getDrawable(R.drawable.retry))//图片加载失败时显示,提示用户点击重新加载,重复加载4次还是没有加载出来的时候才会显示failureImage的图片 .setRetryImageScaleType(ScalingUtils.ScaleType.FIT_END)// 设置圆角参数 .setRoundingParams(params) .build();simpleDraweeView.setHierarchy(hierarchy);
四、DraweeController
针对Fresco来说,DrawwController是负责和image loader进行交互的,我们如果需要对Uri加载到的图片做一些额外的处理,我们可以使用这个类。SimpleDraweeView有两种设置所要加载显示图片,简单的方式就是上面介绍的setImageUI,但是如果要对加载的图片进行更多的定制,我们就需要使用到DraweeController类。
我们需要创建一个DraweeController类,然后添加自己需要的设置,添加传递给SimpleDraweeView就可以了,下面给我简单的代码示例:
DraweeController draweeController = Fresco.newDraweeControllerBuilder() .setUri(uri) .setControllerListener(controllerListener) .setOldController(simpleDraweeView.getController()) .build() ;simpleDraweeView.setController(draweeController);
大家还可以根据自己的需要设置不同的属性,下面贴出了facebook官方给出的部分方法API地址:
setOldController(simpleDraweeView.getController()),在创建新的controller的时候,指定此属性,可以节省不必要的内存分配。
setControllerListener(),设置此属性,可以添加对图片下载情况的监听。
setImageRequest(),定制ImageRequest,可以对图片添加更多的处理
ImageRequest的创建和使用,这里先不进行详细的讲解,大家可以查看一下官方的API。
五、Listener
我们在加载图片的时候,可能会有一些定制的需求,例如我们想在图片加载完成或者失败之后添加Log日志,那我们就可以使用ControllerListener 实现事件的监听。ControllerListener<ImageInfo> controllerListener = new BaseControllerListener<ImageInfo>(){ @Override public void onFailure(String id, Throwable throwable) { super.onFailure(id, throwable); // fail } @Override public void onFinalImageSet(String id, ImageInfo imageInfo, Animatable animatable) { super.onFinalImageSet(id, imageInfo, animatable); // success } @Override public void onIntermediateImageSet(String id, ImageInfo imageInfo) { super.onIntermediateImageSet(id, imageInfo); } @Override public void onIntermediateImageFailed(String id, Throwable throwable) { super.onIntermediateImageFailed(id, throwable); } };DraweeController controller = Fresco.newDraweeControllerBuilder() .setUri(uri) .setControllerListener(controllerListener) .build();simpleDraweeView.setController(controller);
onFinalImageSet会在图片加载成功之后被调用。
onFailure会在图片加载失败时候被调用。
六、配置Image Pipeline
在大多数情况下,Fresco的初始化只是需要进行Fresco.initialize(this)就可以了,但是我们也可以添加更多的的配置,我们需要使用我们提供了ImagePipelineConfig。ImagePipelineConfig config = ImagePipelineConfig.newBuilder(context) .setBitmapMemoryCacheParamsSupplier(bitmapCacheParamsSupplier) .setCacheKeyFactory(cacheKeyFactory) .setDownsampleEnabled(true) .setWebpSupportEnabled(true) .setEncodedMemoryCacheParamsSupplier(encodedCacheParamsSupplier) .setExecutorSupplier(executorSupplier) .setImageCacheStatsTracker(imageCacheStatsTracker) .setMainDiskCacheConfig(mainDiskCacheConfig) .setMemoryTrimmableRegistry(memoryTrimmableRegistry) .setNetworkFetchProducer(networkFetchProducer) .setPoolFactory(poolFactory) .setProgressiveJpegConfig(progressiveJpegConfig) .setRequestListeners(requestListeners) .setSmallImageDiskCacheConfig(smallImageDiskCacheConfig) .build();Fresco.initialize(context, config);
以上是官方给出的所有配置选项,但是我们肯定用不到这么多,只是选择自己需要的就可以了eg:我们要设置磁盘存储的存储大小:
DiskCacheConfig diskCacheConfig = DiskCacheConfig.newBuilder(this) .setBaseDirectoryPath(new File(Environment.getExternalStorageDirectory().getAbsoluteFile(),"Moe Studio")) .setBaseDirectoryName("fresco_sample") .setMaxCacheSize(200*1024*1024)//200MB .build();ImagePipelineConfig imagePipelineConfig = ImagePipelineConfig.newBuilder(this) // 配置ImagePipeline .setMainDiskCacheConfig(diskCacheConfig) .build();Fresco.initialize(this,imagePipelineConfig);
一定要记住将配置好的ImagePipelineConfig 传递给 Fresco.initialize! 否则仍旧是默认配置。
注:使用fresco加载gif图片:
主要查看导入frsco的library的版本号,如果版本号是0.08.0,此时我们不需要单独添加gif图的依赖包,但是如果是0.11.0包及以上,我们就需要单独的添加依赖包进行gif图的加载。
参考文档:
http://www.fresco-cn.org/