Question

我很难让AppBarLayout，NestedScrollView和BottomNavigationView一起正常工作。我的问题是，当我在NestedScrollView上设置app:layout_behavior="@string/appbar_scrolling_view_behavior"时，它延伸到BottomNavigationView的后面，如图所示。

所以问题是BottomNavBar覆盖了内容，而不是内容停留在Nav的顶部。

我尝试了许多解决方案，包括将布局包装在RelativeLayout中并将BottomNavView放置在其中而不是CoordinatorLayout。

这是我附加的示例项目的基本布局。

<androidx.coordinatorlayout.widget.CoordinatorLayout 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="com.example.android.navigationadvancedsample.MainActivity">

    <com.google.android.material.appbar.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:elevation="0dp">

        <androidx.appcompat.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:layout_scrollFlags="scroll|enterAlways" />
    </com.google.android.material.appbar.AppBarLayout>

    <androidx.core.widget.NestedScrollView
        android:id="@+id/app_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:fillViewport="true">
        <FrameLayout
            android:id="@+id/nav_host_container"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </androidx.core.widget.NestedScrollView>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_nav"/>
</androidx.coordinatorlayout.widget.CoordinatorLayout>

Here's一个小示例项目，它再现了问题（基于来自Google的Navigation组件示例）。有人可以告诉我我在做什么错吗？

Answer 1

您只需要从CoordinatorLayout中取出BottomNavigationView并将它们都放在RelativeLayout中即可。

我遇到了同样的问题，找到了解决方法here。希望对您有所帮助。

Answer 2

在您的代码中，NestedScrollView占据了整个屏幕。使用具有权重的垂直LinearLayout，您可以根据需要将其设置为NestedScrollView停在NavBar顶部的位置。

<androidx.core.widget.NestedScrollView
    android:id="@+id/app_scroll_view"
    android:layout_width="match_parent"
    android:layout_height="0dp" *** changed from match_parent to 0dp
    android:layout_weight="1" *** added weight to fill remaining screen
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    android:fillViewport="true">
    <FrameLayout
        android:id="@+id/nav_host_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/> *** changed from 0dp to match_parent
</androidx.core.widget.NestedScrollView>

现在的设置方式考虑了NavBar，并扩展了NestedScrollView的布局以填充屏幕上剩余的空白空间。现在NestedScrollView不会扩展到NavBar之外。

Answer 3

不确定。但是似乎在预览中工作。将nestedScrollView和BottomNavigation视图放入相对布局中。

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


<androidx.core.widget.NestedScrollView
        android:id="@+id/app_scroll_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/bottom_nav"
        android:fillViewport="true" android:layout_marginBottom="-2dp">
    <FrameLayout
            android:id="@+id/nav_host_container"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"/>
</androidx.core.widget.NestedScrollView>

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_alignParentBottom="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:menu="@menu/bottom_nav_menu"/>
</RelativeLayout>

使用带有滚动视图行为的工具栏时，BottomNavigationView会覆盖内容

3 个答案: