Fresco图片库的基本使用

一、在使用DataBinding的前提下，在XML布局文件中的使用如下：

1、从网络加载并显示一张图片

    <com.trident.framework.image.MDraweeView
            android:id="@+id/img_bg"
            android:layout_width="match_parent"
            android:layout_height="261dp"
            app:actualImageScaleType="centerCrop"
            app:url="@{info.bgimg.photo_url}" />

2、从网络加载并显示一张圆形图片

    <com.trident.framework.image.MDraweeView
            android:id="@+id/img_head"
            android:layout_width="64dp"
            android:layout_height="64dp"
            app:url="@{user.face_url}"
            app:actualImageScaleType="centerCrop"
            app:roundAsCircle="true" />

3、从网络加载并显示一张圆形带边框的图片

  <com.trident.framework.image.MDraweeView
            android:id="@+id/img_head"
            android:layout_width="64dp"
            android:layout_height="64dp"
            app:actualImageScaleType="centerCrop"
            app:roundAsCircle="true"
            app:roundingBorderColor="@color/ch6"
            app:roundingBorderWidth="1dp"
            app:url="@{user.face_url}" />

4、从网络加载并显示一张圆角图片

   <com.trident.framework.image.MDraweeView
            android:layout_width="64dp"
            android:layout_height="64dp"
            app:actualImageScaleType="centerCrop"
            app:url="@{user.face_url}"
            app:roundAsCircle="false"
            app:roundedCornerRadius="10dp"
            app:roundTopLeft="false"
            app:roundTopRight="true"
            app:roundBottomLeft="true"
            app:roundBottomRight="true"/>

5、常用的一些属性：

<com.trident.framework.image.MDraweeView
            android:id="@+id/mdv"
            android:layout_width="100dp"
            android:layout_height="100dp"
            app:actualImageScaleType="focusCrop"
            app:placeholderImage="@drawable/city_images_not_loaded"
            app:placeholderImageScaleType="focusCrop"
            app:progressBarImage="@drawable/city_images_not_loaded"
            app:progressBarImageScaleType="focusCrop"
            app:progressBarAutoRotateInterval="5000"
            app:failureImage="@drawable/city_images_not_loaded"
            app:failureImageScaleType="focusCrop"
            app:retryImage="@drawable/city_images_not_loaded"
            app:retryImageScaleType="focusCrop"
            app:fadeDuration="500"
            app:backgroundImage="@android:color/holo_orange_light"
            app:roundAsCircle="true"
            app:roundedCornerRadius="30dp"
            app:roundTopLeft="false"
            app:roundTopRight="true"
            app:roundBottomLeft="true"
            app:roundBottomRight="true"
            app:roundingBorderWidth="10dp"
            app:roundingBorderColor="@android:color/black"/>

各个属性的解释：

  /*
            app:actualImageScaleType="focusCrop" // 设置图片缩放
            app:placeholderImage="@drawable/city_images_not_loaded" // 在目标图片未显示之前显示的图片（默认显示的图片）
            app:failureImage="@drawable/city_images_not_loaded" // 加载目标图片失败的时候显示的图片（若加载失败与默认的图片是同一张，这个属性可以不写）
            app:retryImage="@drawable/city_images_not_loaded" // 目标图片加载失败，提示用户点击重新加载的图片（会覆盖failureImage设置的图片）
            app:progressBarImage="@drawable/city_images_not_loaded" // 正在加载时，显示的图片（一张转菊花的图片）
            app:roundAsCircle="true" // 设置成圆形图
            app:roundedCornerRadius="30dp" // 设置圆角的大小
            app:roundTopLeft="false" // 设置左上角不是圆角
            app:roundTopRight="true" // 设置右上角是圆角
            app:roundingBorderWidth="10dp" // 设置圆形边框的宽度
            app:roundingBorderColor="@android:color/black"  // 设置圆形边框的颜色值
            app:fadeDuration="500" // 图片显示的渐变动画持续的时长
        */

需要注意的：
a、记的要在XML布局文件的根节点添加 xmlns:app="http://schemas.android.com/apk/res-auto" 这一行
b、android:layout_width="100dp"和android:layout_height="100dp"属性不支持wrap_content

6、MDraweeView的源码如下：

package com.trident.framework.image;

import android.content.Context;
import android.util.AttributeSet;

import com.facebook.drawee.generic.GenericDraweeHierarchy;
import com.facebook.drawee.view.SimpleDraweeView;

/**
 * Created by android_ls on 16/9/9.
 */
public class MDraweeView extends SimpleDraweeView {

    public MDraweeView(Context context, GenericDraweeHierarchy hierarchy) {
        super(context, hierarchy);
    }

