为什么我的按钮不能被 Android 中的另一个视图覆盖？

Question

我是 Android 开发新手。我有一个View，它的背景颜色为黑色，不透明度也为 75%，因此它会像编辑文本、文本视图和按钮上方的阴影一样。

正如您在组件树中看到的，我将按钮放在顶部，将阴影视图放在底部。我希望绿色按钮会覆盖在阴影视图下方，但正如您所见，它仍然在阴影视图的顶部

这是我使用的xml：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
                                                   xmlns:tools="http://schemas.android.com/tools"
                                                   xmlns:app="http://schemas.android.com/apk/res-auto"
                                                   android:layout_width="match_parent"
                                                   android:layout_height="match_parent"
                                                   tools:context=".Fragments.Search.SearchFragment"
                                                   android:id="@+id/constraintLayout_search">

    <Button
            android:text="Cari Acara"
            android:layout_width="0dp"
            android:layout_height="50dp" android:id="@+id/button_search_event_search"
            android:layout_marginTop="32dp"
            app:layout_constraintTop_toBottomOf="@+id/editText_event_city_search"
            app:layout_constraintStart_toStartOf="parent" android:layout_marginStart="16dp"
            app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp"
            android:background="@drawable/rounded_button"
            android:textColor="#ffffff" app:layout_constraintHorizontal_bias="0.0"/>


    <View
            android:layout_width="0dp"
            android:layout_height="48dp"
            android:id="@+id/view_outer_search_bar_search_fragment"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent" android:background="?attr/colorPrimary"
            app:layout_constraintTop_toTopOf="parent"/>

    <View
            android:layout_width="0dp"
            android:layout_height="35dp"
            android:id="@+id/view_inner_rounded_search_fragment"
            android:background="@drawable/round_outline_search_view"
            app:layout_constraintEnd_toEndOf="@+id/view_outer_search_bar_search_fragment"
            app:layout_constraintStart_toStartOf="@+id/view_outer_search_bar_search_fragment"
            android:layout_marginEnd="16dp"
            app:layout_constraintHorizontal_bias="0.0"
            android:layout_marginStart="16dp"
            app:layout_constraintTop_toTopOf="parent"/>

    <ImageView
            android:src="@drawable/ic_search"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/imageView_search_icon_search_bar_search_fragment"
            app:layout_constraintStart_toStartOf="@+id/view_inner_rounded_search_fragment"
            android:layout_marginStart="8dp"
            app:layout_constraintTop_toTopOf="@+id/view_inner_rounded_search_fragment"
            app:layout_constraintBottom_toBottomOf="@+id/view_inner_rounded_search_fragment"/>


    <EditText
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/editText_search_keyword_search_fragment"
            android:hint="Ketik nama acara, ustadz atau lokasi" android:textSize="12sp"
            app:layout_constraintStart_toEndOf="@+id/imageView_search_icon_search_bar_search_fragment"
            android:layout_marginStart="4dp" android:layout_marginEnd="8dp"
            app:layout_constraintEnd_toEndOf="@+id/view_inner_rounded_search_fragment"
            app:layout_constraintTop_toTopOf="@+id/view_inner_rounded_search_fragment"
            app:layout_constraintBottom_toBottomOf="@+id/view_inner_rounded_search_fragment"
            android:background="@android:color/transparent"
            android:imeOptions="actionSearch"
            android:maxLines="1"/>



    <TextView
            android:text="Jenis Acara"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_event_type_label_search"
            android:layout_marginTop="24dp" app:layout_constraintTop_toBottomOf="@id/view_grey_search_fragment"
            app:layout_constraintStart_toEndOf="@+id/imageView_event_type_icon_search" android:layout_marginStart="16dp"/>

    <ImageView
            android:src="@drawable/ic_help"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView_event_type_icon_search" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/textView_event_type_label_search"/>

    <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/editText_event_type_search"
            app:layout_constraintTop_toTopOf="@+id/imageView_event_type_icon_search" app:layout_constraintBottom_toBottomOf="@+id/imageView_event_type_icon_search"
            app:layout_constraintStart_toEndOf="@+id/imageView_event_type_icon_search" android:layout_marginStart="16dp"
            app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp" tools:text="Kajian Islam"
            android:cursorVisible="false"
            android:focusable="false"
            android:focusableInTouchMode="false"/>

    <ImageView
            android:src="@drawable/ic_date_time"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView_event_time_icon_search"
            app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" app:layout_constraintTop_toBottomOf="@+id/textView_event_time_label_search"
            android:layout_marginTop="8dp"/>

    <TextView
            android:text="Waktu"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_event_time_label_search" android:layout_marginTop="16dp"
            app:layout_constraintTop_toBottomOf="@+id/editText_event_type_search" app:layout_constraintStart_toEndOf="@+id/imageView_event_time_icon_search"
            android:layout_marginStart="16dp"/>

    <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/editText_event_date_time_search"
            app:layout_constraintTop_toTopOf="@+id/imageView_event_time_icon_search"
            app:layout_constraintBottom_toBottomOf="@+id/imageView_event_time_icon_search"
            app:layout_constraintStart_toEndOf="@+id/imageView_event_time_icon_search" android:layout_marginStart="16dp"
            app:layout_constraintEnd_toEndOf="parent" android:layout_marginEnd="16dp" tools:text="Besok"
            android:cursorVisible="false"
            android:focusable="false"
            android:focusableInTouchMode="false"/>

    <ImageView
            android:src="@drawable/ic_place"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:id="@+id/imageView_event_city_icon_search" app:layout_constraintStart_toStartOf="parent"
            android:layout_marginStart="16dp" android:layout_marginTop="16dp"
            app:layout_constraintTop_toBottomOf="@+id/textView_event_city_label_search"/>
    <TextView
            android:text="Kota"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_event_city_label_search" android:layout_marginTop="16dp"
            app:layout_constraintTop_toBottomOf="@+id/editText_event_date_time_search" app:layout_constraintStart_toEndOf="@+id/imageView_event_city_icon_search"
            android:layout_marginStart="16dp"/>
    <EditText
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:ems="10"
            android:id="@+id/editText_event_city_search"
            app:layout_constraintBottom_toBottomOf="@+id/imageView_event_city_icon_search"
            app:layout_constraintTop_toTopOf="@+id/imageView_event_city_icon_search" app:layout_constraintStart_toEndOf="@+id/imageView_event_city_icon_search"
            android:layout_marginStart="16dp" app:layout_constraintEnd_toEndOf="parent"
            android:layout_marginEnd="16dp" tools:text="Jakarta"
            android:cursorVisible="false"
            android:focusable="false"
            android:focusableInTouchMode="false"/>
    <View
            android:layout_width="0dp"
            android:layout_height="26dp"
            android:id="@+id/view_grey_search_fragment" app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:background="#E3E5E7"
            app:layout_constraintTop_toBottomOf="@+id/view_outer_search_bar_search_fragment"/>

    <TextView
            android:text="Atau cari berdasarkan"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/textView_find_based_on" android:textSize="12sp"
            app:layout_constraintBottom_toBottomOf="@+id/view_grey_search_fragment"
            app:layout_constraintTop_toTopOf="@+id/view_grey_search_fragment"
            app:layout_constraintStart_toStartOf="@+id/view_grey_search_fragment" android:layout_marginStart="16dp"
            android:textColor="#959799"/>
    <View
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:id="@+id/view_shadow_search_fragment"
            app:layout_constraintTop_toBottomOf="@+id/view_outer_search_bar_search_fragment"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.55"
            app:layout_constraintBottom_toBottomOf="parent" android:background="#B3030000"
            android:visibility="visible"/>


</androidx.constraintlayout.widget.ConstraintLayout>

那么如何让我的按钮被阴影视图覆盖？

Answer 1

按钮比其他视图具有更高的高度，即使您在布局中较早声明它也是如此。

你可以 1) 将您的按钮包装在 FrameLayout 中。

<FrameLayout 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        ... or whatever constraints is required.
>

    <Button ... the button of interest/>
</FrameLayout>

或

2) 提升覆盖按钮的视图。

<View
        android:elevation="2dp"

        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:id="@+id/view_shadow_search_fragment"
        app:layout_constraintTop_toBottomOf="@+id/view_outer_search_bar_search_fragment" 
        app:layout_constraintHorizontal_bias="0.55"
        app:layout_constraintBottom_toBottomOf="parent" android:background="#B3030000"
        android:visibility="visible"/>

Answer 2

对于重叠视图应使用 FrameLayout 或 RelativeLayout。我已经为你链接了很棒的文章。 Article Link

在本文中使用了 RelativeLayout，但我强烈建议您使用 FrameLayout 来实现您的目的