一、在使用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,基于各种使用场景的讲解