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，基于各种使用场景的讲解