Android如何通过Drawable实现左下角带弧形尖角的聊天气泡

原有方案缺陷 #

你当前用旋转矩形叠加圆角矩形的实现逻辑，是靠两个直角块拼出斜角尖角，衔接处是硬直线，天生做不出弧形过渡的柔和效果。

可直接复用的实现代码 #

放弃rotate拼块的写法，用Vector Drawable自定义路径，可以精准控制圆弧衔接效果，兼容性覆盖API 21及以上的绝大多数设备：

1. 在res/drawable目录下新建bubble_msg_receive.xml，写入以下代码：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="wrap_content"
    android:height="wrap_content"
    android:viewportWidth="200"
    android:viewportHeight="80">
    <path
        android:fillColor="@color/white"
        android:pathData="M24,0 H190 A10,10 0 0 1 200,10 V70 A10,10 0 0 1 190,80 H24 C12,80 0,72 0,60 C0,48 12,42 12,24 C12,12 18,0 24,0 Z"/>
</vector>

2. 直接将这个drawable设置为消息条目的背景即可。

参数调整说明 #

• 要修改气泡主体的圆角大小，把路径里A10,10的数值10改成你需要的圆角半径即可
• 要调整左下角气泡尾巴的突出长度、弧度，修改path中H24之后的贝塞尔曲线坐标值，数值越小尾巴越短，弧度越平缓
• 如果需要做右侧发送方的气泡，把路径水平翻转，将尾巴位置调整到右下角、填充色改成发送气泡对应的颜色即可

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