Question

我想实现此功能，如WhatsApp中 Android 中所示。

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

我的问题是，WhatsApp如何决定何时在新线上移动时间以及何时不移动时间。

以下是WhatsApp的Portrait and Landscape截图。

本能的感觉是，代码必须是这样的。

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，将CSS Flexible Layout模块的相同功能引入Android。

在文本语音泡沫中对齐时间

2 个答案: