Android知识总结：Universal-Imageloader学习笔记3 显示自定义形状头像

显示自定义形状

      昨天我们分析了ImageLoader的主业务流程，现在我们把它应用到项目的实践中。

        项目中我们需要显示圆形图片，带圆角的图片，以及图片上叠加其他标记，我们可以分别制作相应的自定义控件，

ImagerLoader为我们建立了BitmapDisplayer，实现这个接口并将其设置到下载options中。

       在ImageLoader.getInstance().displayImage中，将options填入，这样，就可以在方形的ImageView中显示我们自

定义的任何形状的图形了。

效果与实现

如图，现在我们为圆形图片上加一个小的修饰图片，这样，我们只需实现BitmapDisplayer接口，自定义一

个圆形Drawable，并在其右上角加一个性别标识即可。以后，无论什么样的ImageView，我们都可以直接下载图片，

显示时自动变成圆形带小标志的图片。

下面是具体实现BitmapDisplayer，实现过程可以参考ImageLoader中自带的例子，我们稍加改动。

/**
* 带性别标识的头像
* Created by vonchenchen on 2015/12/2 0002.
*/
public class HeaderWithGender implements BitmapDisplayer {
protected final Integer strokeColor;
protected final float strokeWidth;
protected int mGender;

public HeaderWithGender(Integer strokeColor, int gender) {
this(strokeColor, 0, gender);
}

public HeaderWithGender(Integer strokeColor, float strokeWidth, int gender) {
this.strokeColor = strokeColor;
this.strokeWidth = strokeWidth;
this.mGender = gender;
}

@Override
public void display(Bitmap bitmap, ImageAware imageAware, LoadedFrom loadedFrom) {
if (!(imageAware instanceof ImageViewAware)) {
throw new IllegalArgumentException("ImageAware should wrap ImageView. ImageViewAware is expected.");
}

imageAware.setImageDrawable(new CircleDrawable(bitmap, strokeColor, strokeWidth, mGender));
}

public static class CircleDrawable extends Drawable {

protected float radius;

protected final RectF mRect = new RectF();
protected final RectF mBitmapRect;
protected final BitmapShader bitmapShader;
protected final Paint paint;
protected final Paint strokePaint;
protected final Paint mGenderIconPaint;
protected final float strokeWidth;
protected float strokeRadius;

public static final int GENDER_MALE = 1;
public static final int GENDER_FEMALE = 2;

protected int mGender;
protected Bitmap mGenderBitmap = null;
protected int mMarginLeft;

public CircleDrawable(Bitmap bitmap, Integer strokeColor, float strokeWidth, int gender) {
radius = Math.min(bitmap.getWidth(), bitmap.getHeight()) / 2;

mMarginLeft = (int)UIUtils.getResources().getDimension(R.dimen.px_91);

bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
//图片原始区域
mBitmapRect = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());

mGender = gender;
if(mGender != GENDER_MALE || mGender != GENDER_FEMALE){
mGender = GENDER_MALE;
}

//给画笔设置Shader
paint = new Paint();
paint.setAntiAlias(true);
paint.setShader(bitmapShader);
paint.setFilterBitmap(true);
paint.setDither(true);

mGenderIconPaint =  new Paint();
mGenderIconPaint.setAntiAlias(true);

if (strokeColor == null) {
strokePaint = null;
} else {
//绘制边缘的画笔
strokePaint = new Paint();
strokePaint.setStyle(Paint.Style.STROKE);
strokePaint.setColor(strokeColor);
strokePaint.setStrokeWidth(strokeWidth);
strokePaint.setAntiAlias(true);
}
this.strokeWidth = strokeWidth;
strokeRadius = radius - strokeWidth / 2;
}

//边界变化时调用   这里是将原始区域的图片映射到新的圆形区域
@Override
protected void onBoundsChange(Rect bounds) {
super.onBoundsChange(bounds);
//扩一块空间
mRect.set(0, 0, bounds.width(), bounds.height());
//取长宽中短的值作为直径
radius = Math.min(bounds.width(), bounds.height()) / 2;
strokeRadius = radius - strokeWidth / 2;

// Resize the original bitmap to fit the new bound
Matrix shaderMatrix = new Matrix();
//将原始区域的图片"压"到新的圆形区域
shaderMatrix.setRectToRect(mBitmapRect, mRect, Matrix.ScaleToFit.FILL);
bitmapShader.setLocalMatrix(shaderMatrix);
}

@Override
public void draw(Canvas canvas) {
//绘制Drawable内部图形
canvas.drawCircle(radius, radius, radius, paint);
if (strokePaint != null) {
//绘制边界
canvas.drawCircle(radius, radius, strokeRadius, strokePaint);
}

if(mGender == GENDER_MALE){
if(mGenderBitmap == null){
mGenderBitmap = BitmapFactory.decodeResource(UIUtils.getResources(), R.mipmap.ic_boy);
}
}else if(mGender == GENDER_FEMALE){
if(mGenderBitmap == null){
mGenderBitmap = BitmapFactory.decodeResource(UIUtils.getResources(), R.mipmap.ic_gril);
}
}

canvas.drawBitmap(mGenderBitmap, mMarginLeft, 0,mGenderIconPaint);
}

@Override
public int getOpacity() {
//半透明
return PixelFormat.TRANSLUCENT;
}

@Override
public void setAlpha(int alpha) {
paint.setAlpha(alpha);
}

@Override
public void setColorFilter(ColorFilter cf) {
paint.setColorFilter(cf);
}
}
}

调用方法

mOptionHeader = new DisplayImageOptions.Builder()
.showImageOnLoading(Constants.DEFAULT_lOADING_IAMGE)
.showImageForEmptyUri(Constants.DEFAULT_IAMGE)
.showImageOnFail(Constants.DEFAULT_IAMGE)
.cacheInMemory(true)                             //是否缓存到内存
.cacheOnDisk(true)                               //是否缓存到硬盘
.considerExifParams(true)                        //是否使用Exif信息 （Exif信息可以理解为JPEG图中加入相机相关信息）
// 添加显示的图片形状
.displayer(new HeaderWithGender(0, HeaderWithGender.CircleDrawable.GENDER_FEMALE)).build();

ImageLoader.getInstance().displayImage("http://xxxxxxxxxx.jpg", mImageView, mOptionHeader);

除了http，查阅官方文档，我们还可以使用以下格式的uri

"http://site.com/image.png" // from Web
"file:///mnt/sdcard/image.png" // from SD card
"file:///mnt/sdcard/video.mp4" // from SD card (video thumbnail)
"content://media/external/images/media/13" // from content provider
"content://media/external/video/media/13" // from content provider (video thumbnail)
"assets://image.png" // from assets
"drawable://" + R.drawable.img // from drawables (non-9patch images)