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

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 let us adding views one to another until total width of views reached maximum width. Then it will continue from new line.

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

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

https://github.com/blazsolar/FlowLayout

在您的情况下，要点是您需要将 android:gravity 值设置为 right，这样当您的 time_text_view超出宽度，它将在新行上并对齐 right

Answer 2

Android 开源 FlexboxLayout 以将 CSS 灵活布局模块的相同功能带到 Android。

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

Aligning Time inside a Text Speech Bubble

xml

user-interface

android

whatsapp