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效果图
Android开发笔记(九十五)自定义Drawable_第1张图片


下面是圆形裁剪图像(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);
	}

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

	@Override
	public 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;
	}
	
	@Override
	public void setBounds(int left, int top, int right, int bottom) {
		super.setBounds(left, top, right, bottom);
		mRect = new RectF(left, top, right, bottom);
	}

	@Override
	public 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() {

		@Override
		public void run() {
			mCount--;
			if (mCount >= 0) {
				setAlpha((int) (255 * (100-mCount)/100.0));
			}
		}
		
	};

}





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

你可能感兴趣的:(android,drawable,水印,圆角矩形,灰度动画)