导航宿主片段底部被底部导航视图遮盖了。

Question

我有一个布局，其中底部有一个导航栏，主要内容在NavHostFragment中。现在NavHostFragment的底部被导航栏隐藏了。我该如何解决？

这是活动的主要布局：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/mobile_navigation" />


    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="?android:attr/windowBackground"
        android:layout_alignParentBottom="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

这是导航宿主的其中一个片段：

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

<androidx.core.widget.NestedScrollView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:isScrollContainer="true"
    app:layout_constraintTop_toTopOf="parent">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

    </LinearLayout>

</androidx.core.widget.NestedScrollView>

- Holger

---

在您的情况下，只需使用线性布局，无需使用ConstraintLayout。 - Fahad Alotaibi

Answer 1

我有同样的问题，并找到了解决方法。@ianhanniballake是对的，但那不是最终解决方案。问题在于NavHostFragment的'layout_height'值。您应该按照以下3个步骤进行操作：

1. 确保从根ConstraintLayout中删除或删除android:paddingTop="?attr/actionBarSize"
2. 将app:layout_constraintTop_toBottomOf="@id/nav_host_fragment"添加到<BottomNavigationView>

3. 更改<fragment ... NavHostFragment>中的

   android:layout_height="match_parent"

android:layout_height="0dp"
android:layout_weight="1"

=======================

一点调查：

让我们从头开始创建一个“底部导航活动”项目。

步骤0.1：

将背景添加到activity_main.xml的根目录。

android:background="@android:color/holo_green_light"

步骤 0.2：更改 fragment_home.xml 的内容如下：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/holo_orange_dark">

    <TextView
        android:id="@+id/left_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="L_T"
        android:background="#ffcccc"
        android:layout_gravity="start|top"
        android:textSize="120sp" />

    <TextView
        android:id="@+id/right_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="R_B"
        android:background="#ccffcc"
        android:layout_gravity="end|bottom"
        android:textSize="120sp" />
</FrameLayout>

你将看到：

步骤1：移除android:paddingTop="?attr/actionBarSize"：

步骤2：为BottomNavigationView添加app:layout_constraintTop_toBottomOf="@id/nav_host_fragment"约束

第三步 (最后)。将高度更改为0dp，并为NavHostFragment添加android:layout_weight="1"

PS.希望这能对其他类似问题有所帮助

- chatlanin

---

非常好的答案。解决了我的问题。我已经搜索了两个小时，寻找解决方案。 - Wrichik Basu

Answer 2

你的 nav_view 缺少一个 app:layout_constraintTop_toBottomOf="@id/nav_host_fragment" - 你需要两个方向来建立约束链：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginStart="0dp"
    android:layout_marginEnd="0dp"
    android:background="?android:attr/windowBackground"
    android:layout_alignParentBottom="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@id/nav_host_fragment"
    app:menu="@menu/bottom_nav_menu" />

当然，在这种情况下，没有理由使用ConstraintLayout - 如果您只有垂直堆叠、不重叠的视图，应该使用LinearLayout。

- ianhanniballake

---

现在内容已经完全可见，但是它的顶部部分被 ActionBar 部分遮挡，底部导航栏被向下推，只有一部分仍然可见。 - Holger

如果你使用<androidx.fragment.app.FragmentContainerView>而不是<fragment>，你是否会看到相同的问题？ - ianhanniballake

在这种情况下，我会得到 java.lang.IllegalStateException: Activity does not have a NavController set。 - Holger

你应该遵循已知问题中的解决方案，并从NavHostFragment获取NavController。 - ianhanniballake

Answer 3

在你的androidx.navigation.fragment.NavHostFragment中添加以下内容：

android:layout_marginBottom="55dp"

- A J

---

硬编码这样的值可能不是一个好主意，Google将来可能会更改底部导航栏的高度。 - Kane Cheshire

Answer 4

为NavHostFragment设置android:layout_height="0dp"。

当您想要根据constraints调整width / height，使它们相对于其他View的constraint占用剩余空间时，请将width / height设置为0dp。只有这样，Constraints才能起作用。

- Chandan Pednekar

Answer 5

我使用了 LinearLayout 作为主要布局，并对子布局添加了 weights。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/nav_host_fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/mobile_navigation"
        android:layout_weight="2"/>

    <com.google.android.material.bottomnavigation.BottomNavigationView
        app:itemIconTint="@drawable/bottom_navigation_selector"
        app:itemTextColor="@drawable/bottom_navigation_selector"
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="0"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu" />

</LinearLayout>

- Zohab Ali

Answer 6

尝试以下布局。你可以将 appCustomViewPager 更改为任何对你有用的东西。

        <androidx.constraintlayout.widget.ConstraintLayout 
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

<com.impelsys.ebooks.ui.AppCustomViewPager
    android:id="@+id/view_pager"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/colorWhite"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    app:layout_constraintBottom_toTopOf="@+id/nav_view"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="1.0" />

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/nav_view"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="0dp"
    android:layout_marginStart="0dp"
    android:background="?android:attr/windowBackground"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

- Abhishek Dwarakanath