Android UI development Article 42nd-achieve the image display part of the circle image and dialog list of easy information

When displaying images, there are many personalized displays, such as circles or rounded corners and bubbles. This article explores the display of circles and bubbles, which is similar to the implementation in Yixin. Let's take a look at it first:

Code:

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();}}

The above effects are implemented using the "Mask" method and the Xfermode of the Paint. We will introduce the setXfermode method. The setXfermode method is used to set the mode when two images are intersecting.

PorterDuff. Mode. CLEAR the canvas Image
PorterDuff. Mode. SRC displays the upper layer Image
PorterDuff. Mode. DST show lower layer Image
PorterDuff. Mode. SRC_OVER is displayed on the upper and lower layers, while the upper layers are displayed on the upper layers.
PorterDuff. Mode. DST_OVER is displayed on the upper and lower layers, and the lower layers are displayed on the upper and lower layers.
PorterDuff. Mode. SRC_IN: obtains the intersection of two layers of images. Only the upper layer images are displayed.
PorterDuff. Mode. DST_IN takes the intersection of two layers of images and only displays the lower layer images.
PorterDuff. Mode. SRC_OUT
PorterDuff. Mode. DST_OUT
PorterDuff. Mode. SRC_ATOP: the lower-level image is not the intersection department and the upper-level image intersection department.
PorterDuff. Mode. DST_ATOP. The upper-layer image is not the intersection department and the lower-layer image intersection department.
PorterDuff. Mode. XOR the non-intersection department of the Two-layer Image

RoundImageView uses the custom View implementation. The onDraw method is rewritten and the paint and canvas methods are used. The two basic tools that must be mastered by the custom View are not described here, provides several references:

 

Android 2D Graphics Learning (1), android. graphics Introduction

Research on the Effect of Android-Matrix image transform and processing Paint

/*** @ Author Zhang xingye * http://blog.csdn.net/xyz_lmn* my Sina Weibo: @ Zhang xingye TBOW*/