Question

我正在尝试构建类似聊天气泡的Whatsapp，因为我使用TextView和android:drawableRight。

但聊天气泡在TextView内部（但在右侧），下面是聊天气泡图像。

TextView是

         <TextView
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:maxWidth="200dp"
           android:text="Some text"
           android:drawableRight="@drawable/bubble"
           android:drawableEnd="@drawable/bubble"
           android:padding="8dp"
           android:background="#dcf8c6"
          />

如何添加聊天气泡作为TextView的尾部，它看起来就像WhatsApp聊天气泡。

最后看起来应该是

Answer 1

你可以像下面这样实现：

<LinearLayout
    android:id="@+id/bubble_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bubble1">

    <TextView
        android:id="@+id/message_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxEms="12"
        android:layout_gravity="center"
        android:text="Hi! new message"
        android:textColor="@android:color/primary_text_light" />
</LinearLayout>

在以下代码中，bubble1是 .9.atch 图片，包含您想要的尾巴。

了解更多信息，请参阅此链接chat with bubble

Answer 2

使用9补丁而不是使用图像作为背景，否则使用textView显示气泡，9补丁更好......，请参阅本教程以了解如何创建9-PATCH图像 9patch Tutorial

要在线生成9patch，请点击here

Answer 3

Whatsapp实际上使用NinePatch图像来制作自定义形状。如果你坚持使用它，你可以使用类似的东西：

     <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       />

       <TextView
       android:id="@+id/textview"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:maxWidth="200dp"
       android:text="Some text"
       android:padding="8dp"
       android:background="#dcf8c6"
       />

       <ImageView
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:layout_toEndOf="@+id/textview"
       android:background="@drawable/bubble"
       />

    </RelativeLayout>

Answer 4

您必须为气泡图像创建9patch图像。图像延伸是.9.png。您可以查看this链接以了解有关9patch图像的信息。或者您可以从here创建在线9patch imasge。

Answer 5

您可以使用android:drawableBottom=""将图片添加到textview的底部

如何在Textview Android结束时添加图像

5 个答案: