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

Question

我有一个应用程序，它有一个 BottomNavigationView 和 ViewPager.如何使用新的 "导航架构组件 "来实现？

最好的做法是什么？

非常感谢

Answer 1

默认执行 BottomNavigationView 与导航拱门组件对我来说并不合适。当点击标签时，它会根据导航图从头开始。

我需要在屏幕底部有5个标签页，并且每个标签页都要有一个单独的回栈。这意味着当你在标签页之间切换时，你总是会回到与离开前完全相同的状态（就像在Instagram中一样）。

我的方法如下。

把... ViewPager 和 BottomNavigationView 在 activity_main.xml
设置 OnNavigationItemSelectedListener 到 BottomNavigationView 在 MainActivity.kt
为每个标签页创建单独的容器片段（它们将是每个标签页的起点）。
包括 NavHostFragment 容器片段的xml内。
在每个Container fragments中实现导航拱门组件的必要代码。
为每个标签页创建一个图表

注意：每一个图形都可以相互影响。

这里重要的一点是，我们将工具栏不在活动中，但在容器片段中。然后我们调用 setupWithNavController() 工具栏本身，而不将其设置为 supportActionBar. 这样，工具栏的标题就会自动更新，并且会有一个新的标题。后援按钮将被自动管理。

结果。

ViewPager存储了每个标签的状态。
没有担心碎片交易。
SafeArgs 和 DeepLinking 工作如期进行。
我们可以完全控制 BottomNavigationManager 和 ViewPager (即我们可以实现 OnNavigationItemReselectedListener 并决定将当前标签页中的列表滚动到顶部，然后再弹出回栈）。)

代码。

activity_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.kt

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_tab_1_container.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>

这里的start destination fragment是你想作为标签页中第一个屏幕出现的任何片段。

Answer 2

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

假设你在Fragment A中，有一个ViewPager的Fragment B，你试图从B导航到C。

在片段B中，使用ADirections类和一个从A到C的动作，findNavHost().navigateTo(ADirections.ActionFromAtoC)

Answer 3

我写过一篇相关的文章，关于查看寻呼机，特别是专注于标签式的Master-Detail片段，但同样的逻辑也适用于常规的ViewPagers。代码如下位于此.

Answer 4

我有一个MainFragment，它在一个viewPager里面托管Fragment A、Fragment B和Fragment C，我想从Fragment B（由MainFragment里面的viewPager托管）打开Fragment D。

我想从Fragment B打开Fragment D（由ViewPager在MainFragment内托管）。

所以我创建了一个从MainFragment到Fragment D的动作，并从Fragment B中调用了

val direction = FragmentMainDirections.actionFragmentMainToFragmentD()
findNavController().navigate(direction)

工作。

Answer 5

我已经实施了 安卓拱门导航 有viewpager.请看一下。欢迎大家提出改进意见。Lets learn togather.

https:/github.comMaqsood007AndroidJetpacktreemasterArchNavViewPagerImpl。

Answer 6

除了Marat的回答之外，为了让后堆栈与每个片段中的后退按钮一起工作，你必须在你的容器片段onViewCreated中添加这个。

val callback = object : OnBackPressedCallback(true) {
            override fun handleOnBackPressed() {
                if (!navHostFragment.navController.popBackStack()) {
                    isEnabled = false
                    activity?.onBackPressed()
                }
            }
        }
activity?.onBackPressedDispatcher?.addCallback(this, callback)

Answer 7

感谢@Marat - 他提供了很好的解决方案。在我的例子中，我有 第二个ViewPager的视图的listdetail-view导航。 并使用 无任何Action/Tool-bar的Fullscreeen模式。 :

想评论一些时刻。

1) 对我来说，在一个页面中使用一个通用图形是可能的，也是容易的。

<?xml version="1.0" encoding="utf-8"?>
<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/page2Coordinator"
    app:startDestination="@id/Fragment_2Coordinator">

    <fragment
        android:id="@+id/Fragment_2Coordinator"
        android:name="my.app.Fragment_2Coordinator"
        android:label="Fragment_2Coordinator">
        <action
            android:id="@+id/action_showList_2A"
            app:destination="@id/Fragment_2A" />
    </fragment>

    <fragment
        android:id="@+id/Fragment_2A"
        android:name="my.app.Fragment_2A"
        android:label="Fragment_2A">

        <action
            android:id="@+id/action_goToDetail_2B"
            app:destination="@id/Fragment_2B" />
    </fragment>

    <fragment
        android:id="@+id/Fragment_2B"
        android:name="my.app.Fragment_2B"
        android:label="Fragment_2B">

        <action
            android:id="@+id/action_backToList_2A"
            app:destination="@id/Fragment_2A" />
    </fragment>
