Question

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

此消息布局应包含：

圆角矩形中的消息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。

我期望的是：

layout_alignParentEnd

text_message_time TextView应该附加到屏幕的右侧。
bubble_ll 位于 text_message_time 视图的左侧。并且其内容的宽度应为

我尝试了其他布局，例如线性，约束布局等。

LinearLayout方法不起作用，因为wrap_content的宽度设置为TextView总是与状态信息检查重叠，并且消息时间使它们在{{1 }}很长。

使用TextView，我无法对齐气泡以保持在右侧。由于它被约束在屏幕的两个水平面上，因此它水平地位于屏幕的中心。

任何帮助将不胜感激。

Answer 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>

RelativeLayout匹配父级，尽管不应该

1 个答案: