转换黑白的加载控件
看到腾讯动漫的一个加载控件是自己的图标由黑白变成彩色,就研究了一下写了一个类似效果的控件.
为了实现这个效果,开始我觉得用两张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);
}
}
}
效果如下图