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

ViewPager2 介绍

ViewPager2 是基于 RecyclerView 重新编写的 ViewPager,比原有的 ViewPager 具有很多优势。

关于 ViewPager2 的基本使用可以参考:https://developer.android.google.cn/training/animation/screen-slide-2?hl=zh-cn

第一步

编写布局,这里使用 DataBinding 不熟悉的可以参阅其他资料。

<?xml version="1.0" encoding="utf-8"?>
<layout>
 <data>
 </data>
 <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:layout_width="match_parent"
 android:layout_height="match_parent"
 tools:context=".MainActivity">
 <androidx.viewpager2.widget.ViewPager2
 android:id="@+id/vp2"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:orientation="horizontal"
 app:layout_constraintTop_toTopOf="parent"
 />
 <com.google.android.material.bottomnavigation.BottomNavigationView
 android:id="@+id/bnv"
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 app:labelVisibilityMode="labeled"
 app:layout_constraintBottom_toBottomOf="parent"
 app:menu="@menu/bottom_view"
 />
 </androidx.constraintlayout.widget.ConstraintLayout>
</layout>```
# 第二步编写 Menu
```kotlin
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
 <item
 android:id="@+id/A"
 android:icon="@mipmap/ic_launcher"
 android:title="A" />
 <item
 android:id="@+id/B"
 android:icon="@drawable/ic_launcher_background"
 android:title="B" />
</menu>

第三步编写 Fragment

这里不展示代码,我使用了 AS 的模板代码创建了两个 Fragment :AFragment、BFragment。

第四步编写 ViewPager2 的Adapter

ViewPager2 使用 FragmentStateAdapter 作为其 Adapter。

class ViewPagerAdapter(fragmentActivity: FragmentActivity,private val fragments:Map<Int,Fragment>) :FragmentStateAdapter(fragmentActivity){
 override fun getItemCount(): Int {
 return fragments.size
 }
 override fun createFragment(position: Int): Fragment {
 return fragments[position]!!
 }
}

第五步关联 ViewPager2 和 BottomNavigationView

Activity 的代码:

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

关联的工具类:

class BnvMediator(
 private val bnv: BottomNavigationView,
 private val vp2: ViewPager2,
 private val config: ((bnv: BottomNavigationView, vp2: ViewPager2) -> Unit)? = null
) {
 //存储bottomNavigationView的menu的item和其自身position的对应关系
 private val map = mutableMapOf<MenuItem, Int>()
 init {
 //初始化bnv的item和index对应关系
 bnv.menu.forEachIndexed { index, item ->
 map[item] = index
 }
 }
 /**
 * 关联BottomNavigationView和ViewPager2的选择关系
 */
 fun attach() {
 config?.invoke(bnv, vp2)
 vp2.registerOnPageChangeCallback(object : ViewPager2.OnPageChangeCallback() {
 override fun onPageSelected(position: Int) {
 super.onPageSelected(position)
 bnv.selectedItemId = bnv.menu[position].itemId
 }
 })
 bnv.setOnNavigationItemSelectedListener { item ->
 vp2.currentItem = map[item] ?: error("没有对应${item.title}的ViewPager2的元素")
 true
 }
 }
}
作者:OnexTwo原文地址:https://blog.csdn.net/qq_41105058/article/details/128852129

%s 个评论

要回复文章请先登录注册