如何确保 CoordinatorLayout 子级不重叠

Question

我在协调器布局内使用底部应用栏。其余内容来自片段。片段内容被底部应用栏覆盖

因为我使用的是 bottomAppBar，所以它必须在 CoordintorLayout 内，并且所有子项也必须在其中。 BottomAppBar 上方的所有布局都应填充提醒空间，但如果我这样做，底部的视图会被覆盖。如何确保视图不与 BottomAppBar 重叠

<androidx.drawerlayout.widget.DrawerLayout
android:id="@+id/drawerLayout_main"
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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".main.MainActivity">

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:id="@+id/coordinatorLayout"
    android:layout_width="0dp"
    android:layout_height="wrap_content">

    </androidx.constraintlayout.widget.ConstraintLayout>

    <fragment
        android:id="@+id/fragment_main_navHost"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        android:layout_gravity="top"
        app:navGraph="@navigation/nav_graph"/>


    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottomAppBar_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:fabAlignmentMode="end"
        app:fabCradleMargin="4dp"
        app:hideOnScroll="true"/>

</androidx.coordinatorlayout.widget.CoordinatorLayout>

<com.google.android.material.navigation.NavigationView
    android:id="@+id/navView_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="start"
    app:headerLayout="@layout/nav_header_layout"
    app:menu="@menu/main_navigation"/>

我需要确保替换片段的任何内容都不应被底部应用栏覆盖，并且应该使用底部应用栏未使用的所有空白。在另一个世界中，内容应该在它之上，同时使用其余的空白空间，并且仍然在协调器布局内。

Answer 1

只需将margin 添加到您的片段容器中：

  <fragment
    android:id="@+id/fragment_main_navHost"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginBottom="{bottom_navigation_height}"
    android:layout_marginTop="{tool_bar_height}"
    app:defaultNavHost="true"
    android:layout_gravity="top"
    app:navGraph="@navigation/nav_graph"/>

Answer 2

根据CoordinatorLayout Documentation，可以使用layout_dodgeInsetEdges=”bottom” 指定CoordinatorLayout 中的视图期望与另一个视图重叠的边缘。因此，如果您的 Fragment 与您的 BottomAppBar 重叠，则将此属性添加到 Fragment。您还必须指定要避开 BottomAppBar。这是通过添加layout_insetEdge=”bottom” 来完成的。

要更具体地了解您的情况，请执行以下操作：

像这样将app:layout_dodgeInsetEdges="bottom" 添加到<fragment>：

<fragment
    app:layout_dodgeInsetEdges="bottom" <--- THIS
    android:id="@+id/fragment_main_navHost"
    android:name="androidx.navigation.fragment.NavHostFragment"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:defaultNavHost="true"
    android:layout_gravity="top"
    app:navGraph="@navigation/nav_graph"/>

将app:layout_insetEdge="bottom" 添加到BottomAppBar。 （请注意，如果 BottomAppBar 默认应用此插图，则此步骤是不必要的，因此也请尝试不使用它）：

<com.google.android.material.bottomappbar.BottomAppBar
    app:layout_insetEdge="bottom" <---- THIS
    android:id="@+id/bottomAppBar_main"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom"
    app:fabAlignmentMode="end"
    app:fabCradleMargin="4dp"
    app:hideOnScroll="true"/>

有一个really good article 展示了带有动画 gif 的示例，我强烈建议您查看。

Answer 3

尝试在片段中添加app:layout_behavior="@string/appbar_scrolling_view_behavior"。