NavHostFragment 的底部隐藏在 BottomNavigationView 后面

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>

Answer 1

我遇到了同样的问题，我找到了治疗方法。 @ianhanniballake 是对的，但这不是最终解决方案。问题在于 NavHostFragment 的“layout_height”值。您应该在 activity_main.xml 中完成接下来的 3 个步骤：

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

3. 的变化

   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"约束

第 3 步（最终）。将高度更改为 0dp 并为 NavHostFragment 添加android:layout_weight="1"

PS.希望这有助于解决其他类似问题

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。

Answer 3

添加

android:layout_marginBottom="55dp"

在你的androidx.navigation.fragment.NavHostFragment

Answer 4

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

当您想要基于constraints 调整width / height 以便它们占用与constraint 和其他View 相关的剩余空间时，请将width / height 设置为0dp。只有Constraints 工作。

Answer 5

试试下面的布局。您可以将 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" />

Answer 6

我将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>