Android开发笔记（九十五）自定义Drawable

Drawable

Bitmap是Android对图像的定义描述，而Drawable则是对图像的展现描述，在View视图中显示图像都是通过Drawable来实现的。其中有关Bitmap的介绍参见《Android开发笔记（九十四）图片的基本加工》，有关Drawable的介绍参见《Android开发笔记（七）初识Drawable》。虽然ImageView提供了setImageBitmap方法，但查看该方法的源码，会发现内部还是调用setImageDrawable方法，同时利用BitmapDrawable完成Bitmap与Drawable的转换。

    public void setImageBitmap(Bitmap bm) {        // if this is used frequently, may handle bitmaps explicitly        // to reduce the intermediate drawable object        setImageDrawable(new BitmapDrawable(mContext.getResources(), bm));    }

一般我们要自定义图像控件，通常基于ImageView来自定义，例如ImageButton。其实对于一些简单的图像处理，我们可以自定义Drawable来实现，比如说裁剪图片、给图片添加文本、给图片添加简单动画等等。

圆形、椭圆、圆角矩形的Drawable

对图片进行简单形状的裁剪，这是很常见的操作，例如手机桌面上的APP图标是圆角正方形样式，例如csdn客户端的用户头像是圆形图片等等。这些简单的裁剪，可直接使用Canvas类的相关方法来实现，比如调用drawCircle方法完成圆形裁剪，调用drawOval方法完成椭圆形裁剪，调用drawRoundRect方法完成圆角矩形裁剪，更多有关Canvas的介绍参见《Android开发笔记（十三）视图绘制的几个方法》。


因为裁剪图片一般是处理位图，所以我们可基于BitmapDrawable来自定义相关Drawable，这样只需自己实现少数方法（构造函数、draw函数等等）。需要注意的是，由于我们要画的是裁剪后的图片，因此不能直接调用drawBitmap方法，而要把Bitmap对象塞入BitmapShader对象中，然后调用Paint的setShader方法，把图像作为阴影来绘制，从而实现裁剪显示的功能。


下面是自定义圆形、椭圆、圆角矩形的Drawable效果图



下面是圆形裁剪图像（CircleDrawable）的代码例子：

import android.content.res.Resources;import android.graphics.Bitmap;import android.graphics.BitmapShader;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.Shader.TileMode;import android.graphics.drawable.BitmapDrawable;public class CircleDrawable extends BitmapDrawable {private Paint mPaint;public CircleDrawable(Resources res, Bitmap bitmap) {super(res, bitmap);BitmapShader bitmapShader = new BitmapShader(bitmap,TileMode.CLAMP, TileMode.CLAMP);mPaint = new Paint();mPaint.setAntiAlias(true);  //抗锯齿mPaint.setShader(bitmapShader);}@Overridepublic void draw(Canvas canvas) {int width = getBitmap().getWidth();int height = getBitmap().getHeight();int radius = Math.min(width, height) / 2;int x_pos = (width>radius+radius)?width/2:radius;int y_pos = (height>radius+radius)?height/2:radius;canvas.drawCircle(x_pos, y_pos, radius, mPaint);}}

下面是椭圆形裁剪图像（OvalDrawable）的代码例子：

import android.content.res.Resources;import android.graphics.Bitmap;import android.graphics.BitmapShader;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Shader.TileMode;import android.graphics.drawable.BitmapDrawable;public class OvalDrawable extends BitmapDrawable {private Paint mPaint;public OvalDrawable(Resources res, Bitmap bitmap) {super(res, bitmap);BitmapShader bitmapShader = new BitmapShader(bitmap,TileMode.CLAMP, TileMode.CLAMP);mPaint = new Paint();mPaint.setAntiAlias(true);  //抗锯齿mPaint.setShader(bitmapShader);}@Overridepublic void draw(Canvas canvas) {int width = getBitmap().getWidth();int height = getBitmap().getHeight();RectF oval = new RectF(0, 0, width, height);canvas.drawOval(oval, mPaint);}}

下面是圆角矩形裁剪图像（RoundDrawable）的代码例子：

import android.content.res.Resources;import android.graphics.Bitmap;import android.graphics.BitmapShader;import android.graphics.Canvas;import android.graphics.Paint;import android.graphics.RectF;import android.graphics.Shader.TileMode;import android.graphics.drawable.BitmapDrawable;public class RoundDrawable extends BitmapDrawable {private Paint mPaint;private RectF mRect;private int mCornerRadius = 10;public RoundDrawable(Resources res, Bitmap bitmap) {super(res, bitmap);BitmapShader bitmapShader = new BitmapShader(bitmap,TileMode.CLAMP, TileMode.CLAMP);mPaint = new Paint();mPaint.setAntiAlias(true);  //抗锯齿mPaint.setShader(bitmapShader);}public void setCornerRadius(int corner_radius) {mCornerRadius = corner_radius;}public int getCornerRadius() {return mCornerRadius;}@Overridepublic void setBounds(int left, int top, int right, int bottom) {super.setBounds(left, top, right, bottom);mRect = new RectF(left, top, right, bottom);}@Overridepublic void draw(Canvas canvas) {canvas.drawRoundRect(mRect, mCornerRadius, mCornerRadius, mPaint);}}

添加水印的Drawable

给图片添加水印文字，这也是一种常见的图片加工操作。通过自定义Drawable，可以不用修改原图片，直接在展示时添加水印文本，更方便更快捷。添加文本操作可调用Canvas类的drawText方法，至于文本颜色、文本大小等属性的设置，可通过Paint类来实现。比如设置文本颜色，调用的是Paint类的setColor；设置文本大小，调用的是Paint类的setTextSize；设置文本对齐方式，调用的是Paint类的setTextAlign。


下面是自定义添加水印的Drawable效果图



下面是添加水印图像（MarkDrawable）的代码例子：

import android.content.res.Resources;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.Color;import android.graphics.Paint;import android.graphics.Paint.FontMetrics;import android.graphics.Point;import android.graphics.drawable.BitmapDrawable;public class MarkDrawable extends BitmapDrawable {private static final String TAG = "MarkDrawable";private Paint mPaint;private String mText;private int mTextColor;private float mTextSize;private int mTextAlign;public static int ALIGN_TOP = 1;public static int ALIGN_CENTER = 2;public static int ALIGN_BOTTOM = 3;public MarkDrawable(Resources res, Bitmap bitmap) {super(res, bitmap);mTextColor = Color.GREEN;mTextSize = 40f;mTextAlign = ALIGN_CENTER;}public void setTextColor(int text_color) {mTextColor = text_color;}public int getTextColor() {return mTextColor;}public void setTextSize(float text_size) {mTextSize = text_size;}public float getTextSize() {return mTextSize;}public void setTextAlign(int text_align) {mTextAlign = text_align;}public int getTextAlign() {return mTextAlign;}public void setText(String text) {    mText = text;    mPaint = new Paint();    mPaint.setAntiAlias(true);    mPaint.setColor(mTextColor);    mPaint.setTextSize(mTextSize);    mPaint.setTextAlign(Paint.Align.CENTER);}@Override  public void draw(Canvas canvas) {super.draw(canvas);if (mPaint != null) {Point point = getFontScope(mText, mTextSize);int width = getBitmap().getWidth();int height = getBitmap().getHeight();int x_pos = (width>point.x)?(width/2):0;int y_pos = 0;if (mTextAlign == ALIGN_TOP) {y_pos = point.y;} else if (mTextAlign == ALIGN_CENTER) {y_pos = height / 2;} else if (mTextAlign == ALIGN_BOTTOM) {y_pos = height - point.y/2;}    canvas.drawText(mText, x_pos, y_pos, mPaint);}}//根据字体大小获得文字宽度和高度private Point getFontScope(String text, float size) {Point point = new Point();    Paint paint = new Paint();    paint.setTextSize(size);    FontMetrics fm = paint.getFontMetrics();    point.x = (int) paint.measureText(text, 0, text.length());    point.y = (int) Math.ceil(fm.descent - fm.ascent);return point;}}

灰度动画的Drawable

通过自定义Drawable，我们还能够实现简单的图形动画。提到透明度动画，大家肯定马上想到AlphaAnimation，这个透明度动画其实也能用Drawable实现。具体的说，便是采用Handler+Runnable机制，间隔很短的时间依次执行处理任务。设置图形的灰度可调用setAlpha并刷新图形，由于setAlpha方法内部已经调用了invalidateSelf方法，所以我们不必再次刷新画面。这样随着时间流逝，依次展现渐变的灰度便实现动画效果了。有关Runnable的介绍参见《Android开发笔记（四十七）Runnable接口实现多线程》。


在前面的博文《Android开发笔记（十五）淡入淡出动画》中，博主提到可以使用AlphaAnimation和TransitionDrawable，现在又多了第三个办法，就是自定义的AlphaDrawable。同一个功能有多个实现方式，这就是Android的魅力所在呀。


下面是自定义灰度动画的Drawable效果图



下面是灰度动画图像（AlphaDrawable）的代码例子：

import android.content.res.Resources;import android.graphics.Bitmap;import android.graphics.Canvas;import android.graphics.drawable.BitmapDrawable;import android.os.Handler;public class AlphaDrawable extends BitmapDrawable {private Handler mHandler = new Handler();private int mPeriod = 5;private int mCount = 100;private int mGap = 0;public AlphaDrawable(Resources res, Bitmap bitmap) {super(res, bitmap);}public void setPeriod(int period) {mPeriod = period;}public int getPeriod() {return mPeriod;}@Override  public void draw(Canvas canvas) {super.draw(canvas);if (mGap == 0) {mGap = mPeriod*1000 / mCount;}mHandler.postDelayed(mRefresh, mGap);}private Runnable mRefresh = new Runnable() {@Overridepublic void run() {mCount--;if (mCount >= 0) {setAlpha((int) (255 * (100-mCount)/100.0));}}};}

点击下载本文用到的自定义Drawable的工程代码



点此查看Android开发笔记的完整目录