使用 match_parent 为什么文本位于右侧视图下方?

With match_parent why is the text going below the view on the right?

我不确定我是否理解 match_parent 的工作原理。
我很困惑的例子:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:orientation="vertical"
            >
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content">
                    <TextView
                        android:id="@+id/text1"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:text="I expected this really long text to wrap around since the space on the right is already occupied but it goes bellow the red view"
                        />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_below="@id/text1"
                    android:text="Bla"
                    />

            </RelativeLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            android:layout_alignParentRight="true"
            >
            <View
                android:layout_width="80dp"
                android:layout_height="80dp"
                android:background="@color/red"
            />
        </LinearLayout>

    </RelativeLayout>

</LinearLayout>

结果如下:

因此文本延伸到父级的宽度但在红色视图下。
如果我删除视图,那么很长的文本会环绕到下一行。

所以我的问题是为什么不使用红色视图 "detected" 以便文本换行到下一行?

RelativeLayout 实际上有一个 z 轴,如果视图的对齐方式意味着它们的边缘与同一平面对齐,那么在布局中稍后添加的视图将位于较早的视图之上(分层)而不是推到一边现有内容。这意味着您的红色方块是 above/overlaps 文本视图而不是旁边。

这不是您的问题,但也没有必要像那样嵌套您的布局,或将各个视图包装在它们自己的布局中。编写和渲染的效率真的很低。您可以从开发人员教程中了解布局的差异以及何时使用它们。

我认为以下是您需要的:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <View android:layout_alignParentRight="true"
        android:id="@+id/shape1"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:background="@color/red"
    />

    <RelativeLayout android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@id/shape1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView android:id="@+id/text1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="I expected this really long text to wrap around since the space on the right is already occupied but it goes bellow the red view"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_below="@id/text1"
            android:text="Bla"
            />

    </RelativeLayout>

</RelativeLayout>

为了解释那些 changes/why 你不需要嵌套:

  • 你不需要最外面的 LinearLayout 因为它只有一个 child
  • 出于同样的原因,您不需要红色方块周围的 LinearLayout,只需将 android:layout_alignParentRight="true" 移动到红色方块视图
  • 出于同样的原因,您不需要包含 hte TextView 的 RelativeLayout 周围的 LinearLayout。将 android:layout_alignParentLeft="true" 移动到 RelativeLayout child
  • 然后,您可以通过确保 child RelativeLayout 位于 child RelativeLayout 或 child RelativeLayout 结束 toLeftOf 红色方块(如我的示例)来阻止红色方块与文本重叠。
  • 如果您想进一步改进,可以删除 child RelativeLayout 并将 toLeftOf 和 android:layout_alignParentLeft="true" 放在第一个 TextView 和 android:layout_alignLeft="@ +id/text1" 加上 android:layout_alignRight="@+id/text1" 在第二个 TextView 上,你仍然会得到相同的结果

问题不是TextViewmatch_parent,而是线性布局的fill_parent

<LinearLayout
        android:layout_width="fill_parent"

这将使它与其父级一样宽,在本例中是整个屏幕。您可以尝试添加 android:layout_toLeftOf="@id/theOtherLinearLayout".

另一种选择是使用水平 LinearLayout 来防止文本视图进入红色框下方。您可以使用

 android:layout_width="0dp"
 android:layout_weight="1"

表示视图应使用此布局中剩余的 all space(在固定元素(在本例中为红色框)已定位之后)。