转换黑白的加载控件

转换黑白的加载控件

看到腾讯动漫的一个加载控件是自己的图标由黑白变成彩色，就研究了一下写了一个类似效果的控件.
为了实现这个效果，开始我觉得用两张bitmap重叠实现最好了，先将一张黑白化，在让两张重叠的现实。后来我发现了 paint的setColorFilter的方法，通过这个方法我们可以轻松渲染出黑白的图片。闲话少说上代码：

public class GraphDrawable extends Drawable {
    public  static int MAX_NUM = 100;


    private Paint mPaint;
    private Paint mBPaint;

    private Bitmap bitmap;

    private int CurrentNum;
    private int MaxNum = MAX_NUM;

    private int height;
    private int width;

    private Rect mSrcRect = new Rect();
    private Rect mSrcRect2 = new Rect();
    private Rect mDesRect = new Rect();
    private Rect mDesRect2 = new Rect();

    private int colorheight;
    private int whiteheight;

    private int colorbitmapheight;
    private int whitebitmapheight;

    public GraphDrawable() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mBPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        ColorMatrixColorFilter colorFilter = new ColorMatrixColorFilter(new float[]{
                0.33F, 0.59F, 0.11F, 0, 0,
                0.33F, 0.59F, 0.11F, 0, 0,
                0.33F, 0.59F, 0.11F, 0, 0,
                0, 0, 0, 1, 0,
        });
        mBPaint.setColorFilter(colorFilter);
    }



    public void setFrame(int height,int width){
        this.height = height;
        this.width = width;
    }


    public void setBitmap(Bitmap bitmap){
        this.bitmap = bitmap;
    }

    public void setPercent(int percentnum){
        if(percentnum <= MaxNum) {
            this.CurrentNum = percentnum;

            colorbitmapheight = (int)((double)CurrentNum / (double)MaxNum * bitmap.getHeight() );
            whitebitmapheight = bitmap.getHeight() - colorbitmapheight;

            colorheight =(int)((double)colorbitmapheight / (double)bitmap.getHeight() * height );
            whiteheight = height - colorheight;
            Log.d("height","bitmap height : " + whitebitmapheight + "r height : " + whiteheight);
        }
    }

    @Override
    public void draw(Canvas canvas) {
        if(bitmap != null) {


            mSrcRect.set(0, 0, bitmap.getWidth(), whitebitmapheight);

            mSrcRect2.set(0,whitebitmapheight,bitmap.getWidth(),bitmap.getHeight());

            mDesRect.set(0, 0, width, whiteheight);

            mDesRect2.set(0, whiteheight,width,height);

            canvas.drawBitmap(bitmap, mSrcRect, mDesRect, mBPaint);

            canvas.drawBitmap(bitmap,mSrcRect2,mDesRect2,mPaint);
        }
    }

    @Override
    public void setAlpha(int alpha) {

    }

    @Override
    public void setColorFilter(ColorFilter colorFilter) {

    }

    @Override
    public int getOpacity() {
        return PixelFormat.TRANSLUCENT;
    }
}

我将图片的渲染方法放到了GraphDrawable这个类中，而控制展现的在ImageLoadView这个View中

public class ImageLoadView extends View {
    private GraphDrawable mDrawable;


    public ImageLoadView(Context context) {
        super(context);
    }

    public ImageLoadView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public ImageLoadView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    public void setImageResource(int id){
        mDrawable = new GraphDrawable();
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(),id);
        mDrawable.setBitmap(bitmap);
        invalidate();
    }

    public void percent(int percent){
        mDrawable.setPercent(percent);
        invalidate();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        if(mDrawable != null){
            mDrawable.setFrame(getHeight(),getWidth());
            mDrawable.draw(canvas);
        }
    }
}

效果如下图