Android-Fresco详细学习

2017/7/10 posted in  Android

Android Fresco网络图片加载库

Fresco是Facebook最新推出的一款用于Android应用中展示图片的强大图片库,可以从网络、本地存储和本地资源中加载图片。相对于ImageLoader,拥有更快的图片下载速度以及可以加载和显示gif图等诸多优势,是个很好的图片框架。

github地址https://github.com/facebook/fresco

基本的用法:

  1. 导入 Android Studio 或者 Gradle dependencies {
    compile 'com.facebook.fresco:fresco:0.9.0+'
    }
  2. 在xml中引入SimpleDraweeView SQL <com.facebook.drawee.view.SimpleDraweeView
    android:id="@+id/image_view"
    android:layout_width="20dp"
    android:layout_height="20dp"
    fresco:placeholderImage="@drawable/my_drawable"
    />
    注意:1、在SimpleDraweeView的父控件或者根节点中配置xmlns:fresco="http://schemas.android.com/apk/res-auto";
  3. 配置网络权限
  4. 在Java代码中开始加载图片 Uri uri = Uri.parse("https://raw.githubusercontent.com/facebook/fresco/gh-pages/static/fresco-logo.png");
    SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);
    draweeView.setImageURI(uri);

URIs的使用

类型 Scheme 示例
远程图片 http:// 和 https:// HttpURLConnection 或者参考  使用其他网络加载方案
本地文件 file:// FileInputStream
Content Provider content:// ContentResolver
asset目录下的资源 asset:// AssetManager
res目录下的资源 res:// Resources.openRawResource

res 示例:Uri uri = Uri.parse("res://包名(实际可以是任何字符串甚至留空)/" + R.drawable.ic_launcher);*
*注意:Fresco 不支持 相对路径的URI. 所有的URI都必须是绝对路径,并且带上该URI的scheme。

在XML中使用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" //图片加载失败时显示,提示用户点击重新加载,重复加载4次还是没有加载出来的时候才会显示failureImage的图片  
    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" //边框颜色
  />

说明:必须声明 android:layout_width 和 android:layout_height,否则将无法正确加载图像,另外不支持 wrap_content 属性,但也有例外的时候,如果想固定控件的宽高比,则可以使用wrap_content,并通过在xml代码中设置fresco:viewAspectRatio="小数"或者在Java代码中设置mSimpleDraweeView.setAspectRatio(1.33f);即可。

类型 描述
center 居中,无缩放
centerCrop 保持宽高比缩小或放大,是的两边都大于或等于边界,且宽和高契合显示边界,居中显示
focusCrop 同centerCrop,但居中点不是中点,而是指定的某个点
centerInside 缩放图片使两边都在显示边界内,居中显示。和fitCenter不同,不会对图片进行放大。如果尺寸大于显示边界,则保持宽高比例缩小图片。
fitCenter 保持宽高比,缩小或者放大,使得图片完全显示在显示边界内,且宽或高契合显示边界,居中显示。
fitStart 同上,但不居中,和显示边界左上对齐。
fitEnd 同fitCenter,但不居中,和显示边界右下对齐。
fitXY 不保存宽高比,填充满显示边界。
none 如果要使用tile mode显示,则需要设置为none

在Java中自定义显示图

一般情况下,在XML设置显示效果即可, 如果想更多定制化,可以这样:
创建一个 builder 然后设置给 SimpleDraweeView:

List<Drawable> backgroundsList;
List<Drawable> overlaysList;
GenericDraweeHierarchyBuilder builder =
    new GenericDraweeHierarchyBuilder(getResources());
GenericDraweeHierarchy hierarchy = builder
    .setFadeDuration(300)
    .setPlaceholderImage(new MyCustomDrawable())
    .setBackgrounds(backgroundList)
    .setOverlays(overlaysList)
    .build();
mSimpleDraweeView.setHierarchy(hierarchy);

注意:请不要多次调用setHierarchy,即使这个View是可回收的。创建 DraweeHierarchy 的较为耗时的一个过程,应该多次利用。

修改 DraweeHierarchy

DraweeHierarchy 的一些属性可以在运行时改变。
要改变这些属性,首先获取一个引用:
GenericDraweeHierarchy hierarchy = mSimpleDraweeView.getHierarchy();

修改占位图

修改占位图为资源id:hierarchy.setPlaceholderImage(R.drawable.placeholderId);
或者修改为一个 Drawable:Drawable drawable;

hierarchy.setPlaceholderImage(drawable);

改变图像的显示

修改缩放类型:
hierarchy.setActualImageScaleType(ScalingUtils.ScaleType.CENTER_INSIDE);

如果你选择缩放类型为 focusCrop,需要指定一个居中点:hierarchy.setActualImageFocusPoint(point);
你可以为图像添加一个 color filter:

ColorFilter filter;
// 创建filter
hierarchy.setActualImageColorFilter(filter);

圆角

除了圆角显示方式(原来为圆角的不能修改为圆圈,反之亦然),其他圆角相关的呈现参数, 具体参见这里 是可以动态修改的。
如下: 获取DraweeHierarchy的圆角显示参数,修改圆角半径为10。

RoundingParams roundingParams = hierarchy.getRoundingParams();
roundingParams.setCornersRadius(10);
hierarchy.setRoundingParams(roundingParams);