Android BottomNavigationView结合ViewPager实现底部导航栏步骤详解

天涯勇远

ViewPager2 介绍
ViewPager2 是基于 RecyclerView 重新编写的 ViewPager,比原有的 ViewPager 具有很多优势。
关于 ViewPager2 的基本使用可以参考：https://developer.android.google.cn/training/animation/screen-slide-2?hl=zh-cn
第一步
编写布局，这里使用 DataBinding 不熟悉的可以参阅其他资料。

1. <?xml version="1.0" encoding="utf-8"?>
   
2. <layout>
   
3.    <data>
   
4.    </data>
   
5.    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
   
6.        xmlns:app="http://schemas.android.com/apk/res-auto"
   
7.        xmlns:tools="http://schemas.android.com/tools"
   
8.        android:layout_width="match_parent"
   
9.        android:layout_height="match_parent"
   
10.        tools:context=".MainActivity">
    
11.       <androidx.viewpager2.widget.ViewPager2
    
12.           android:id="@+id/vp2"
    
13.           android:layout_width="match_parent"
    
14.           android:layout_height="match_parent"
    
15.           android:orientation="horizontal"
    
16.           app:layout_constraintTop_toTopOf="parent"
    
17.           />
    
18.       <com.google.android.material.bottomnavigation.BottomNavigationView
    
19.           android:id="@+id/bnv"
    
20.           android:layout_width="match_parent"
    
21.           android:layout_height="wrap_content"
    
22.           app:labelVisibilityMode="labeled"
    
23.           app:layout_constraintBottom_toBottomOf="parent"
    
24.           app:menu="@menu/bottom_view"
    
25.           />
    
26.    </androidx.constraintlayout.widget.ConstraintLayout>
    
27. </layout>```
    
28. # 第二步编写 Menu
    
29. ```kotlin
    
30. <?xml version="1.0" encoding="utf-8"?>
    
31. <menu xmlns:android="http://schemas.android.com/apk/res/android">
    
32.     <item
    
33.         android:id="@+id/A"
    
34.         android:icon="@mipmap/ic_launcher"
    
35.         android:title="A" />
    
36.     <item
    
37.         android:id="@+id/B"
    
38.         android:icon="@drawable/ic_launcher_background"
    
39.         android:title="B" />
    
40. </menu>

复制代码

第三步编写 Fragment
这里不展示代码，我使用了 AS 的模板代码创建了两个 Fragment ：AFragment、BFragment。
第四步编写 ViewPager2 的Adapter
ViewPager2 使用 FragmentStateAdapter 作为其 Adapter。

1. class ViewPagerAdapter(fragmentActivity: FragmentActivity,private  val fragments:Map<Int,Fragment>) :FragmentStateAdapter(fragmentActivity){
   
2.     override fun getItemCount(): Int {
   
3.         return fragments.size
   
4.     }
   
5.     override fun createFragment(position: Int): Fragment {
   
6.        return fragments[position]!!
   
7.     }
   
8. }

复制代码

第五步关联 ViewPager2 和 BottomNavigationView
Activity 的代码：

1. class MainActivity : AppCompatActivity() {
   
2.     var binding:ActivityMainBinding?=null
   
3.     private val fragments= mapOf<Int,Fragment>(
   
4.         A to AFragment.newInstance("1","2"),
   
5.         B to BFragment.newInstance("3","4")
   
6.     )
   
7.     override fun onCreate(savedInstanceState: Bundle?) {
   
8.         super.onCreate(savedInstanceState)
   
9.         binding=ActivityMainBinding.inflate(LayoutInflater.from(this))
   
10.         setContentView(binding?.root)
    
11.         binding?.apply {
    
12.             vp2.adapter=ViewPagerAdapter(this@MainActivity,fragments)
    
13.             BnvMediator(bnv, vp2) { bnv, vp2 ->
    
14.                 vp2.isUserInputEnabled = true//为false ViewPager2 不能滑动
    
15.                 bnv.itemIconTintList=null//显示 BottomNavigationView 的图标。
    
16.             }.attach()
    
17.         }
    
18.     }
    
19.     companion object{
    
20.         private val A:Int=0
    
21.         private val B:Int=1
    
22.     }
    
23. }

复制代码

关联的工具类：

1. class BnvMediator(
   
2.     private val bnv: BottomNavigationView,
   
3.     private val vp2: ViewPager2,
   
4.     private val config: ((bnv: BottomNavigationView, vp2: ViewPager2) -> Unit)? = null
   
5. ) {
   
6.     //存储bottomNavigationView的menu的item和其自身position的对应关系
   
7.     private val map = mutableMapOf<MenuItem, Int>()
   
8.     init {
   
9.         //初始化bnv的item和index对应关系
   
10.         bnv.menu.forEachIndexed { index, item ->
    
11.             map[item] = index
    
12.         }
    
13.     }
    
14.     /**
    
15.      * 关联BottomNavigationView和ViewPager2的选择关系
    
16.      */
    
17.     fun attach() {
    
18.         config?.invoke(bnv, vp2)
    
19.         vp2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
    
20.             override fun onPageSelected(position: Int) {
    
21.                 super.onPageSelected(position)
    
22.                 bnv.selectedItemId = bnv.menu[position].itemId
    
23.             }
    
24.         })
    
25.         bnv.setOnNavigationItemSelectedListener { item ->
    
26.             vp2.currentItem = map[item] ?: error("没有对应${item.title}的ViewPager2的元素")
    
27.             true
    
28.         }
    
29.     }
    
30. }

复制代码

到此这篇关于Android BottomNavigationView结合ViewPager实现底部导航栏步骤详解的文章就介绍到这了,更多相关Android BottomNavigationView底部导航栏内容请搜索晓枫资讯以前的文章或继续浏览下面的相关文章希望大家以后多多支持晓枫资讯！

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

破晓311

路过，支持一下

刘娅友

感谢楼主分享。