Android底部导航栏→从0到入墓-优快云博客

一、简单介绍

底部导航栏是Android应用中常见的UI组件，位于屏幕底部，用于切换不同的页面。本文使用的是BottomNavigationView组件来实现底部导航栏

二、如何实现

步骤一：创建菜单资源文件

菜单资源文件是用来显示底部导航栏上的选项。
在res文件下，新创建一个menu的文件，在menu文件中创建资源文件bottom_nav_menu.xml
代码如下

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/navigation_home"
        android:title="主页" />

    <item
        android:id="@+id/navigation_setting"
        android:title="设置" />

</menu>

步骤二、创建各个页面对应的布局文件

每个选项都对应着一个页面，我们需要为每个页面都创建对应的布局文件。
例如首页（fragment_home.xml）

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="首页"
        android:textColor="@color/black"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

步骤三、创建Fragment类

我们在为每一个布局文件创建对应的逻辑文件。
例如首页(HomeFragment.kt)

class HomeFragment:Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        return inflater.inflate(R.layout.fragment_home,container,false)
    }

}

步骤四、完善Main的布局文件

<?xml version="1.0" encoding="utf-8"?>
<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">

    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/navView"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/navView"
        android:layout_width="0dp"
        android:layout_height="40dp"
        android:layout_gravity="bottom"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:itemTextColor="@drawable/bottom_navigation_selector"
        app:menu="@menu/bottom_nav_menu" />

</androidx.constraintlayout.widget.ConstraintLayout>

itemIconTint是为图标着色，itemTextColor是标题颜色，这里可以使用了一个selector，让选中的item和未选中的item展现不同颜色。
bottom_navigation_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/itemUnSelected" android:state_checked="false" />
    <item android:color="@color/itemSelected" android:state_checked="true" />
</selector>

itemUnSelected和itemSelected是两个颜色，随便写

步骤五、完善MainActivity文件

class MainActivity : AppCompatActivity(), NavigationBarView.OnItemSelectedListener {

    private lateinit var navView: BottomNavigationView
    private var currentFragment: Fragment? = null

    private val homeFragment by lazy { HomeFragment() }
    private val settingFragment by lazy { SettingFragment() }

    companion object {
        private const val HOME_FRAGMENT_TAG = "home_fragment"
        private const val SETTING_FRAGMENT_TAG = "setting_fragment"
    }

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        navView = findViewById(R.id.navView)
        navView.setOnItemSelectedListener(this)

        if (savedInstanceState == null) {
            // 首次创建时，默认显示首页
            switchFragment(homeFragment, HOME_FRAGMENT_TAG)
            navView.selectedItemId = R.id.navigation_home
        } else {
            // 从FragmentManager中恢复当前显示的Fragment
            restoreFragmentState()
        }
    }

    private fun restoreFragmentState() {
        val fragmentManager = supportFragmentManager
        val restoredHomeFragment = fragmentManager.findFragmentByTag(HOME_FRAGMENT_TAG)
        val restoredSettingFragment = fragmentManager.findFragmentByTag(SETTING_FRAGMENT_TAG)

        // 确定当前显示的Fragment
        currentFragment = when {
            restoredHomeFragment != null && !restoredHomeFragment.isHidden -> restoredHomeFragment
            restoredSettingFragment != null && !restoredSettingFragment.isHidden -> restoredSettingFragment
            else -> null
        }
    }

    override fun onNavigationItemSelected(item: MenuItem): Boolean {
        when (item.itemId) {
            R.id.navigation_home -> {
                return switchFragment(homeFragment, HOME_FRAGMENT_TAG)
            }
            R.id.navigation_setting -> {
                return switchFragment(settingFragment, SETTING_FRAGMENT_TAG)
            }
        }
        return false
    }

    private fun switchFragment(targetFragment: Fragment, tag: String): Boolean {
        if (targetFragment == currentFragment) {
            return false
        }

        val transaction = supportFragmentManager.beginTransaction()

        // 隐藏当前Fragment
        currentFragment?.let {
            transaction.hide(it)
        }

        // 如果目标Fragment已添加则显示，否则添加
        if (targetFragment.isAdded) {
            transaction.show(targetFragment)
        } else {
            transaction.add(R.id.fragment_container, targetFragment, tag)
        }

        transaction.commit()
        currentFragment = targetFragment
        return true
    }
}