RelativeLayout 的不规则行为答案

【问题标题】：Irregular behavior of RelativeLayoutRelativeLayout 的不规则行为
【发布时间】：2018-02-09 06:01:12
【问题描述】：

这是我创建的设计：

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

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:elevation="@dimen/dp_10"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:elevation="@dimen/dp_5"
            android:weightSum="1"
            >
            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="wrap_content"
                android:layout_weight="0.85"
                android:orientation="vertical"
                android:background="@color/white"
                android:padding="@dimen/dp_10"
                >
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/black_13"
                    android:textSize="@dimen/tv16"
                    android:fontFamily="@font/roboto_medium"
                    android:text="Abhishek Mehta"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/clr_40"
                    android:textSize="@dimen/tv13"
                    android:fontFamily="@font/roboto_medium"
                    android:text="Abhishek Mehta"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/clr_40"
                    android:textSize="@dimen/tv11"
                    android:fontFamily="@font/roboto_regular"
                    android:text="Abhishek Mehta"
                    />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:textColor="@color/clr_40"
                    android:textSize="@dimen/tv12"
                    android:fontFamily="@font/roboto_medium"
                    android:text="Abhishek Mehta"
                    android:drawableLeft="@drawable/time_icon"
                    android:drawablePadding="@dimen/dp_5"
                    />
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dip"
                android:layout_height="match_parent"
                android:layout_weight="0.15"
                android:orientation="vertical"
                android:background="@color/clr_f3"
                android:gravity="center"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:id="@+id/call"
                    android:background="?attr/selectableItemBackground"
                    >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"

                        android:src="@drawable/ic_call"

                        />
                </LinearLayout>
                <View
                    android:layout_width="match_parent"
                    android:layout_height="1dp"
                    android:background="@color/clr_d9d8e3"
                    android:layout_marginLeft="@dimen/dp_10"
                    android:layout_marginRight="@dimen/dp_10"
                    />
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:id="@+id/directions"
                    android:background="?attr/selectableItemBackground"
                    >
                    <ImageView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"

                        android:src="@drawable/ic_directions"

                        />
                </LinearLayout>
            </LinearLayout>
        </LinearLayout>
        <LinearLayout

            android:background="@drawable/red_gradient_bg"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/montserrat_medium"
                android:textSize="@dimen/tv12"
                android:text="@string/release"
                android:textColor="@color/white"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/dp_10"
                android:background="?attr/selectableItemBackground"

                />
            <View
                android:layout_width="1dp"
                android:layout_height="match_parent"
                android:background="@color/white"
                android:layout_marginTop="@dimen/dp_5"
                android:layout_marginBottom="@dimen/dp_5"
                />
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/montserrat_medium"
                android:textSize="@dimen/tv12"
                android:text="@string/accept"
                android:textColor="@color/white"
                android:layout_weight="1"
                android:gravity="center"
                android:padding="@dimen/dp_10"
                android:background="?attr/selectableItemBackground"

                />
        </LinearLayout>
    </LinearLayout>
    <LinearLayout

        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/homeextension"
            android:textColor="@color/white"
            android:background="@color/clr_795CC2"
            android:padding="@dimen/dp_5"
            android:fontFamily="@font/roboto_bold"
            />
    </LinearLayout>
</RelativeLayout>

这是我得到的设计：

这就是我想要的设计：

如您所见，第二个线性布局落后于第一个，这不是相对布局的工作方式。第二个线性布局包含带有紫色背景的“Home Extension”文本。

【问题讨论】：

随心所欲地发布您的屏幕..
在使用RelativeLayout时使用android:layout_above和android:layout_below属性。
@GowthamanM 编辑了问题
@Piyush 但是后面添加的布局必须在最先添加的布局之上，这就是相对布局的工作原理吗？
你做错了 :) 如果你想要这种行为，那么要么使用 frameLayout 要么将紫色 textview 与其他 textviews 一起使用

标签： android android-relativelayout

【解决方案1】：

RelativeLayout 的不规则行为是因为android:elevation 每当我们用任何视图声明此属性时，它都会更改它的 Z-Index，以便视图出现在所有视图的顶部

为您的案例解决方案 1) 从 LinearLayout 中删除 android:elevation="@dimen/dp_10"

替换

<LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical"
      android:elevation="@dimen/dp_10">

与

 <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="vertical">

或在要放在前面的视图中适当地添加相同的高度

 <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:elevation="@dimen/dp_10">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:padding="@dimen/dp_5"
            android:text="@string/homeextension"
            android:textColor="@color/white" />
    </LinearLayout>

同样的行为适用于RelativeLayout、FragmeLayout

【讨论】：

很好的答案，但是我将如何在没有提升的情况下获得所需的输出
您可以尝试 9-patch 或其他解决方案，这里有一些 stackoverflow.com/questions/4406524/…
第二种解决方案是您可以为两个 LinearLayout 设置高度

【解决方案2】：

这是你的解决方案，试试这个

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

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    android:elevation="@dimen/dp_10"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:elevation="@dimen/dp_5"
        android:weightSum="1">

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="wrap_content"
            android:layout_weight="0.85"
            android:background="@color/white"
            android:orientation="vertical"
            android:padding="@dimen/dp_10"
            android:paddingLeft="10dp"
            android:paddingTop="12dp">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto_medium"
                android:text="Abhishek Mehta"
                android:textColor="@color/black_13"
                android:textSize="@dimen/tv16" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto_medium"
                android:text="Abhishek Mehta"
                android:textColor="@color/clr_40"
                android:textSize="@dimen/tv13" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:fontFamily="@font/roboto_regular"
                android:text="Abhishek Mehta"
                android:textColor="@color/clr_40"
                android:textSize="@dimen/tv11" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/time_icon"
                android:drawablePadding="@dimen/dp_5"
                android:fontFamily="@font/roboto_medium"
                android:text="Abhishek Mehta"
                android:textColor="@color/clr_40"
                android:textSize="@dimen/tv12" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight="0.15"
            android:background="@color/clr_f3"
            android:gravity="center"
            android:orientation="vertical">

            <LinearLayout
                android:id="@+id/call"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackground"
                android:gravity="center">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"

                    android:src="@drawable/ic_call"

                    />
            </LinearLayout>

            <View
                android:layout_width="match_parent"
                android:layout_height="1dp"
                android:layout_marginLeft="@dimen/dp_10"
                android:layout_marginRight="@dimen/dp_10"
                android:background="@color/clr_d9d8e3" />

            <LinearLayout
                android:id="@+id/directions"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="?attr/selectableItemBackground"
                android:gravity="center">

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"

                    android:src="@drawable/ic_directions"

                    />
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>

    <LinearLayout

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/red_gradient_bg">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:fontFamily="@font/montserrat_medium"
            android:gravity="center"
            android:padding="@dimen/dp_10"
            android:text="@string/release"
            android:textColor="@color/white"
            android:textSize="@dimen/tv12"

            />

        <View
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_marginBottom="@dimen/dp_5"
            android:layout_marginTop="@dimen/dp_5"
            android:background="@color/white" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:background="?attr/selectableItemBackground"
            android:fontFamily="@font/montserrat_medium"
            android:gravity="center"
            android:padding="@dimen/dp_10"
            android:text="@string/accept"
            android:textColor="@color/white"
            android:textSize="@dimen/tv12"

            />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:fontFamily="@font/roboto_bold"
        android:padding="@dimen/dp_5"
        android:layout_marginTop="5dp"
        android:layout_marginLeft="15dp"
        android:text="@string/homeextension"
        android:textColor="@color/white" />
</LinearLayout>

【讨论】：