文本在 BottomNavigationView 后面 - Kotlin

在BottomNavigationView中，文本可以在图标下面显示，也可以在图标后面显示。本文将介绍如何让文本在图标后面显示。

步骤

1. 在XML布局文件中，将每个菜单项的layout设置为以下代码：

   <com.google.android.material.bottomnavigation.BottomNavigationItemView
         android:id="@+id/nav_home"
         android:layout_width="0dp"
         android:layout_height="match_parent"
         android:layout_weight="1"
         android:icon="@drawable/ic_home"
         app:labelVisibilityMode="unlabeled"
         />
   

   注意，要将app:labelVisibilityMode="unlabeled"设置为unlabeled，以显示图标后面的文本。

2. 在BottomNavigationView的XML布局代码中，添加以下代码：

   app:itemIconTint="@drawable/selector_bottom_nav_color"
   app:itemTextColor="@drawable/selector_bottom_nav_color"
   app:labelVisibilityMode="labeled"
   

   app:itemIconTint设置图标的着色器，app:itemTextColor设置文本颜色的着色器，app:labelVisibilityMode="labeled"重新激活标签可见性，使其在图标下方显示。

3. 在drawable文件夹中，创建名为selector_bottom_nav_color.xml的文件，并将以下代码添加到该文件中：

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

   在上面的代码中，我们定义了两个状态，分别是选中和未选中，分别对应图标和文本颜色的不同状态。

4. 最后，在代码中设置选项卡的文本：

   val menu: Menu = bottomNavigationView.menu
   val menuItem: MenuItem = menu.findItem(R.id.nav_home)
   menuItem.title = "Home"
   

   在上面的代码中，我们获取了菜单项nav_home，然后设置了文本为Home。

结论

这就是如何在BottomNavigationView的图标后面显示文本的方法。通过上面的步骤，您可以更灵活地控制BottomNavigationView在您的应用中的外观和行为。