Question

我正在尝试将视图放在另一个视图的顶部，并在其边界框之外我的代码被简化以显示问题：

declare var name: string;

结果：

第二个箭头显示了我期望小矩形视图的位置为什么它显示在顶部虽然我指定了与线性布局相同的上边距？如果我移除了<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <View android:id="@+id/view" android:layout_width="56dp" android:layout_height="56dp" android:layout_above="@+id/linear" android:layout_marginTop="200dp" android:background="@color/red" /> <LinearLayout android:id="@+id/linear" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginTop="200dp" android:orientation="vertical" android:padding="0dp" android:background="@color/white" > <View android:layout_width="match_parent" android:layout_height="200dp" android:background="@color/orange" /> </LinearLayout> </RelativeLayout>，那么它会转到第二个箭头显示的位置，但是橙色视图下方而不是它上方。
为什么相对布局会这样做？

Answer 1

Layout_above使其布局，其底部直接位于上面命名的视图的顶部。如果你想直接在上面进行布局，你就有0 marginTop。

如果没有上面的布局，它会在下面，因为z顺序是由文件中的视图顺序决定的 - 文件中的较低顺序，z顺序越高。

如果您希望它出现在橙色视图的左上角，请执行layout_alignTop =＆＃34; @ id / linear＆＃34;并确保文件中较小的视图比较大的视图稍晚。不要在上面留一个余地。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="200dp"
        android:orientation="vertical"
        android:padding="0dp"
        android:background="@color/white"
        >

        <View
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/orange"
            />
    </LinearLayout>

    <View
        android:id="@+id/view"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_alignTop="@+id/linear"
        android:background="@color/red"
        />
</RelativeLayout>

Answer 2

这不是RelativeLayout，而是边缘的本质。如果您放置一个视图（橙色框）并说它上面有200dp的边距，那么在该200dp边距内不能放置其他视图。

要将橙色框居中，然后在其上方放置另一个视图，则需要执行此类操作。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <View
        android:id="@+id/view"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_above="@+id/center_view"
        android:background="@color/red" />


    <View
        android:id="@+id/center_view"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_centerInParent="true"
        android:background="@color/orange" />


</RelativeLayout>

这会将橙色视图直接放在中央，红色视图直接放在它上面。请注意，您甚至不需要LinearLayout，但可以直接在RelativeLayout中使用橙色视图。

Answer 3

当您在LinearLayout android:layout_marginTop="200dp"中包含属性android:id="@+id/linear"时，边距被视为 LinearLayout容器的的一部分。

因此，有效地，包装LinearLayout的容器包括边距android:layout_marginTop="200dp"。由于您的根布局是相对布局，因此LinearLayout默认情况下与根布局的顶部对齐（因为LinearLayout不包含任何相对属性，如android:layout_below，android:layout_above等）。因此，当您在android:layout_above="@+id/linear"给出的View标记中包含android:id="@+id/view"属性时，它会尝试将View放置在从屏幕顶部开始的LinearLayout上方。

编码布局的更好方法是：

<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <View
        android:id="@+id/view"
        android:layout_width="56dp"
        android:layout_height="56dp"
        android:layout_marginTop="200dp"
        android:background="@color/red"
        />

    <LinearLayout
        android:id="@+id/linear"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:layout_below="@+id/view"
        android:orientation="vertical"
        android:padding="0dp"
        android:background="@color/white"
        >

        <View
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:background="@color/orange"
            />
    </LinearLayout>    
 </RelativeLayout>

为什么margin top和layout_above在相对视图中表现如此？

3 个答案: