Question

这个问题已被多次询问，但从未得到正确答案。

如何构建布局（类似于最常见的消息应用程序，如Whatsapp，Telegram），具有以下特征：

它有一个视图，充当容器，背景为气泡图像。
在容器中有两个元素，即文本消息和文本日期。
短信从左上角开始，可以有多行。
文本日期与最后一条文本消息行的基线对齐，并在其右侧。

我试图通过相对布局来达到它。

<RelativeLayout android:id="@+id/message_bubble_container"
    android:layout_below="@+id/message_date_separator_container"
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:background="@drawable/chat_message_background"
    android:padding="4dp">


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

        <TextView
            style="@style/TextAppearance.AppCompat.Medium"
            android:id="@+id/message_text"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            tools:text="This is a message long that causes the date to leave the screen!" />

        <TextView
            style="@style/TextAppearance.AppCompat.Small"
            android:id="@+id/message_time"
            android:layout_alignBottom="@id/message_text"
            android:layout_height="wrap_content"
            android:layout_toRightOf="@id/message_text"
            android:textColor="@color/material_grey_900"
            android:textSize="12sp"
            tools:text="18:58"
            android:paddingLeft="4dp"/>

    </RelativeLayout>


</RelativeLayout>

当文本消息在一行上时它很好用，但是当它增长以填充容器的宽度时，它会从屏幕上推出日期。如何避免此行为并使文本消息在日期右侧保留边距？

如果这是CSS，我只需要向margin-right: 40px;添加.message_text。当然这是Android而不是CSS ......

此外，我不喜欢在maxWidth上使用@id/message_text，因为我不知道屏幕会显示多少dp。

最后，我听到过一些关于FlowLayout的讨论。有办法吗？

感谢任何人都会尝试解决这个影响任何人开发聊天布局的问题。

Answer 1

使用垂直方向的线性布局而不是相对布局。像这样：

<LinearLayout android:id="@+id/message_bubble_container"
android:layout_below="@+id/message_date_separator_container"
android:layout_height="wrap_content"
android:layout_width="wrap_content"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical"
android:background="@drawable/chat_message_background"
android:padding="4dp">


<LinearLayout
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"
    android:orientation="vertical">

    <TextView
        style="@style/TextAppearance.AppCompat.Medium"
        android:id="@+id/message_text"
        android:gravity="right"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        tools:text="This is a message long that causes the date to leave the screen!" />

    <TextView
        style="@style/TextAppearance.AppCompat.Small"
        android:id="@+id/message_time"
        android:layout_alignBottom="@id/message_text"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/message_text"
        android:textColor="@color/material_grey_900"
        android:textSize="12sp"
        tools:text="18:58"
        android:paddingLeft="4dp"/>

</LinearLayout>
</LinearLayout>

尝试，让我知道它有效。：）

Answer 2

从内部相对布局中取出该日期文本视图，并将其保持在父对齐布局中，并使用alignparentbottom为true并对齐parentright true

快乐编码

Android布局：右下角的日期文字和消息文字基线的聊天气泡

2 个答案: