AndroidBottomNavigationView结合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
}
}
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
