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)