</navigation>

2) 在Fragment_2Coordinator.onViewCreated()中不用工具栏操作，而只需在图中用动作导航(如果你不使用系统导航)。

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)
    val navHostFragment = childFragmentManager.findFragmentById(R.id. tab_1_nav_host_fragment) as NavHostFragment? ?: return
    val navController = navHostFragment.navController
    navController.navigate(R.id.action_showList_2A)
}

3) 要提供一个从2B返回到2A的手机返回按钮--进入Activity。

class MainActivity : AppCompatActivity() {

 .  .  .  .  . 

    override fun onBackPressed() {

        val navController = findNavController(R.id.tab_1_nav_host_fragment)

        when(navController.currentDestination?.id) {
            R.id.Fragment_2B -> {
                navController.navigate(R.id.action_backToList_2A)
            }
            else -> {
                super.onBackPressed()
            }
        }
        println()
    }
}

Answer 8

我们可以使用底部导航组件和NavigationGraph轻松实现。

你应该为每个底部导航菜单创建相应的片段。

导航图.xml

 <?xml version="1.0" encoding="utf-8"?>
    <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/nav_graph"
        app:startDestination="@id/actionHome">

        <fragment
            android:id="@+id/actionHome"
            android:name="com.sample.demo.fragments.Home"
            android:label="fragment_home"
            tools:layout="@layout/fragment_home">
            <action
                android:id="@+id/toExplore"
                app:destination="@id/actionExplore" />
        </fragment>
        <fragment
            android:id="@+id/actionExplore"
            android:name="com.sample.demo.fragments.Explore"
            android:label="fragment_explore"
            tools:layout="@layout/fragment_explore" />
        <fragment
            android:id="@+id/actionBusiness"
            android:name="com.sample.demo.fragments.Business"
            android:label="fragment_business"
            tools:layout="@layout/fragment_business" />
        <fragment
            android:id="@+id/actionProfile"
            android:name="com.sample.demo.fragments.Profile"
            android:label="fragment_profile"
            tools:layout="@layout/fragment_profile" />

    </navigation>

每个导航片段的ID和底部导航菜单项的ID都应该是相同的。 例如这里

 <fragment
  android:id="@+id/actionBusiness"
 android:name="com.sample.demo.fragments.Business"
                android:label="fragment_business"
                tools:layout="@layout/fragment_business" />

底部导航菜单导航.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/actionExplore"
        android:icon="@drawable/ic_search_24dp"
        android:title="@string/explore" />

    <item
        android:id="@+id/actionBusiness"
        android:icon="@drawable/ic_business_24dp"
        android:title="@string/business" />

    <item
        android:id="@+id/actionProfile"
        android:icon="@drawable/ic_profile_24dp"
        android:title="@string/profile" />


</menu>

在activity_main.xml中设置nav_graph.xml为palceholder片段。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/gradient_bg"
    android:focusable="true"
    android:focusableInTouchMode="true"
    tools:context=".MainActivity"
    tools:layout_editor_absoluteY="25dp">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:background="@color/semi_grey"
        app:itemIconTint="@drawable/bottom_bar_nav_item"
        app:itemTextColor="@drawable/bottom_bar_nav_item"
        app:labelVisibilityMode="labeled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:menu="@menu/navigation" />

    <include
        android:id="@+id/appBarLayout"
        layout="@layout/app_bar"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />


    <fragment
        android:id="@+id/mainNavigationFragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:paddingBottom="@dimen/activity_horizontal_margin"
        app:defaultNavHost="true"
        app:layout_constraintBottom_toTopOf="@+id/navigation"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/appBarLayout"
        app:navGraph="@navigation/nav_graph" />

</android.support.constraint.ConstraintLayout>

将导航图映射到这里的片段 app:navGraph="@navigationnav_graph"

之后在MainActivity.java中实现导航图和底部导航组件。

 BottomNavigationView navigation = (BottomNavigationView) findViewById(R.id.navigation);
        NavController navController = Navigation.findNavController(this, R.id.mainNavigationFragment);
        NavigationUI.setupWithNavController(navigation, navController);

干杯！！！

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

问题描述投票：31回答：8

8个回答

最新问题

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

问题描述 投票：31回答：8

8个回答

最新问题

问题描述投票：31回答：8