Android开发：如何创建带指向角的聊天气泡？

我之前也试过用Layer List做聊天气泡的指向角，确实有点头疼——要么是圆角和尖角衔接得生硬，要么是适配不同屏幕时容易错位。这里给你几个更靠谱的实现思路，亲测好用：

直接通过Path绘制带尖角的气泡，能精确控制圆角弧度、尖角大小和方向，衔接效果非常自然，而且适配所有屏幕尺寸。

先写一个自定义Drawable类（Kotlin示例）：

class ChatBubbleDrawable @JvmOverloads constructor(
    private val cornerRadius: Float = 16f,
    private val triangleSize: Float = 12f,
    private val isOwnMessage: Boolean = false, // 区分消息方向：自己的在右，对方的在左
    color: Int = Color.WHITE
) : Drawable() {
    private val paint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        this.color = color
        style = Paint.Style.FILL
    }
    private val path = Path()

    override fun onBoundsChange(bounds: Rect) {
        super.onBoundsChange(bounds)
        path.reset()
        val left = bounds.left.toFloat()
        val top = bounds.top.toFloat()
        val right = bounds.right.toFloat()
        val bottom = bounds.bottom.toFloat()

        // 先绘制主体圆角矩形
        val rectF = if (isOwnMessage) {
            RectF(left, top, right - triangleSize, bottom)
        } else {
            RectF(left + triangleSize, top, right, bottom)
        }
        path.addRoundRect(rectF, cornerRadius, cornerRadius, Path.Direction.CW)

        // 添加尖角路径
        val triangleX = if (isOwnMessage) right else left
        val triangleY = bottom - cornerRadius - triangleSize / 2 // 尖角垂直位置：靠下偏中间
        path.moveTo(triangleX, triangleY)
        if (isOwnMessage) {
            path.lineTo(right - triangleSize, triangleY - triangleSize / 2)
            path.lineTo(right - triangleSize, triangleY + triangleSize / 2)
        } else {
            path.lineTo(left + triangleSize, triangleY - triangleSize / 2)
            path.lineTo(left + triangleSize, triangleY + triangleSize / 2)
        }
        path.close()
    }

    override fun draw(canvas: Canvas) {
        canvas.drawPath(path, paint)
    }

    override fun setAlpha(alpha: Int) {
        paint.alpha = alpha
    }

    override fun setColorFilter(colorFilter: ColorFilter?) {
        paint.colorFilter = colorFilter
    }

    override fun getOpacity(): Int = PixelFormat.TRANSLUCENT
}

然后在代码里给TextView设置背景：

val bubbleDrawable = ChatBubbleDrawable(
    cornerRadius = resources.getDimension(R.dimen.chat_bubble_radius),
    triangleSize = resources.getDimension(R.dimen.chat_bubble_triangle_size),
    isOwnMessage = true,
    color = resources.getColor(R.color.own_message_bg)
)
messageTv.background = bubbleDrawable

这种方式的优势是完全自定义，你可以随意调整尖角的位置、大小，甚至给尖角加圆角（只需要修改Path的绘制逻辑就行），适配性拉满。

如果不想写Kotlin代码，也可以用VectorDrawable的pathData直接绘制气泡，适合简单场景。比如下面是自己消息的气泡（尖角在右侧）：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="240dp"
    android:height="100dp"
    android:viewportWidth="240"
    android:viewportHeight="100">
    <path
        android:fillColor="#E5F3FF"
        android:pathData="M16,16 L224,16 
        A16,16 0 0 1 224,84 
        L16,84 
        A16,16 0 0 1 16,16 
        Z
        M224,68 
        L240,68 
        L224,62 
        Z"/>
</vector>

把这个VectorDrawable设为TextView的背景即可，缺点是尺寸固定，需要通过scaleType或者动态调整大小来适配不同长度的消息，灵活性不如方案1。

如果只是做快速原型，不想折腾代码，可以用ConstraintLayout把圆角矩形和三角形View组合起来：

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/message_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="12dp"
        android:background="@drawable/rounded_rect_bubble"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

    <!-- 尖角View -->
    <View
        android:layout_width="12dp"
        android:layout_height="12dp"
        android:background="@drawable/triangle_right"
        app:layout_constraintEnd_toEndOf="@id/message_text"
        app:layout_constraintBottom_toBottomOf="@id/message_text"
        app:layout_constraintMarginBottom="16dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

其中rounded_rect_bubble是普通的圆角矩形Shape，triangle_right是三角形Shape：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="triangle">
    <solid android:color="#E5F3FF"/>
    <size android:width="12dp" android:height="12dp"/>
</shape>

这种方式的缺点是尖角和气泡的衔接可能不够自然，而且颜色要手动保持一致，适合快速验证效果。

总结一下，方案1是最优解，兼顾灵活性、适配性和视觉效果，代码量也不大，推荐优先尝试。

内容的提问来源于stack exchange，提问作者user9609225