文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

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

2023-02-07 12:00

关注

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

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

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-移动开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