RelativeLayout 匹配父级，尽管它不应该

Posted 2023-04-19

【中文标题】RelativeLayout 匹配父级，尽管它不应该

【英文标题】：RelativeLayout matching parent although it shouldn't

【发布时间】：2019-03-12 02:28:24

【问题描述】：

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

此消息布局应包含：

圆角矩形中的消息文本视图 同一矩形内的消息状态检查图标ImageView 消息发送时间TextView 在圆角矩形的右侧。

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

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

这是问题的图片：

我使用的布局是：

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

    <TextView
        android:id="@+id/text_message_time"
        android:layout_
        android:layout_
        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_
        android:layout_
        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_
            android:layout_
            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_
            android:layout_
            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>

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

我期待的是：

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

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

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

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

任何帮助将不胜感激。

【问题讨论】：

你不应该再使用相对布局了。使用约束布局。您的约束布局问题可以通过约束布局中的 Horizo​​ntal_bias 解决。

使用 9-patch 图像作为消息的背景。不是布局。

@ArchieG.Quiñones 使用约束布局水平偏差，我不知道应该将什么设置为偏差。我希望文本始终正确对齐。但同时，当文本过长时，TextView 的扩展必须在 TextView 的左侧触及屏幕左侧时停止。那么我应该将其设置为 0.9 吗？我更喜欢使用约束布局，但无法按照我想要的方式工作。如果你能帮助我，我会很高兴。

@UmangBurman 您会看到消息框内还有一个 ImageView，所以我认为我需要一个容器。问题是容器宽度以某种方式与父级匹配。我用作背景的可绘制文件仅用于绘制角。

当您正确设置约束时，无需考虑您谈论的所有这些事情。要将文本右对齐，只需将偏差设置为 1.0。

【参考方案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_
    android:layout_
    android:layout_alignParentRight="true"
    android:padding="8dp">

    <TextView
        android:id="@+id/text_message_time"
        android:layout_
        android:layout_
        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_
        android:layout_
        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_
            android:layout_
            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_
            android:layout_
            android:layout_centerVertical="true"
            android:layout_margin="8dp"
            android:src="@android:drawable/presence_online" />
    </LinearLayout>
</RelativeLayout>

【讨论】：

不幸的是，正如我在问题中提到的，TextView 是 wrap_content，当文本太长时会主导 ImageView 空间。文本较长时，ImageView 不再显示在气泡内。