Android中的BottomNavigationView

BottomNavigationView是一个Android中UI元素，用于在底部显示导航菜单。它具有Google Material设计的外观和感觉，类似于选项卡，可让用户轻松浏览不同的功能。BottomNavigationView与AppBarLayout，CoordinatorLayout和CollapsingToolbarLayout等其他材料设计元素一起使用，可创建现代且功能强大的应用程序。

如何使用BottomNavigationView

要在应用程序中使用BottomNavigationView，请在布局文件中添加以下代码：

<com.google.android.material.bottomnavigation.BottomNavigationView
                android:id="@+id/bottom_navigation"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:menu="@menu/bottom_navigation_menu" />

此代码创建一个BottomNavigationView实例，其ID为“bottom_navigation”，带有匹配父元素宽度和包裹内容高度。它还有一个名为“bottom_navigation_menu”的资源文件，用于指定菜单项。

为了设置菜单项，我们需要在res/menu文件夹中创建一个名为“bottom_navigation_menu.xml”的文件，并添加以下代码：

<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/menu_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />

    <item
        android:id="@+id/menu_search"
        android:icon="@drawable/ic_search"
        android:title="Search" />

    <item
        android:id="@+id/menu_favorite"
        android:icon="@drawable/ic_favorite"
        android:title="Favorite" />

    <item
        android:id="@+id/menu_profile"
        android:icon="@drawable/ic_person"
        android:title="Profile" />

</menu>

此代码定义四个菜单项，每个具有唯一ID，图标和标题。

现在，我们已经创建了BottomNavigationView和菜单项。让我们继续处理相应的点击事件。我们需要在Activity或Fragment中设置OnNavigationItemSelectedListener，听取菜单项的选择，并针对选择执行操作。

bottom_navigation.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.menu_home -> {
                    // Home button clicked
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.menu_search -> {
                    // Search button clicked
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.menu_favorite -> {
                    // Favorite button clicked
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.menu_profile -> {
                    // Profile button clicked
                    return@setOnNavigationItemSelectedListener true
                }
                else -> return@setOnNavigationItemSelectedListener false
            }
        }

此代码定义了一个OnNavigationItemSelectedListener，并为每个菜单项设置了相应的点击操作。在代码中，我们将监听器返回true，以表示已处理单击事件。我们还可以返回false来指示我们将不能处理单击事件。

自定义BottomNavigationView

BottomNavigationView是高度可定制的，可以轻松更改外观，颜色，字体和其他属性。例如，我们可以更改选定和非选定菜单项的颜色，以表示当前活动菜单项。

要更改选定和非选定菜单项的颜色，请使用以下代码：

    app:itemIconTint="@color/bottom_nav_color_selector"
    app:itemTextColor="@color/bottom_nav_color_selector"

使用此代码，我们可以指定一个Selector颜色文件，“bottom_nav_color_selector.xml”，用于定义选定和非选定菜单项的颜色。

<selector xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Selected state -->    
<item android:color="@color/colorPrimaryDark" android:state_checked="true"/> 

<!-- Unselected State -->
<item android:color="@color/colorGray" android:state_checked="false"/> 

</selector>

这个文件定义了选定和非选定状态下菜单项的颜色。

我们还可以添加新的动画效果，以使BottomNavigationView对用户更具吸引力。BottomNavigationView支持AnimationDrawable，Animators和Transition等动画特效。例如，以下代码实现文本显示动画：

bottom_navigation.setOnNavigationItemSelectedListener { item ->
            when (item.itemId) {
                R.id.menu_home -> {
                    animateText(textView, "Home")
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.menu_search -> {
                    animateText(textView, "Search")
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.menu_favorite -> {
                    animateText(textView, "Favorite")
                    return@setOnNavigationItemSelectedListener true
                }
                R.id.menu_profile -> {
                    animateText(textView, "Profile")
                    return@setOnNavigationItemSelectedListener true
                }
                else -> return@setOnNavigationItemSelectedListener false
            }
        }
        
 private fun animateText(textView: TextView, newText: String) {
        val anim = AnimationUtils.loadAnimation(this, R.anim.fadeout)
        anim.duration = 200
        anim.fillAfter = true
        textView.startAnimation(anim)

        textView.text = newText

        val anim2 = AnimationUtils.loadAnimation(this, R.anim.fadein)
        anim2.duration = 200
        anim2.fillAfter = true
        textView.startAnimation(anim2)
    }

此代码更改文本视图中的文本时使用淡入淡出效果。

结论

BottomNavigationView是用于创建现代Android应用程序的重要UI元素。它允许用户轻松访问不同的应用程序功能。在应用程序中正确使用BottomNavigationView并自定义其外观和行为非常重要，这将使应用程序更具吸引力和易于使用。