如何解决 Android Studio 中重叠组件的问题？

Question

On my main xml file, I have these four components arranged this way:在我的主 xml 文件中，我以这种方式排列了这四个组件：

<fragment...>

<RelativeLayout...>

<Button...>

<androidx.drawerLayout.widget.DrawerLayout...>

Since the DrawerLayout is on the topmost layer of my whole screen, (although it looks transparent) it covers all of my other components such as those inside the RelativeLayout which makes it impossible to click.由于 DrawerLayout 位于我整个屏幕的最顶层，（尽管它看起来是透明的）它覆盖了我所有的其他组件，例如位于 RelativeLayout 内部的组件，因此无法单击。 However, if I move it to the bottom of the component tree, the RelativeLayout covers it which is also not what I want.但是，如果我将它移动到组件树的底部，RelativeLayout 会覆盖它，这也不是我想要的。

I figured that there could be two ways in which I could solve the issue.我想可能有两种方法可以解决这个问题。 First by moving the whole RelativeLayout inside the DrawerLayout resulting to visual error of the RelativeLayout stretching all the way to the top of the screen, or by making the DrawerLayout clickthrough.首先通过在 DrawerLayout 内移动整个 RelativeLayout 导致 RelativeLayout 的视觉错误一直延伸到屏幕顶部，或者通过点击 DrawerLayout。 Which of the two is most efficient way of doing it and how can I do it?这两种方法中哪一种是最有效的方法，我该怎么做？

Here is the entire xml file of my activity:这是我的活动的整个 xml 文件：

    <fragment
        android:id="@+id/map"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintVertical_bias="0.0"
        map:layout_constraintBottom_toBottomOf="parent"
        map:layout_constraintEnd_toEndOf="parent"
        map:layout_constraintStart_toStartOf="parent"
        map:layout_constraintTop_toTopOf="parent"
        tools:context=".MapsActivity" />

    <RelativeLayout
        android:id="@+id/relativeLayout1"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_marginStart="20dp"
        android:layout_marginEnd="20dp"
        android:layout_marginBottom="20dp"
        android:background="@drawable/white_border"
        app:layout_constraintBottom_toBottomOf="@+id/map"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="1.0">

        <ImageView
            android:id="@+id/markerOrigin"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/buttonOrigin"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="0dp"
            android:layout_marginTop="-22dp"
            android:layout_marginBottom="121dp"
            android:contentDescription="@string/originMarkerDescription"
            map:srcCompat="@drawable/usersloacationbb" />

        <ImageView
            android:id="@+id/markerDestination"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/buttonDestination"
            android:layout_alignParentStart="true"
            android:layout_alignParentBottom="true"
            android:layout_marginStart="1dp"
            android:layout_marginTop="-20dp"
            android:layout_marginBottom="61dp"
            android:contentDescription="@string/destinationMarkerDescription"
            map:layout_constraintBottom_toBottomOf="parent"
            map:srcCompat="@drawable/destinationbb" />

        <Button
            android:id="@+id/buttonOrigin"
            android:layout_width="215dp"
            android:layout_height="34dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="70dp"
            android:layout_marginTop="23dp"
            android:layout_marginEnd="25dp"
            android:background="@drawable/search_shape"
            style="?android:attr/borderlessButtonStyle"/>

        <Button
            android:id="@+id/buttonDestination"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:layout_above="@+id/buttonTara"
            android:layout_below="@+id/buttonOrigin"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="69dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="26dp"
            android:layout_marginBottom="25dp"
            android:background="@drawable/search_shape"
            map:layout_constraintEnd_toEndOf="parent"
            map:layout_constraintStart_toStartOf="parent"
            style="?android:attr/borderlessButtonStyle"/>

        <Button
            android:id="@+id/buttonTara"
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentBottom="true"
            android:layout_marginEnd="25dp"
            android:layout_marginBottom="24dp"
            android:background="@drawable/button_tara"
            android:fontFamily="@font/bold"
            android:text="@string/buttonTara"
            android:textAllCaps="true"
            android:textColor="@color/white"
            android:textSize="15sp"
            style="?android:attr/borderlessButtonStyle"/>
    </RelativeLayout>

    <Button
        android:id="@+id/buttonDrawer"
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="52dp"
        android:layout_height="35dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="20dp"
        android:layout_marginTop="24dp"
        android:layout_marginEnd="270dp"
        android:background="@drawable/search_shape"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintTop_toTopOf="parent"
        map:layout_constraintEnd_toEndOf="parent"
        map:layout_constraintStart_toStartOf="parent" />

    <androidx.drawerlayout.widget.DrawerLayout
        android:id="@+id/drawerLayout"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0">

        <com.google.android.material.navigation.NavigationView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="start"
            app:menu="@menu/navigation_drawer">
        </com.google.android.material.navigation.NavigationView>

    </androidx.drawerlayout.widget.DrawerLayout>

