防微信聊天气泡图片实现

先看下效果图



防微信实现如图的 图片显示效果。

接上篇博客介绍的图形图片的实现 ， 这里通过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();
}

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

}
}

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

再看看布局文件对自定义属性的使用，要指定 名称为

“http://schemas.android.com/apk/res-auto”的名称空间
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:civ="http://schemas.android.com/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>