Android UI开发第四十二篇——实现实现易信的圆形图像和对话列表的图像显示部分


   显示图像时,很多个性化显示,圆形或圆角、气泡等等,我们这一篇文章探讨一下圆形和气泡的显示,仿照易信中的实现,先看下效果图:



代码:

public class RoundImageView extends ImageView {
		
	public RoundImageView(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public RoundImageView(Context context, AttributeSet attrs) {
		super(context, attrs);

	}

	public RoundImageView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);

	}

	@Override
	protected void onDraw(Canvas canvas) {
		
		Drawable drawable = getDrawable();

		if (drawable == null) {
			return;
		}

		if (getWidth() == 0 || getHeight() == 0) {
			return; 
		}

		Bitmap bitmapBorder =BitmapFactory.decodeResource(getResources(), R.drawable.border); 
		Bitmap bitmapMask =BitmapFactory.decodeResource(getResources(), R.drawable.mask);
		
		int _width = bitmapBorder.getWidth();
		int _height = bitmapBorder.getHeight();
		
		Paint paint = new Paint();
		PorterDuffXfermode xfermode = new PorterDuffXfermode(PorterDuff.Mode.SRC_IN);
	
		
		Bitmap bitmap =  ((BitmapDrawable)drawable).getBitmap() ;
		canvas.drawBitmap(bitmapBorder, 0, 0, paint);
		int saveFlags = Canvas.MATRIX_SAVE_FLAG | Canvas.CLIP_SAVE_FLAG | Canvas.HAS_ALPHA_LAYER_SAVE_FLAG | Canvas.FULL_COLOR_LAYER_SAVE_FLAG | Canvas.CLIP_TO_LAYER_SAVE_FLAG;
		canvas.saveLayer(0, 0, _width, _height, null, saveFlags);
		canvas.drawBitmap(bitmapMask, 0, 0, paint);
		paint.setXfermode(xfermode);
		int left = _width/2 - bitmap.getWidth() /2;
		int top = _height/2 - bitmap.getHeight()/2;
		canvas.drawBitmap(bitmap, left, top, paint);
		paint.setXfermode(null);
		canvas.restore();

	}

}

    上述效果使用了“遮罩”的方式实现,使用了Paint的Xfermode。我们介绍下setXfermode方法,setXfermode方法用来设置两张图片相交时的模式。


        PorterDuff.Mode.CLEAR 清除画布上图像 
       PorterDuff.Mode.SRC 显示上层图像 
       PorterDuff.Mode.DST 显示下层图像 
       PorterDuff.Mode.SRC_OVER上下层图像都显示,上层居上显示 
       PorterDuff.Mode.DST_OVER 上下层都显示,下层居上显示 
       PorterDuff.Mode.SRC_IN 取两层图像交集部门,只显示上层图像 
       PorterDuff.Mode.DST_IN 取两层图像交集部门,只显示下层图像 
       PorterDuff.Mode.SRC_OUT 取上层图像非交集部门 
       PorterDuff.Mode.DST_OUT 取下层图像非交集部门 
       PorterDuff.Mode.SRC_ATOP 取下层图像非交集部门与上层图像交集部门 
       PorterDuff.Mode.DST_ATOP 取上层图像非交集部门与下层图像交集部门 
       PorterDuff.Mode.XOR 取两层图像的非交集部门


    RoundImageView使用了自定义View实现,重点重写了onDraw方法,使用了paint、canvas,这两个自定义View必须掌握的两个基础工具,这里就不多写了,提供几个参考:

 

Android 2D Graphics学习(一)、android.graphics介绍


Android--Matrix图片变换处理

Paint的效果研究


/**
* @author 张兴业
*  我的新浪微博:@张兴业TBOW
*/



posted @ 2014-04-03 19:41  张兴业  阅读(359)  评论(0编辑  收藏  举报