底部导航栏 Android 在不断变化的片段上跳转

Question

我使用Navigation Component 实现了底部导航栏，在使用底部导航栏更改片段时效果很好。但是当我从片段中导航时，它会跳转并创建一个空白 - gif

我该如何解决这个问题？

这是activity_main的XML

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main_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="0dp"
        android:layout_height="0dp"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/bottom_nav_bar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:navGraph="@navigation/nav_graph" />

    <com.google.android.material.bottomnavigation.BottomNavigationView

        android:id="@+id/bottom_nav_bar"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/bottom_menu"/>


</androidx.constraintlayout.widget.ConstraintLayout>

编辑：

这个问题是因为我试图显示和隐藏顶部工具栏造成的。

我使用以下代码在片段的OnCreateView() 函数中显示/隐藏工具栏 代码：(activity as AppCompatActivity).supportActionBar?.show() 和 (activity as AppCompatActivity).supportActionBar?.hide()

如何在不丢失隐藏/显示工具栏功能的情况下解决上述问题？

Answer 1

这可能有点晚了，但可能对其他人有所帮助。

所以，要解决这个问题，你必须做 3 件事：

1：将操作栏添加为布局系统的叠加层：

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    ...
    <item name="windowActionBarOverlay">true</item>
</style>

这可确保隐藏 BottomNavigationView 不会跳跃、闪烁或创建任何不需要的空白。显然，这将与您的布局重叠，因此您可以设置首选操作栏高度的 marginTop。 所以，到目前为止，底部没有更多的空白和跳转，但这会导致另一个问题，当隐藏操作栏时会有一个永久的空白。解决这个问题会导致下一点

2：添加一个辅助视图，而不是与操作栏完全一样的高度的上边距：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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="match_parent">

    <View
        android:id="@+id/toolbar_placeholder"
        android:layout_width="match_parent"
        android:layout_height="@dimen/toolbar_height" />

    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/toolbar_placeholder" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav_view"
        android:layout_width="match_parent"
        android:layout_height="@dimen/bottom_nav_height"
        android:layout_alignParentBottom="true"
        app:itemBackground="@drawable/bg_bottom_nav_item"
        app:itemIconTint="@drawable/nav_item_color_state"
        app:itemTextColor="@drawable/nav_item_color_state"
        app:labelVisibilityMode="labeled" />
</RelativeLayout>

我们将在布局顶部显示/隐藏这个辅助视图，名为toolbar_placeholder

3：实际隐藏和显示工具栏占位符：

myRecyclerView.addOnScrollListener(object: RecyclerView.OnScrollListener() {
    val mainActivity = requireActivity() as MainActivity
    var scrollDown = false

    override fun onScrollStateChanged(recyclerView: RecyclerView, newState: Int) {
        super.onScrollStateChanged(recyclerView, newState)
        if (scrollDown) {
            // set toolbar_placeholder visibility to View.GONE
        // hide the action bar
        // hide the bottom navigation bar (preferably with animation)
        } else {
            // set toolbar_placeholder visibility to View.VISIBLE
        // show the action bar
        // show the bottom navigation bar (preferably with animation)
        }
    }

    override fun onScrolled(recyclerView: RecyclerView, dx: Int, dy: Int) {
        super.onScrolled(recyclerView, dx, dy)
        if (dy > 50) {
            scrollDown = true
        } else if (dy < -5) {
            scrollDown = false
        }
    }
})

PS：（您可以尝试设置一个marginTop anc 以编程方式一起更改LayoutParams，而不是隐藏和显示工具栏占位符View，但我选择了后者）

干杯！