使用聊天圆角在Android中制作椭圆形背景drawable

Question

我知道如何创建椭圆形背景，我将此Drawable添加到RelativeLayout的背景中：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle" android:padding="10dp">
    <solid android:color="#FFFFFF"/>
    <corners
        android:bottomRightRadius="15dp"
        android:bottomLeftRadius="15dp"
        android:topLeftRadius="15dp"
        android:topRightRadius="15dp"/>
</shape>

我想创建这样一个类似聊天的可绘制对象，如下图所示：

我该如何给这个可绘制对象添加聊天框的角落呢？

- user2983041

---

你可能需要使用9-patch图像来完成这个。 - M.Waqas Pervez

我不知道什么是9-patch，但我需要该布局随文本行缩放。 - user2983041

@user2983041 我已经发布了一个解决方案。如果那个不起作用，请告诉我。 - Ajil O.

Answer 1

像这样创建您的气泡布局

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

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

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

</LinearLayout>

可绘制文件

rounded_rect.xml

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#888" />
    <corners
        android:bottomRightRadius="8dp"
        android:topLeftRadius="8dp"
        android:topRightRadius="8dp"/>

</shape>

corner.xml

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

            </shape>
        </rotate>
    </item>
</layer-list>

这个布局会随着您在 TextView 中添加的文本进行缩放。

编辑

我刚刚注意到，您需求中的箭头应该指向左边。为了实现这一点，请对您的气泡布局进行一些小修改。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="12dp"
        android:layout_height="12dp"
        android:layout_gravity="bottom"
        android:background="@drawable/corner2"
        />

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

</LinearLayout>

corner2.xml

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

            </shape>
        </rotate>
    </item>
</layer-list>

输出

- Ajil O.

---

你试了哪一个？是使用 corner1.xml 还是 corner.xml？ - Ajil O.

@user2983041 你确定你使用的drawable文件和我一模一样吗？它应该可以工作。 - Ajil O.

Answer 2

您需要制作出完整的聊天气泡，包括四个角落并将其制作成9-patch格式，这样它就可以在水平和垂直方向上自由伸缩而不会变形。

- Roberto Betancourt

Answer 3

对于任何想了解聊天的另一个角落的人。

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <rotate
            android:fromDegrees="-45"
            android:pivotX="120%"
            android:pivotY="90%"

    >
    <shape android:shape="rectangle">
        <solid android:color="@color/button_login"/>

    </shape>
</rotate>

- Haider Saleem