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

作者:OnexTwo 时间:2021-09-01 00:42:38 

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
       }
   }
}

来源:https://blog.csdn.net/qq_41105058/article/details/128852129

标签:Android,BottomNavigationView,ViewPager,导航栏
0
投稿

猜你喜欢

  • C#实现对字符串进行大小写切换的方法

    2021-07-24 03:30:30
  • Android activity动画不生效原因及解决方案总结

    2022-12-18 16:31:41
  • Android实现自动提取短信验证码功能

    2022-11-19 23:58:49
  • Java之如何关闭流

    2023-11-04 21:29:11
  • C# 开发(创蓝253)手机短信验证码接口的实例

    2023-05-22 11:15:54
  • 深入浅析SpringBoot自动配置原理

    2022-11-19 01:49:24
  • Android APP存活检测方式

    2023-10-14 10:02:41
  • java中Cookie被禁用后Session追踪问题

    2023-10-17 13:44:32
  • SpringBoot Jpa分页查询配置方式解析

    2023-03-02 10:04:02
  • java实现dijkstra最短路径寻路算法

    2021-10-23 06:29:58
  • Java实现经典游戏复杂迷宫

    2021-05-29 22:33:34
  • 基于C#实现一个简单的FTP操作工具

    2023-05-12 11:50:58
  • c#基于Win32Api实现返回Windows桌面功能

    2022-11-21 15:29:51
  • C#读取txt文件数据的方法实例

    2022-12-08 15:25:41
  • Maven生命周期和及插件原理用法详解

    2021-09-17 09:47:19
  • 模仿美团点评的Android应用中价格和购买栏悬浮固定的效果

    2021-11-12 12:00:42
  • C#在WinForm中使用WebKit传递js对象实现与网页交互的方法

    2021-05-26 00:07:08
  • springboot表单提交之validator校验

    2023-05-16 23:19:17
  • Java编程中的检查型异常与非检查型异常分析

    2023-11-04 13:08:38
  • Android下拉列表选项框及指示箭头动画

    2022-09-28 04:08:15
  • asp之家 软件编程 m.aspxhome.com