android - 高于 2dp 的高度会导致按钮消失

Question

在我下面的代码中，我有一个高度为 8dp 的白色 View 。蓝色按钮的高度为 10dp，因此理论上它应该显示。然而，事实并非如此。它只显示不在白色 View 正上方的部分。我知道这与海拔有关，但我不知道到底是什么。我已经猜到当白色 View =<2 时它很好，但是一旦我将它设置得更高，问题就出现了。

这是我的代码:

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

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

        <View
            android:layout_width="match_parent"
            android:layout_height="@dimen/login_background"
            android:background="@color/colorPrimary" />

        <View
            android:id="@+id/view"
            android:layout_width="@dimen/login_container_width"
            android:layout_height="@dimen/login_container_height"
            android:layout_centerHorizontal="true"
            android:layout_marginTop="@dimen/login_container_margin_top"
            android:background="@drawable/login_container"
            android:elevation="8dp">

        </View>

        <Button
            android:id="@+id/button"
            android:layout_width="190dp"
            android:layout_height="50dp"
            android:layout_marginBottom="52dp"
            android:background="@drawable/login_button"
            android:elevation="10dp"
            android:text="LOGIN"
            android:textColor="@color/white"
            android:textSize="20sp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true" />

    </RelativeLayout>

</LinearLayout>

Answer 1

以下反射(reflect)this Stack Overflow 问题和已接受的答案。

让我们考虑一下您从什么开始。我无权访问您的所有维度等，以使以下内容看起来与您的示例完全一样，但基础就在那里。下面是基本布局。您可以看到按钮位于 View 下方，即使 View 的高度为 8dp 并且按钮的高度为 10dp。

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@color/colorPrimaryDark">

        <View
            android:id="@+id/view"
            android:layout_width="match_parent"
            android:layout_height="175dp"
            android:layout_alignBottom="@+id/button"
            android:layout_alignParentEnd="true"
            android:layout_alignParentStart="true"
            android:layout_margin="30dp"
            android:background="@android:color/white"
            android:elevation="8dp">

        </View>

        <Button
            android:id="@+id/button"
            android:layout_width="190dp"
            android:layout_height="50dp"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:layout_marginBottom="52dp"
            android:background="@mipmap/ic_launcher"
            android:elevation="10dp"
            android:text="LOGIN"
            android:textColor="@color/white"
            android:textSize="20sp" />

    </RelativeLayout>

</LinearLayout>

那么，这是为什么呢？这是因为按钮的 XML 中的 android:elevation="10dp" 并未真正定义高度。相反，按钮的高度由 "StateListAnimator" 控制。控制 android:elevation 和 android:translationZ 属性。”(参见上述问题的已接受答案。)

如果您真的不关心 StateListAnimator 为您的布局做了什么，您可以通过将 android:stateListAnimator="@null" 添加到按钮的 XML 中来简单地消除它。这是添加此代码后布局的样子。 (请注意，设计器可能不会立即显示更改；Android Studio 3.0 Beta 6 不会)。因此，您可能需要刷新布局才能看到更改。

如您所见，按钮现在如我们预期的那样位于 View 上方。

如果您确实关心 StateListAnimator 为您做了什么，您将需要定义自己的名称并在上面更改的 XML 语句中输入其名称而不是 @null。我在上面引用的答案有 Android 可能使用的 StateListAnimator，因此您可以以此为基础并将高度更改为您喜欢的高度。我没试过这个，但它应该有用。