现在常用的App主页都会有一个底部导航栏，根据需求也使用过好几种方法进行实现，于是想着还是总结一下，今天还写一个简单的BottomNavigationView方法来实现这个功能
Android 底部导航栏（二、自定义View+Fragment）_&岁月不待人&的博客-CSDN博客
Android 底部导航栏（三、ViewPager+TabLayout+Fragment）简单易懂_&岁月不待人&的博客-CSDN博客_android 获取底部导航栏
Android 底部导航栏（四、ViewPager+RadioGroup+Fragment）简单易懂_&岁月不待人&的博客-CSDN博客
一、什么是BottomNavigationView？
它是android原生的一个底部导航框架，一般和Fragment一起使用。
二、实际操作
xml布局：最外层的layout不用管，那是databinding框架的根布局，主要的布局FrameLayout来装载fragment列表，BottomNavigationView实现底部导航栏，最后监听绑定实现点击切换
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools">
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatTextView //只是个文本
android:id="@+id/nav_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:padding="4dp"
android:text="BottomNavigationView+Menu+Fragment"
android:textColor="@color/black"
android:textSize="18sp"
android:textStyle="bold" />
<FrameLayout
android:id="@+id/fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/nav_menu"
android:layout_below="@id/nav_text" />
<View //只是个分界线
android:layout_width="match_parent"
android:layout_height="0.3dp"
android:layout_above="@id/nav_menu"
android:background="@color/tab_color_false"/>
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/nav_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:background="@color/white"
app:menu="@menu/nav_menu"
tools:layout_height="50dp" />
</RelativeLayout>
</layout>
其中BottomNavigationView控价下的app:menu属性为BottomNavigationView增加item
它是在menu文件下新增nav_menu布局，如何新建呢？看图
然后选择menu类型，命名就用默认的menu就行了 ，然后
就可以了，然后往里面加item
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_home"
android:icon="@drawable/yang_1"
android:title="首页" />
<item
android:id="@+id/navigation_tools"
android:icon="@drawable/yang_4"
android:title="工具" />
<item
android:id="@+id/navigation_play"
android:icon="@drawable/yang_5"
android:title="娱乐" />
<item
android:id="@+id/navigation_relax"
android:icon="@drawable/yang_2"
android:title="放松" />
<item
android:id="@+id/navigation_user_center"
android:icon="@drawable/yang_3"
android:title="个人中心" />
</menu>这样就把menu创建好了，接下来是Activity里面的代码：
/**
* author: LiXiang
* date: 2022/6/28 8:48 下午
* description:
*/
class NavMenuActivity : BaseBindActivity<NavMenuActivityLayoutBinding>() {
override val layout: Int
get() = R.layout.nav_menu_activity_layout
private lateinit var homeFragment: HomeFragment
private lateinit var toolsFragment: ToolsFragment
private lateinit var relaxFragment: RelaxFragment
private lateinit var meFragment: MineFragment
private lateinit var playFragment: PlayFragment
private lateinit var fragments: Array<BaseFragment>
private var mTextMessage: TextView? = null
//监听Item
private val mOnNavigationItemSelectedListener: BottomNavigationView.OnNavigationItemSelectedListener = BottomNavigationView.OnNavigationItemSelectedListener { item ->
when (item.itemId) {
R.id.navigation_home -> {
replaceFragment(fragments[0], fragments[0].tag.toString())
mTextMessage?.text = "第1个fragment"
return@OnNavigationItemSelectedListener true
}
R.id.navigation_tools -> {
replaceFragment(fragments[1], fragments[1].tag.toString())
mTextMessage?.text = "第2个fragment"
return@OnNavigationItemSelectedListener true
}
R.id.navigation_play -> {
replaceFragment(fragments[2], fragments[2].tag.toString())
mTextMessage?.text = "第3个fragment"
return@OnNavigationItemSelectedListener true
}
R.id.navigation_relax -> {
replaceFragment(fragments[3], fragments[3].tag.toString())
mTextMessage?.text = "第4个fragment"
return@OnNavigationItemSelectedListener true
}
R.id.navigation_user_center -> {
replaceFragment(fragments[4], fragments[4].tag.toString())
mTextMessage?.text = "第5个fragment"
return@OnNavigationItemSelectedListener true
}
}
false
}
override fun initView() {
val navigation: BottomNavigationView = findViewById(R.id.nav_menu)
mTextMessage = findViewById(R.id.nav_text)
navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)
navigation.itemIconTintList = null
navigation.itemTextColor = ColorStateList.valueOf(ContextCompat.getColor(this, R.color.black))
homeFragment = HomeFragment()
toolsFragment = ToolsFragment()
relaxFragment = RelaxFragment()
meFragment = MineFragment()
playFragment = PlayFragment()
fragments = arrayOf(homeFragment, toolsFragment, playFragment, relaxFragment, meFragment)
fragments.forEach {
addFragment(it, it.tag.toString())
hideFragment(it)
}
showFragment(fragments[0])
}
//添加Fragment到FragmentList中
private fun addFragment(fragment: Fragment, tag: String) {
val fragmentManager = supportFragmentManager
val transaction: FragmentTransaction = fragmentManager.beginTransaction()
transaction.add(R.id.fragment_container, fragment, tag)
transaction.commit()
}
// 清空fragmentList的所有Fragment，替换成新的Fragment，注意Fragment里面的坑
private fun replaceFragment(fragment: Fragment, tag: String) {
val fragmentManager = supportFragmentManager
val transaction: FragmentTransaction = fragmentManager.beginTransaction()
transaction.replace(R.id.fragment_container, fragment, tag)
transaction.commit()
}
//把Fragment设置成显示状态，但是并没有添加到FragmentList中
private fun showFragment(fragment: Fragment) {
val fragmentManager = supportFragmentManager
val transaction: FragmentTransaction = fragmentManager.beginTransaction()
transaction.show(fragment)
transaction.commit()
}
//把Fragment设置成显示状态，但是并没有添加到FragmentList中
private fun hideFragment(fragment: Fragment) {
val fragmentManager = supportFragmentManager
val transaction: FragmentTransaction = fragmentManager.beginTransaction()
transaction.hide(fragment)
transaction.commit()
}
}代码很简单，先把fragment列表添加到FrameLayout容器里，默认展示第一个fragment，通过BottomNavigationView.OnNavigationItemSelectedListener 方法，实现了fragment的切换。
展示效果：
一些总结：
1、 navigation.itemIconTintList = null 这行代码不可缺少，不然你的导航栏的item图片会很丑，这行代码，可以让你的图片正常展示,因为默认的menu有个很丑的类似于蒙层的感觉。
2、navigation.itemTextColor = ColorStateList.valueOf(ContextCompat.getColor(this, R.color.black)) 这个是设置item的文本颜色
版权声明：本文为LoveFHM原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。