Here's how it looks like with the DrawerLayout on the topmost layer: Correct display but unclickable components以下是最顶层 DrawerLayout 的样子：正确显示但不可点击的组件

Here's how it looks like with RelativeLayout inside the DrawerLayout: Correct arrangement of components but with padding issues on the button下面是在 DrawerLayout 中使用 RelativeLayout 的样子：组件排列正确，但按钮上存在填充问题

Here's how it looks like with the DrawerLayout on the bottom: DrawerLayout below other components下面是 DrawerLayout 在底部的样子： DrawerLayout 在其他组件下面

Any help is appreciated!任何帮助表示赞赏！

Answer 1

For clickable content and on top drawer you must move ConstraintLayout into DrawerLayout like this:对于可点击的内容和顶部抽屉，您必须像这样将 ConstraintLayout 移动到 DrawerLayout 中：

<?xml version="1.0" encoding="utf-8"?>

<androidx.drawerlayout.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawerLayout"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <RelativeLayout
            android:id="@+id/map"
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="0.0" />

        <RelativeLayout
            android:id="@+id/relativeLayout1"
            android:layout_width="match_parent"
            android:layout_height="200dp"
            android:layout_marginStart="20dp"
            android:layout_marginEnd="20dp"
            android:layout_marginBottom="20dp"
            android:background="@android:color/darker_gray"
            app:layout_constraintBottom_toBottomOf="@+id/map"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintVertical_bias="1.0">

            <ImageView
                android:id="@+id/markerOrigin"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/buttonOrigin"
                android:layout_alignParentStart="true"
                android:layout_alignParentBottom="true"
                android:layout_marginStart="0dp"
                android:layout_marginTop="-22dp"
                android:layout_marginBottom="121dp"
                android:contentDescription="originMarkerDescription"
                app:srcCompat="@drawable/common_google_signin_btn_icon_dark_normal" />

            <ImageView
                android:id="@+id/markerDestination"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignTop="@+id/buttonDestination"
                android:layout_alignParentStart="true"
                android:layout_alignParentBottom="true"
                android:layout_marginStart="1dp"
                android:layout_marginTop="-20dp"
                android:layout_marginBottom="61dp"
                android:contentDescription="destinationMarkerDescription"
                app:layout_constraintBottom_toBottomOf="parent"
                app:srcCompat="@drawable/common_full_open_on_phone" />

            <Button
                android:id="@+id/buttonOrigin"
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="215dp"
                android:layout_height="34dp"
                android:layout_alignParentStart="true"
                android:layout_alignParentEnd="true"
                android:layout_marginStart="70dp"
                android:layout_marginTop="23dp"
                android:layout_marginEnd="25dp"
                android:text="lk;'kl;'" />

            <Button
                android:id="@+id/buttonDestination"
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="wrap_content"
                android:layout_height="35dp"
                android:layout_above="@+id/buttonTara"
                android:layout_below="@+id/buttonOrigin"
                android:layout_alignParentStart="true"
                android:layout_alignParentEnd="true"
                android:layout_marginStart="69dp"
                android:layout_marginTop="24dp"
                android:layout_marginEnd="26dp"
                android:layout_marginBottom="25dp"
                android:text="lk;'kl;'"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent" />

            <Button
                android:id="@+id/buttonTara"
                style="?android:attr/borderlessButtonStyle"
                android:layout_width="wrap_content"
                android:layout_height="35dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentBottom="true"
                android:layout_marginEnd="25dp"
                android:layout_marginBottom="24dp"
                android:text="buttonTara"
                android:textAllCaps="true"
                android:textColor="@android:color/white"
                android:textSize="15sp" />
        </RelativeLayout>

        <Button
            android:id="@+id/buttonDrawer"
            style="?android:attr/borderlessButtonStyle"
            android:layout_width="52dp"
            android:layout_height="35dp"
            android:layout_alignParentStart="true"
            android:layout_alignParentEnd="true"
            android:layout_marginStart="20dp"
            android:layout_marginTop="24dp"
            android:layout_marginEnd="270dp"
            android:text="lk;'kl;'"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintHorizontal_bias="0.0"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />
    </androidx.constraintlayout.widget.ConstraintLayout>

    <com.google.android.material.navigation.NavigationView
        android:layout_gravity="start"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        app:menu="@menu/main"></com.google.android.material.navigation.NavigationView>

</androidx.drawerlayout.widget.DrawerLayout>

如何解决 Android Studio 中重叠组件的问题？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-02-06 11:31:50

如何解决 Android Studio 中重叠组件的问题？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-02-06 11:31:50

解决方案1
0 已采纳 2020-02-06 11:31:50