為什么相對視圖中的margin top和layout_above會這樣表現？

Question

我試圖將一個視圖放在另一個視圖之上，並在其邊界框之外一點。
我的代碼簡化為顯示問題：

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

結果：

第二個箭頭顯示了我期望小矩形視圖的位置。
盡管我指定了與線性布局相同的頂部邊距，為什么它仍顯示在頂部？
如果我刪除了android:layout_above="@+id/linear"則它會android:layout_above="@+id/linear"第二個箭頭顯示的位置，但會在橙色視圖android:layout_above="@+id/linear"且不在其上方。
為什么相對布局可以做到這一點？

Answer 1

Layout_above使其底部直接位於上面命名的視圖頂部。 如果要在其正上方進行布局，則將有0 marginTop。

如果沒有上面的布局，它就會下降，因為z順序是由文件中視圖的順序決定的-文件越低，z順序就越高。

如果希望它顯示在橙色視圖的左上角，請執行layout_alignTop =“ @ id / linear”並確保較小的視圖在文件中的位置晚於較大的視圖。 不要在上面留空白。

<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:id="@+id/linear"包含屬性android:layout_marginTop="200dp"時，邊距將被視為LinearLayout容器的一部分 。

因此，有效地，包裝LinearLayout的容器包括邊距android:layout_marginTop="200dp" 。 而且由於您的根布局是相對布局，因此默認情況下，LinearLayout會對齊到根布局的頂部（因為LinearLayout不包含android:layout_below ， android:layout_above等任何相對屬性）。 因此，當您在android:id="@+id/view"給定的View標記中包含android:layout_above="@+id/linear"屬性時，它會嘗試將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>