先看下效果图
防微信实现如图的 图片显示效果。
接上篇博客介绍的图形图片的实现 ， 这里通过BitmapSharder来实现这个效果。 主要麻烦的地方就是画出气泡形状的path.
这里设置自定义的属性，方便设置 图片气泡方向与边框颜色， attrs文件如下
<resources><declare-styleable name="ChatImageView"><attr name="orientation"><enum name="left" value="0"></enum><enum name="right" value="1"></enum></attr><attr name="borderColor" format="color" /></declare-styleable></resources>
自定义ImageView代码如下
public class ChatImageView extends ImageView {private Bitmap srcBitmap;private Paint paint;private BitmapShader mBitmapShader;private Matrix mMatrix;private int width;private int height;private Paint borderPaint; //边框的画笔private int mOrientation; //方向private int mborderColor; //边框颜色public ChatImageView(Context context) {super(context);init();}public ChatImageView(Context context, AttributeSet attrs) {super(context, attrs);//获取自定义属性值TypedArray ta = getContext().obtainStyledAttributes(attrs, R.styleable.ChatImageView);mOrientation = ta.getInt(R.styleable.ChatImageView_orientation, 0);mborderColor = ta.getColor(R.styleable.ChatImageView_borderColor, Color.GRAY);ta.recycle();init();}public ChatImageView(Context context, AttributeSet attrs, int defStyleAttr) {super(context, attrs, defStyleAttr);init();}private void init() {paint = new Paint();paint.setAntiAlias(true);borderPaint = new Paint();borderPaint.setColor(mborderColor);borderPaint.setAntiAlias(true);borderPaint.setStyle(Paint.Style.STROKE);borderPaint.setStrokeWidth(1);srcBitmap = ((BitmapDrawable) getDrawable()).getBitmap();mBitmapShader = new BitmapShader(srcBitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);mMatrix = new Matrix();}@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) {super.onSizeChanged(w, h, oldw, oldh);if (getWidth() > 0 && getHeight() > 0) {width = getWidth();height = getHeight();int mWidth = Math.min(getMeasuredWidth(), getMeasuredHeight());//设置缩放int bSize = Math.min(srcBitmap.getWidth(), srcBitmap.getHeight());float scale = mWidth * 1.0f / bSize;mMatrix.setScale(scale, scale);mBitmapShader.setLocalMatrix(mMatrix);}}@Overrideprotected void onDraw(Canvas canvas) {paint.setShader(mBitmapShader);Path path = null;if (mOrientation == 0) {path = getLeftPath();} else {path = getRightPath();}canvas.drawPath(path, paint);//画边框canvas.drawPath(path, borderPaint);}/*** 画出左朝向的path** @return*/private Path getLeftPath() {Path path = new Path();path.moveTo(40, 0);path.lineTo(width - 20, 0);RectF oval = new RectF(width - 40, 0, width, 40);path.arcTo(oval, 270, 90, false); //false表示不闭口path.lineTo(width, height - 20);oval = new RectF(width - 40, height - 40, width, height);path.arcTo(oval, 0, 90, false);path.lineTo(40, height);oval = new RectF(20, height - 40, 60, height);path.arcTo(oval, 90, 90, false);path.lineTo(20, 60);path.lineTo(0, 20);path.lineTo(20, 20);oval = new RectF(20, 0, 60, 40);path.arcTo(oval, 180, 90, false);path.close();//封闭return path;}/*** 画出右朝向的path** @return*/private Path getRightPath() {Path path = new Path();path.moveTo(20, 0);path.lineTo(width - 40, 0);RectF oval = new RectF(width - 60, 0, width - 20, 40);path.arcTo(oval, 270, 90, false);path.lineTo(width, 20);path.lineTo(width - 20, 60);path.lineTo(width - 20, height - 20);oval = new RectF(width - 60, height - 40, width - 20, height);path.arcTo(oval, 0, 90, false);path.lineTo(20, height);oval = new RectF(0, height - 40, 40, height);path.arcTo(oval, 90, 90, false);path.lineTo(0, 20);oval = new RectF(0, 0, 40, 40);path.arcTo(oval, 180, 90, false);path.close();//封闭return path;}}
再看看布局文件对自定义属性的使用，要指定 名称为
“/apk/res-auto”的名称空间<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"xmlns:civ="/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><wei.jiang.selfview.imageview.ChatImageView android:layout_width="200dp"android:layout_height="100dp"android:layout_centerInParent="true"android:src="@drawable/pic2"civ:borderColor="@color/colorPrimaryDark"civ:orientation="left" /></RelativeLayout>
