在文本语音气泡内对齐时间

Question

我想实现这个功能，就像 Android 中的 WhatsApp 中提供的那样。

为了实现这一点，我为 text 和 time 使用了单独的 TextViews，放置在相对布局中。

我的问题是，WhatsApp 如何决定何时将时间移至换行符，何时不移动。

以下是 WhatsApp 的纵向和横向屏幕截图。

直觉是，代码一定是这样的。

if(width_of_last_line_of_textview > some_fixed_value)
    move time_textview to new-line;
else
    make time_textview in-line;

但我想知道这是否可以使用 xml 来完成（使用一些属性权重等）

WhatsApp 气泡会根据每个屏幕尺寸自行调整，无论屏幕是横向还是纵向。

---

附件是 WhatsApp 用于文本气泡的布局。

conversation_row_text_right.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android" >

<com.whatsapp.DividerView
    android:id="@id/date_divider"
    style="@style/DateDivider" />

<LinearLayout
    android:id="@id/main_layout"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:layout_below="@id/date_divider"
    android:layout_marginLeft="40.0dip"
    android:minHeight="30.0dip"
    android:orientation="vertical" >

    <FrameLayout
        android:id="@id/web_page_preview_holder"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingBottom="4.0dip"
        android:paddingLeft="8.0dip"
        android:paddingRight="8.0dip"
        android:paddingTop="8.0dip" />

    <view
        android:id="@id/text_content_layout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        class="com.whatsapp.TextAndDateLayout"
        android:paddingBottom="2.0dip"
        android:paddingRight="2.0dip" >

        <com.whatsapp.TextEmojiLabel
            android:id="@id/message_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="left"
            android:paddingBottom="3.0dip"
            android:paddingLeft="8.0dip"
            android:paddingRight="8.0dip"
            android:paddingTop="2.0dip"
            android:textColor="#ff000000"
            android:textSize="@dimen/conversation_text_row_tv" />

        <LinearLayout
            android:id="@id/date_wrapper"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|center|right"
            android:orientation="horizontal"
            android:paddingBottom="1.0dip"
            android:paddingRight="5.0dip" >

            <TextView
                android:id="@id/date"
                style="@style/ConversationDate"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center|right"
                android:gravity="right" />

            <ImageView
                android:id="@id/status"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom|center|right"
                android:paddingBottom="3.0dip"
                android:paddingLeft="4.0dip" />
        </LinearLayout>
    </view>
</LinearLayout>

WhatsApp 使用 LinearLayout 作为日期，它包含 TextView（用于日期，即 3:48 PM）和 ImageView（用于图标，即 ✔ )

Answer 1

正如@Bob Malonga 在您的评论中提到的，我认为这种布局也可以通过使用 FlowLayout 来实现。

FlowLayout 让我们一个接一个地添加视图，直到视图的总宽度达到最大宽度。然后它将从新行继续。

您可以在下面找到示例 FlowLayout 库

https://github.com/ApmeM/android-flowlayout

https://github.com/blazsolar/FlowLayout

在您的情况下，重点是您需要将 android:gravity 值设置为 right ，这样当您的 time_text_view 超过宽度时，它将在新行上，它将与右

对齐

Answer 2

Android 开源了FlexboxLayout，为 Android 带来了与 CSS 灵活布局模块相同的功能。