如何使用新的导航架构组件实现具有BottomNavigationView的ViewPager？

Question

我有一个带有底部导航视图（BottomNavigationView）和查看页面（ViewPager）的应用程序。如何使用新的“导航架构组件”实现它

最佳做法是什么？

非常感谢

Answer 1

对我来说，一个解决方案是将ViewPager中的片段排除在导航之外，并直接设置页面片段上的操作，就好像这些页面是主机一样。为了更好地解释它：

假设您在片段A中，有一个片段B的ViewPager，您尝试从B导航到C

在片段B中，使用A方向类和从A到C的操作。findNavHost（）. Navigate To（A方向。ActionFromAtoC）

Answer 2

更新（21年6月15日）：

从导航组件版本2.4.0-alpha01开始，支持开箱即用的多个回栈。根据留档，如果您将NavigationView或BottomNavigationView与导航组件一起使用，那么多个回栈应该可以工作，而无需对以前的实现进行任何代码更改。

作为此更改的一部分，onNavDestinationSelected（）的NavigationUI方法，BottomNavigationView。setupWithNavController（）和NavigationView。setupWithNavController（）现在自动保存和恢复弹出目标的状态，支持多个后台堆栈，而无需任何代码更改。当使用片段导航时，建议使用这种方式与多个后台堆栈集成。

原始答案：

带有导航拱门组件的默认底部导航视图（BottomNavigationView）实现不适合我。单击选项卡时，它会根据导航图从头开始。

我需要在屏幕底部有5个标签，每个标签都有一个单独的背面堆栈。这意味着在标签之间切换时，您将始终返回到与离开前完全相同的状态（如在Instagram中）。

我的做法如下：

1. 将“ViewPager”和“BottomNavigationView”放在“activity\u main”中。xml

注意：每个图形都可以相互交互。

这里重要的一点是，我们不把工具栏放在活动中，而是放在容器片段中。然后我们在工具栏本身调用setupWitNavController（），而不将其设置为support portActionBar。这样工具栏标题将自动更新，备份/向上按钮将自动管理。

结果：

• ViewPager存储每个选项卡的状态

代码：

活动_main。xml

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/main_view_pager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/main_bottom_navigation_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="?android:attr/windowBackground"
        app:menu="@menu/navigation" />

</LinearLayout>

MainActivity.kt

import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

    private lateinit var viewPagerAdapter: ViewPagerAdapter

    private val mOnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
        when (item.itemId) {
            R.id.navigation_tab_1 -> {
                main_view_pager.currentItem = 0
                return@OnNavigationItemSelectedListener true
            }
            R.id.navigation_tab_2 -> {
                main_view_pager.currentItem = 1
                return@OnNavigationItemSelectedListener true
            }
        }
        false
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        viewPagerAdapter = ViewPagerAdapter(supportFragmentManager)
        main_view_pager.adapter = viewPagerAdapter
        
        main_bottom_navigation_view.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
    }
}

ViewPagerAdapter。千吨

class ViewPagerAdapter(fm: FragmentManager) : FragmentPagerAdapter(fm) {

    override fun getItem(position: Int): Fragment {
        return when (position) {
            0 -> Tab1ContainerFragment()
            else -> Tab2ContainerFragment()
        }
    }

    override fun getCount(): Int {
        return 2
    }
}

fragment\u tab\u 1\u容器。xml

<RelativeLayout 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=".Tab1ContainerFragment">

    <androidx.appcompat.widget.Toolbar
        android:id="@+id/tab_1_toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark" />

    <fragment
        android:id="@+id/tab_1_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/navigation_graph_tab_1" />

</RelativeLayout>

Tab1ContainerFragment.kt

class Tab1ContainerFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_tab_1_container, container, false)
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val toolbar = view.findViewById<Toolbar>(R.id.tab_1_toolbar)

        val navHostFragment = childFragmentManager.findFragmentById(R.id.tab_1_nav_host_fragment) as NavHostFragment? ?: return

        val navController = navHostFragment.navController

        val appBarConfig = AppBarConfiguration(navController.graph)

        toolbar.setupWithNavController(navController, appBarConfig)
    }
}

我们可以创建任意数量的导航图：

但是我们需要为每个选项卡有一个单独的图表：

<navigation 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/navigation_graph_tab_1"
    app:startDestination="@id/tab1StartFragment">

    <fragment
        android:id="@+id/tab1StartFragment"
        android:name="com.marat.android.bottomnavigationtutorial.Tab1StartFragment"
        android:label="fragment_tab_1_start"
        tools:layout="@layout/fragment_tab_1_start">
        <action
            android:id="@+id/action_tab_1_to_content"
            app:destination="@id/navigation_graph_content" />
    </fragment>

    <include app:graph="@navigation/navigation_graph_content" />
</navigation>

这里开始目标片段是您希望在选项卡中显示为第一个屏幕的任何片段。