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

来源：互联网发布：淘宝详情页多大尺寸编辑：程序博客网时间：2024/06/06 00:39

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

代码：

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);}@Overrideprotected 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 张兴业

* http://blog.csdn.net/xyz_lmn

* 我的新浪微博：@张兴业TBOW

2 0