Android 实现尖角向上的聊天气泡Drawable开发问题咨询

一、基于现有代码的适配方案 #

1. pivotX/pivotY属性含义 #

这两个属性定义旋转操作的锚点坐标，百分比取值相对于drawable自身宽高计算：

• pivotX：0%对应drawable左边缘，100%对应右边缘，超出100%为右侧外部区域，负数为左侧外部区域
• pivotY：0%对应drawable上边缘，100%对应下边缘，超出100%为下侧外部区域，负数为上侧外部区域

2. 修改corner.xml代码 #

调整旋转参数即可得到向上的尖角：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <rotate
            android:fromDegrees="45"
            android:pivotX="-35%"
            android:pivotY="85%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#888"/>
            </shape>
        </rotate>
    </item>
</layer-list>

3. 修改布局代码 #

调整ImageView和TextView的顺序，修改负边距方向：

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:layout_margin="16dp"
    android:orientation="vertical">

    <ImageView
        android:layout_marginBottom="-1.5dp"
        android:layout_width="8dp"
        android:layout_height="16dp"
        android:layout_gravity="start"
        android:background="@drawable/corner"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content" 
        android:text="Hello"
        android:padding="16dp"
        android:background="@drawable/rounded_rect"/>

</LinearLayout>

4. 调整尖角尺寸方法 #

• 增大尖角高度：调大ImageView的layout_height
• 增大尖角宽度：调大ImageView的layout_width
• 尺寸调整后如果尖角位置偏移，对应微调pivotX/pivotY的百分比值即可。

二、单xml实现方案（无需单独ImageView） #

直接用layer-list把圆角矩形和尖角合并为一个drawable，直接设为TextView的背景即可：
bubble_arrow_up.xml代码：

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 圆角矩形部分 -->
    <item android:top="8dp"> <!-- 偏移量等于尖角高度，给尖角留出位置 -->
        <shape android:shape="rectangle">
            <solid android:color="#888" />
            <corners
                android:bottomRightRadius="8dp"
                android:bottomLeftRadius="8dp"
                android:topRightRadius="8dp"/>
        </shape>
    </item>
    <!-- 向上尖角部分 -->
    <item android:width="16dp" android:height="8dp" android:gravity="top|start">
        <rotate
            android:fromDegrees="45"
            android:pivotX="-35%"
            android:pivotY="85%"
            android:toDegrees="45">
            <shape android:shape="rectangle">
                <solid android:color="#888"/>
            </shape>
        </rotate>
    </item>
</layer-list>

布局直接简化为：

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Hello"
    android:padding="16dp"
    android:layout_margin="16dp"
    android:background="@drawable/bubble_arrow_up"/>

三、VectorDrawable实现方案（缩放无失真） #

如果需要频繁调整尖角尺寸、适配多分辨率，用矢量图实现更方便，缩放不会模糊：
bubble_vector_up.xml代码：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="200dp"
    android:height="100dp"
    android:viewportWidth="200"
    android:viewportHeight="100">
    <!-- 尖角路径 -->
    <path
        android:fillColor="#888"
        android:pathData="M 16 8 L 24 0 L 32 8 Z" />
    <!-- 圆角矩形路径 -->
    <path
        android:fillColor="#888"
        android:pathData="M 8 8 L 192 8 Q 200 8 200 16 L 200 92 Q 200 100 192 100 L 8 100 Q 0 100 0 92 L 0 16 Q 0 8 8 8 Z" />
</vector>

直接作为背景设置给TextView即可，修改pathData里的坐标就能调整尖角的位置、尺寸。

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