效果如下：

可以设置颜色、描边、三角形高度和方向，以向上居中和向下居中为例

气泡.png

实现思路：

使用Canvas绘制气泡形状，因为气泡中间只显示文字，所以我直接继承TextView，重写onDraw方法。

关键代码：

1、在attrs.xml文件中自定义属性，我定义了气泡颜色、描边颜色、描边宽度、三角形高度、三角形方向代码如下：

2、Canvas绘制矩形，提供了两种重载方式：

drawRoundRect(@NonNull RectF rect, float rx, float ry, @NonNull Paint paint)

drawRoundRect(float left, float top, float right, float bottom, float rx, float ry, @NonNull Paint paint)

rx表示圆心

ry表示半径

left, top可以理解为为矩形左上角点的坐标

right, bottom可以理解为矩形右下角点的坐标

如图所示：

矩形.jpg

3、Path绘制三角形，先moveTo移动到任意一点，然后lineTo画线：

描点.jpg

完整代码：

BubbleView.java

/**

* 类描述: 气泡

* 创建人: liufei

* 创建时间: 2019/10/25 15:14

*/

public class BubbleView extends AppCompatTextView {

private Paint mPaint;

private Paint mStrokePaint;

//背景颜色

private int bgColor;

//描边颜色

private int strokeColor;

//描边宽

private int strokeWidth;

//view总高

private int height;

//view总宽

private int width;

//矩形高

private int labelHeight;

//圆角半径

private int mRadius;

//三角形高

private int triangleHeight;

//三角形方向

private int triangleDirection;

public BubbleView(Context context) {

this(context, null);

}

public BubbleView(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public BubbleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init(context, attrs, defStyleAttr);

}

public void init(Context context, AttributeSet attrs, int defStyleAttr) {

if (attrs != null) {

TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.BubbleView);

bgColor = a.getColor(R.styleable.BubbleView_bubbleColor, 0);

strokeColor = a.getColor(R.styleable.BubbleView_bubbleStrokeColor, 0);

strokeWidth = a.getDimensionPixelOffset(R.styleable.BubbleView_bubbleStrokeWidth, 0);

triangleHeight = a.getDimensionPixelOffset(R.styleable.BubbleView_triangleHeight, 30);

triangleDirection = a.getInt(R.styleable.BubbleView_triangleDirection, 0);

a.recycle();

}

setGravity(Gravity.CENTER);

initPaint();

labelHeight = getFontHeight() + getPaddingTop() + getPaddingBottom();

height = labelHeight + triangleHeight * 2 + strokeWidth * 2;

}

@Override

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

// super.onMeasure(widthMeasureSpec, heightMeasureSpec);

width = getPaddingStart() + getFontWidth() + getPaddingEnd() + strokeWidth * 2;

setMeasuredDimension(width, height);

}

//初始化画笔

public void initPaint() {

mPaint = new Paint();

//设置抗锯齿

mPaint.setAntiAlias(true);

//设置填充

mPaint.setStyle(Paint.Style.FILL);

//设置防抖动

mPaint.setDither(true);

//字体大小

mPaint.setTextSize(getTextSize());

}

//初始化描边画笔

public void initStrokePaint() {

mStrokePaint = new Paint();

mStrokePaint.setAntiAlias(true);

mStrokePaint.setStyle(Paint.Style.FILL);

mStrokePaint.setDither(true);

}

@Override

protected void onDraw(Canvas canvas) {

drawView(canvas);

super.onDraw(canvas);

}

//绘制气泡

private void drawView(Canvas canvas) {

if (strokeColor != 0 && strokeWidth != 0) {

initStrokePaint();

mStrokePaint.setColor(strokeColor);

mRadius = labelHeight / 2 + strokeWidth;

drawRound(canvas, mStrokePaint, 0);

drawTriangle(canvas, mStrokePaint, 0);

}

if (bgColor != 0) {

mPaint.setColor(bgColor);

mRadius = labelHeight / 2;

drawRound(canvas, mPaint, strokeWidth);

drawTriangle(canvas, mPaint, strokeWidth);

}

}

//绘制矩形

private void drawRound(Canvas canvas, Paint paint, int stroke) {

canvas.drawRoundRect(stroke, triangleHeight + stroke,

width - stroke, height - triangleHeight - stroke,

mRadius, mRadius, paint);

}

//绘制三角形

private void drawTriangle(Canvas canvas, Paint paint, int stroke) {

Path path = new Path();

switch (triangleDirection) {

//上

case 1:

path.moveTo(width / 2 - triangleHeight + stroke / 2, triangleHeight + stroke);

path.lineTo(width / 2, stroke + stroke / 2);

path.lineTo(width / 2 + triangleHeight - stroke / 2, triangleHeight + stroke);

break;

//下

case 2:

path.moveTo(width / 2 - triangleHeight + stroke / 2, height - triangleHeight - stroke);

path.lineTo(width / 2, height - stroke - stroke / 2);

path.lineTo(width / 2 + triangleHeight - stroke / 2, height - triangleHeight - stroke);

break;

default:

return;

}

canvas.drawPath(path, paint);

}

//根据字号求字体高度

private int getFontHeight() {

Paint.FontMetrics fontMetrics = mPaint.getFontMetrics();

return Math.round(fontMetrics.descent - fontMetrics.ascent);

}

//根据字号求字体宽度

private int getFontWidth() {

return (int) mPaint.measureText(getText().toString());

}

//设置气泡颜色

public void setBubbleColor(int color) {

this.bgColor = ContextCompat.getColor(getContext(), color);

invalidate();

}

//设置气泡描边

public void setStroke(int color, int width) {

this.strokeColor = ContextCompat.getColor(getContext(), color);

this.strokeWidth = width;

invalidate();

}

}

使用

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_margin="5dp"

android:padding="6dp"

android:text="向上向上"

android:textColor="#000000"

android:textSize="20sp"

app:bubbleColor="#ffffff"

app:bubbleStrokeColor="#000000"

app:bubbleStrokeWidth="2dp"

app:triangleDirection="top"

app:triangleHeight="10dp" />