ImageLoader源码解析(四) 补充 Displayer的实现

ImageLoader源码解析(四) 补充 Displayer的实现

1 前言

一般来说,如果说到原型图片,或者边框,或者特别形状的图片处理,那么我们可能第一个想到的是 自定义ImageView去处理,在draw方法里写我们的逻辑
这篇文章说一下除了自定义ImageView的另外一种处理,那就是自定义一个Drawable,
这就是ImageLoader中提供的displayer的对于图片转换的解决方案

2 基础知识

• Drawable
• paint
• BitmapShader
• Bitmap
• Matrix
• 自定义View涉及到的Pain,Rect,Canvas等,如果对自定义View不了解,建议去看下自定义View,主要是绘制那块的处理,其实自定义Drawable和自定义View真的很像

3 解析

Imageloader中提供的有很多,最常用的,就是圆形,弧形的处理了,我们来看这两个是怎么写的

3.1 CircleBitmapDisplayer圆形Drawable

public class CircleBitmapDisplayer implements BitmapDisplayer {

    /**
     * 边框的颜色
     */
    protected final Integer strokeColor;
    /**
     * 边框宽度
     */
    protected final float strokeWidth;

    public CircleBitmapDisplayer() {
        this(null);
    }

    public CircleBitmapDisplayer(Integer strokeColor) {
        this(strokeColor, 0);
    }

    public CircleBitmapDisplayer(Integer strokeColor, float strokeWidth) {
        this.strokeColor = strokeColor;
        this.strokeWidth = strokeWidth;
    }

    @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));
    }

    public static class CircleDrawable extends Drawable {

        /**
         * 弧度
         */
        protected float radius;
        /**
         * 绘制范围
         */
        protected final RectF mRect = new RectF();
        /**
         * bitmap范围
         */
        protected final RectF mBitmapRect;
        protected final BitmapShader bitmapShader;
        /**
         * 图形画笔
         */
        protected final Paint paint;
        /**
         * 边框画笔
         */
        protected final Paint strokePaint;
        /**
         * 边框宽度
         */
        protected final float strokeWidth;
        /**
         * 边框的弧度
         */
        protected float strokeRadius;

        public CircleDrawable(Bitmap bitmap, Integer strokeColor, float strokeWidth) {

            radius = Math.min(bitmap.getWidth(), bitmap.getHeight()) / 2;

            bitmapShader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            mBitmapRect = new RectF(0, 0, bitmap.getWidth(), bitmap.getHeight());

            paint = new Paint();
            //设置是否使用抗锯齿功能，会消耗较大资源，绘制图形速度会变慢。但是效果更好
            paint.setAntiAlias(true);
            paint.setShader(bitmapShader);
            //如果该项设置为true，则图像在动画进行中会滤掉对Bitmap图像的优化操作，加快显示速度
            paint.setFilterBitmap(true);
            //设定是否使用图像抖动处理，会使绘制出来的图片颜色更加平滑和饱满，图像更加清晰
            paint.setDither(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;
        }

        /**
         * 范围发生变化时,可能如果imagview大小发生变化,这里会调用吧
         *
         * @param bounds
         */
        @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;

            //重新设置bitmap的大小去适应新的绘制范围,这里其实就是fitxy处理
            Matrix shaderMatrix = new Matrix();
            /**
             * 设置变换规则,自动计算mBitmapRect->mRect变换的规则<br/>
             * 第三个参数,有FILL,start,end,center,还记得,ImageView的ScaleType吗,对比理解<br/>
             * Fill就是FitXY
             */
            shaderMatrix.setRectToRect(mBitmapRect, mRect, Matrix.ScaleToFit.FILL);
            //为bitmapshader设置变换矩阵
            bitmapShader.setLocalMatrix(shaderMatrix);
        }

        @Override
        public void draw(Canvas canvas) {
            //绘制bitmap
            canvas.drawCircle(radius, radius, radius, paint);
            if (strokePaint != null) {
                //绘制边框
                canvas.drawCircle(radius, radius, strokeRadius, strokePaint);
            }
        }
        //-------------------------下面是通过设置画笔,然后重绘,来支持View的一些设置(透明度,颜色过滤,也可以添加其他的属性支持)-------------------------------

        /**
         * 获取透明度的格式,看一下父类中的注释
         * {@link Drawable#getOpacity() }
         * <p>
         * 只有四个返回值
         * {@link android.graphics.PixelFormat}:
         * {@linkplain android.graphics.PixelFormat#UNKNOWN 未知},
         * {@linkplain android.graphics.PixelFormat#TRANSLUCENT 系统选择支持半透明的格式 bits},
         * {@linkplain android.graphics.PixelFormat#TRANSPARENT 系统选择支持透明度的格式 0-1 }, or
         * {@linkplain android.graphics.PixelFormat#OPAQUE 系统选择不透明格式（不需要alpha位）}.
         *
         * @return
         */
        @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);
        }
    }
}

注释很详细了,其实自定义Drawable,很像自定义一个View,我没有看过View的源码,现在让我怀疑View中其实操控的也是绘制一个Drawable,然后将Drawable显示到View中

3.2 RoundedBitmapDisplayer 弧形图像绘制

@Override
        public void draw(Canvas canvas) {
            //貌似唯一有变化的就是这里了吧,DrawCircle变成了Round
            canvas.drawRoundRect(mRect, cornerRadius, cornerRadius, paint);
        }

4 参考

Android 自定义Drawable
http://www.cnblogs.com/a284628487/p/5204170.html

http://blog.csdn.net/lmj623565791/article/details/43752383

Matrix:
http://blog.csdn.net/flash129/article/details/8234599

5 解析源码

https://github.com/yizeliang/Android-Universal-Image-Loader