1

我正在尝试在聊天应用程序中创建消息布局。

此消息布局应包含：

  • 圆角矩形中的消息 Textview
  • ImageView同一矩形内的消息状态检查图标
  • 消息发送时间TextView在圆角矩形之外和它的右边。

当文本很短时，整个布局应该向右对齐。当文本很长时，消息TextView将向左扩展，在触摸屏幕左侧时，它会扩展为新行。

问题是FrameLayout：尽管底层宽度设置为 wrap_content，但无论消息长短，圆角矩形都会延伸到整个屏幕。

这是问题的图像：

在此处输入图像描述

我使用的布局是：

<RelativeLayout
    android:id="@+id/outer_rl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="8dp"
    android:paddingTop="8dp">

    <TextView
        android:id="@+id/text_message_time"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_marginLeft="4dp"
        android:layout_marginRight="4dp"
        android:textSize="10sp"
        app:showDate="@{message.postedAt}" />

    <RelativeLayout
        android:id="@+id/bubble_ll"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/text_message_time"
        android:background="@drawable/rounded_rectangle_bubble_sent"
        android:padding="8dp">

        <ImageView
            android:id="@+id/iv_check"
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:layout_alignParentRight="true"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="4dp"
            app:setStatusPng="@{message.status}" />

        <TextView
            android:id="@+id/messagetext_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="6dp"
            android:layout_marginTop="2dp"
            android:layout_toLeftOf="@id/iv_check"
            android:singleLine="false"
            android:text="@{message.messageText}"
            android:textColor="#ffffff" />

    </RelativeLayout>
</RelativeLayout>

内部RelativeLayout命名bubble_ll的宽度等于wrap_content。

我期待的是：

  • text_message_time TextView 应该附加到屏幕的右侧，因为它的layout_alignParentEnd属性设置为 true。
  • 由于其 layout_toLeftOf 属性集，bubble_ll位于text_message_time视图的左侧。它应该具有其内容的宽度。

我尝试过其他布局，例如 Linear、ConstraintLayout 等。

该LinearLayout方法不起作用，因为宽度设置wrap_content为TextView始终与状态信息检查重叠，并且消息时间使它们在消息TextView较长时消失。

ConstraintLayout我无法对齐气泡以保持在右侧。它水平停留在屏幕的中心，因为它被限制在屏幕的水平两侧。

任何帮助将不胜感激。

4

1 回答 1

1

我想出了以下布局，它是RelativeLayout和的组合LinearLayout。我希望这能达到你的目的。如有必要，请更改可绘制对象和 ID。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/outer_rl"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:padding="8dp">

    <TextView
        android:id="@+id/text_message_time"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/message_container"
        android:layout_alignParentRight="true"
        android:layout_margin="4dp"
        android:text="10:30 am"
        android:textSize="10sp" />

    <LinearLayout
        android:id="@+id/message_container"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"

        android:layout_toLeftOf="@+id/text_message_time"
        android:background="@android:color/holo_blue_dark"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/messagetext_tv"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="4dp"
            android:layout_weight="1"
            android:padding="4dp"
            android:singleLine="false"
            android:text="You have a long message here. This is so long that it takes two lines inside the TextView. No wonder, now its taking three lines and now its four. How long this message can go? I now have that question!!!"
            android:textColor="@android:color/white" />

        <ImageView
            android:id="@+id/iv_check"
            android:layout_width="12dp"
            android:layout_height="12dp"
            android:layout_centerVertical="true"
            android:layout_margin="8dp"
            android:src="@android:drawable/presence_online" />
    </LinearLayout>
</RelativeLayout>
于 2018-10-07T04:29:49.310 回答