布局聊天气泡答案

【问题标题】：Layout Chat bubble布局聊天气泡
【发布时间】：2014-10-23 12:10:24
【问题描述】：

我正在尝试创建一个类似于 whatsapp 聊天的布局，我有一个 9 补丁图像，但我不能像下图那样做：

目前看起来像这样：

我的 axml 文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_marginTop="10dp">
<TextView
    android:id="@+id/singleMessage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="left"
    android:layout_margin="5dip"
    android:paddingLeft="10dip"
    android:text="Hello bubbles!"
    android:textColor="#48026E" />
<TextView
    android:id="@+id/dateTime"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:layout_gravity="right"
    android:text="00:00"
    android:textColor="#48026E" />

【问题讨论】：

不清楚你在问什么。你能详细说明一下吗？
@Funkystein 我的文字不适合布局，它就像两个块而不是第一张图片（whatsapp 气泡）
1 - 为什么要在气泡中描出黑色区域？ 2 - 是的，它是 2 个文本，每个文本都有自己的风格。 3 - 您的布局不完整。 4 - 我更喜欢使用相对布局。 5 - 将气泡 9 补丁分配给容器。

标签： android android-layout android-linearlayout

【解决方案1】：

将线性布局的方向改为垂直。然后使用 gravity 属性将 dateTime 文本视图移动到右侧。

还将 singleMessage 的宽度更改为 match_parent

我把你的xml改成

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="10dp"
    android:background="@drawable/ic_patch"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/singleMessage"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_margin="5dip"
        android:paddingLeft="10dip"
        android:text="Hello bubbles!"
        android:textColor="#48026E" />

    <TextView
        android:id="@+id/dateTime"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:text="00:00"
        android:textColor="#48026E" />

</LinearLayout>

它的工作方式完全符合您的预期。

【讨论】：

fill_parent 已被弃用，因为包含 API 级别 8。你最好使用match_parent。还有，你在哪里设置 9 补丁？
@Funkystein 更改为 match_parent。 9 补丁是什么意思？
9 补丁是可拉伸的 (png) 以适应内容（气泡本身）。
@Funkystein 那不应该是背景吗？
当然。它在哪里？假设它是在代码中完成的（从左气泡和右气泡交换），容器应该有一个 id。