Android图片加载之Fresco

Fresco这个框架出的有一阵子了,也是现在非常火的一款图片加载框架.听说内部实现的挺牛逼的,虽然自己还没研究原理.不过先学了一下基本的功能,感受了一下这个框架的强大之处.本篇只说一下在xml中设置属性的相关用法.

Fresco依赖:

compile 'com.facebook.fresco:fresco:0.14.0'

重点的属性::

0.引入Fresco以及相关注意事项。
1.PlaceHolderImage占位图
2.FailureImage加载失败时显示的图片
3.RetryImage重新加载的图片
4.ProgressBarImage加载时显示的进度图片
5.BackgroundImage背景图
6.OverlayImage叠加图
7.多种效果结合加载图片
8.圆形头像，圆角头像以及背景叠加
9.图像边框

如果只是想对网络图片进行加载以及显示一些特效，那么SimpleDraweeView就基本上可以满足我们的需求了 ,Fresco是使用Image Pipeline来实现对图片的管理和获取的，SimpleDraweeView是对ImageView的一个封装，并且内部使用了Image Pipeline管理图片的思想和方式，因此我们如果没什么特殊的需求，尽量使用SimpleDraweeView.这也是官网的一个建议。

核心类：DraweeView(子类：SimpleDraweeView),DraweeHierarchy(子类:GenericDraweeHierarchy),DraweeController。(类似MVC)
DraweeView：子类也就是我们的SimpleDraweeView了，用于显示在屏幕上的视图，相当于V。
DraweeHierarchy：子类是GenericDraweeHierarchy，主要用于维护和绘制Drawable对象，以及怎样展示等等。相当于M。
DraweeController：控制器，主要和ImageLoader交互，比如说为图片设置uri，能否在失败时重新加载等等。相当于C。

/属性使用/

XML属性 意义

fadeDuration                        淡入淡出动画持续时间(单位：毫秒ms)
actualImageScaleType             实际图像的缩放类型
placeholderImage                 占位图
placeholderImageScaleType       占位图的缩放类型
progressBarImage                进度图
progressBarImageScaleType        进度图的缩放类型
progressBarAutoRotateInterval     进度图自动旋转间隔时间(单位：毫秒ms)
failureImage                     失败图
failureImageScaleType           失败图的缩放类型
retryImage                       重试图
retryImageScaleType             重试图的缩放类型
backgroundImage              背景图
overlayImage                    叠加图
pressedStateOverlayImage      按压状态下所显示的叠加图
roundAsCircle                     设置为圆形图
roundedCornerRadius           圆角半径
roundTopLeft                  左上角是否为圆角
roundTopRight                  右上角是否为圆角
roundBottomLeft              左下角是否为圆角
roundBottomRight              右下角是否为圆角
roundingBorderWidth           圆形或者圆角图边框的宽度
roundingBorderColor               圆形或者圆角图边框的颜色
roundWithOverlayColor             圆形或者圆角图底下的叠加颜色(只能设置颜色)
viewAspectRatio              控件纵横比

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

引入Fresco

compile ‘com.facebook.fresco:fresco:0.14.0’
需要注意的一点就是，我们在使用Fresco之前首先要进行初始化操作。要放在布局加载之前，否则setContentView解析xml的时候会出错。

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    Fresco.initialize(this);
    setContentView(R.layout.activity_simple_drawee);
}

1其它的属性的配置，比如加载进度、加载失败、重试图

  <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/sdv_11"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginTop="15dp"
            app:actualImageScaleType="centerCrop"
            app:failureImage="@mipmap/ic_launcher"
            app:failureImageScaleType="centerInside"
            app:retryImage="@mipmap/ic_launcher"
            app:retryImageScaleType="centerCrop"
            app:progressBarImage="@mipmap/ic_launcher"
            app:progressBarImageScaleType="centerCrop"
            app:progressBarAutoRotateInterval="5000"/>
            /**
   * 任意加载一个url,显示重新加载时图片的点击,加载失败的时候,Image pipeline会重试四次,
   * 如果还是加载不出图像,那么显示加载失败图片.
   * */
DraweeController retryImageDraweeController = Fresco.newDraweeControllerBuilder()
                .setUri("aaaa")//找个错误地址
                .setTapToRetryEnabled(true)//允许重新加载
                .setOldController(retryImageDraweeView.getController())
                .build();
retryImageDraweeView.setController(retryImageDraweeController);

2.显示一张图片

<com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/sdv_1"
            android:layout_width="90dp"
            android:layout_height="90dp"
            app:actualImageScaleType="centerCrop"/>

3、显示一张圆形图片

<com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/sdv_2"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginTop="15dp"
            app:actualImageScaleType="centerCrop"
            app:roundAsCircle="true"/>

4、显示一张圆形带边框的图片

    <com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/sdv_3"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginTop="15dp"
            app:actualImageScaleType="centerCrop"
            app:roundAsCircle="true"
            app:roundingBorderColor="#fff3cf44"
            app:roundingBorderWidth="2dp"/>

5、显示一张圆角图片

<com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/sdv_4"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginTop="15dp"
            app:actualImageScaleType="centerCrop"
            app:roundAsCircle="false"
            app:roundedCornerRadius="10dp"/>

6、设置占位图

<com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/sdv_7"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginTop="15dp"
            app:actualImageScaleType="centerCrop"
            app:placeholderImage="@mipmap/ic_launcher"
            app:placeholderImageScaleType="centerCrop" />

7、带动画的显示（从半透明到不透明）

<com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/sdv_8"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginTop="15dp"
            app:actualImageScaleType="centerCrop"
            app:fadeDuration="3000"/>

8、图层叠加显示

<com.facebook.drawee.view.SimpleDraweeView
            android:id="@+id/sdv_10"
            android:layout_width="90dp"
            android:layout_height="90dp"
            android:layout_marginTop="15dp"
            app:actualImageScaleType="centerCrop"
            app:overlayImage="@mipmap/ic_launcher"/>