    public MDraweeView(Context context) {
        super(context);
    }

    public MDraweeView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public MDraweeView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

    public MDraweeView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }
}

二、没有使用DataBinding的前提下，在代码中的使用如下：

1、在XML布局文件中

        <com.trident.framework.image.MDraweeView
            android:id="@+id/image"
            android:layout_width="match_parent"
            android:layout_height="261dp"
            app:actualImageScaleType="centerCrop" />

2、在代码中调用loadImage(MDraweeView simpleDraweeView, String url)方法：

 ImageLoader.loadImage((MDraweeView) holder.getView(R.id.image), s.small_img);

ImageLoader的源码如下：

package com.trident.framework.image;

import android.databinding.BindingAdapter;
import android.graphics.Bitmap;
import android.net.Uri;
import android.text.TextUtils;
import android.util.Log;

import com.facebook.common.executors.CallerThreadExecutor;
import com.facebook.common.references.CloseableReference;
import com.facebook.datasource.BaseDataSubscriber;
import com.facebook.datasource.DataSource;
import com.facebook.datasource.DataSubscriber;
import com.facebook.drawee.backends.pipeline.Fresco;
import com.facebook.drawee.interfaces.DraweeController;
import com.facebook.imagepipeline.core.ImagePipeline;
import com.facebook.imagepipeline.image.CloseableBitmap;
import com.facebook.imagepipeline.image.CloseableImage;
import com.facebook.imagepipeline.request.ImageRequest;
import com.facebook.imagepipeline.request.ImageRequestBuilder;
import com.meiliyue.MyApp;

/**
 * Created by android_ls on 16/9/8.
 */
public class ImageLoader {

    @BindingAdapter({"url"})
    public static void loadImage(MDraweeView simpleDraweeView, String url) {
        if (TextUtils.isEmpty(url)) {
            return;
        }

        Uri uri = Uri.parse(url);
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setOldController(simpleDraweeView.getController())
                .setUri(uri)
                .build();
        simpleDraweeView.setController(controller);
    }

    @BindingAdapter({"url_small"})
    public static void loadImageSmall(MDraweeView simpleDraweeView, String url) {
        if (TextUtils.isEmpty(url)) {
            return;
        }

        Uri uri = Uri.parse(url);
        ImageRequest request = ImageRequestBuilder.newBuilderWithSource(uri)
                .setCacheChoice(ImageRequest.CacheChoice.SMALL)
                .build();
        DraweeController controller = Fresco.newDraweeControllerBuilder()
                .setImageRequest(request)
                .setOldController(simpleDraweeView.getController())
                .build();
        simpleDraweeView.setController(controller);
    }

    /**
     * 根据提供的图片URL加载原始图
     *
     * @param url 图片URL
     * @param loadImageResult LoadImageResult
     */
    public static void loadOriginalImage(String url, final LoadImageResult loadImageResult) {
        if (TextUtils.isEmpty(url)) {
            return;
        }

        Uri uri = Uri.parse(url);
        ImagePipeline imagePipeline = Fresco.getImagePipeline();
        ImageRequestBuilder builder = ImageRequestBuilder.newBuilderWithSource(uri);
        ImageRequest imageRequest = builder.build();
        DataSource<CloseableReference<CloseableImage>> dataSource = imagePipeline.fetchDecodedImage(imageRequest, MyApp.gApp);
        DataSubscriber dataSubscriber = new BaseDataSubscriber<CloseableReference<CloseableBitmap>>() {
            @Override
            public void onNewResultImpl(DataSource<CloseableReference<CloseableBitmap>> dataSource) {
                if (!dataSource.isFinished()) {
                    return;
                }

                CloseableReference<CloseableBitmap> imageReference = dataSource.getResult();
                if (imageReference != null) {
                    final CloseableReference<CloseableBitmap> closeableReference = imageReference.clone();
                    try {
                        CloseableBitmap closeableBitmap = closeableReference.get();
                        Bitmap bitmap = closeableBitmap.getUnderlyingBitmap();
                        if (bitmap != null && !bitmap.isRecycled()) {
                            loadImageResult.onResult(bitmap);
                        }
                    } finally {
                        imageReference.close();
                        closeableReference.close();
                    }
                }
            }

            @Override
            public void onFailureImpl(DataSource dataSource) {
                Throwable throwable = dataSource.getFailureCause();
                if (throwable != null) {
                    Log.e("ImageLoader", "onFailureImpl = " + throwable.toString());
                }
            }
        };
        dataSource.subscribe(dataSubscriber, CallerThreadExecutor.getInstance());
    }

}

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

更详细的使用讲解，请看我写的这篇文章 Android图片加载神器之Fresco，基于各种使用场景的讲解