Android：如何为Material底部导航栏文本添加第二行避免截断？

首先明确：Google的BottomNavigationView默认是单行文本显示，过长会被截断，但我们可以通过自定义MenuItem布局或者修改文本样式来实现文本换行到第二行的效果，下面分享两种可行方案：

方案一：自定义MenuItem布局（最灵活） #

这种方式可以完全控制导航项的结构，让文本自然换行。

1. 创建自定义导航项布局 #

在res/layout下新建bottom_nav_item.xml，包含图标和支持多行的文本：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:gravity="center"
    android:paddingVertical="8dp">

    <ImageView
        android:id="@+id/nav_icon"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:scaleType="centerInside"/>

    <TextView
        android:id="@+id/nav_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:singleLine="false"
        android:maxLines="2"
        android:textSize="12sp"
        android:gravity="center"
        android:layout_marginTop="4dp"/>
</LinearLayout>

2. 在代码中替换默认布局 #

在Activity/Fragment中，加载菜单后遍历每个MenuItem，替换为自定义布局，并处理选中状态：

val bottomNav = findViewById<BottomNavigationView>(R.id.bottomNav)

// 遍历菜单，替换每个item的布局
bottomNav.menu.forEachIndexed { index, menuItem ->
    val customView = LayoutInflater.from(this).inflate(R.layout.bottom_nav_item, null)
    // 设置图标和文本
    customView.findViewById<ImageView>(R.id.nav_icon).setImageDrawable(menuItem.icon)
    customView.findViewById<TextView>(R.id.nav_title).text = menuItem.title
    // 设置初始选中状态
    customView.isSelected = menuItem.isChecked
    // 将自定义视图添加到导航栏的对应位置
    bottomNav.getMenuView().getChildAt(index).apply {
        removeAllViews()
        addView(customView)
    }
}

// 处理导航项点击事件，更新选中状态和样式
bottomNav.setOnItemSelectedListener { selectedItem ->
    bottomNav.menu.forEachIndexed { index, menuItem ->
        val childView = bottomNav.getMenuView().getChildAt(index)
        val isSelected = menuItem.itemId == selectedItem.itemId
        childView.isSelected = isSelected

        // 更新图标和文本颜色（根据你的颜色配置调整）
        val icon = childView.findViewById<ImageView>(R.id.nav_icon)
        val title = childView.findViewById<TextView>(R.id.nav_title)
        val selectedColor = ContextCompat.getColor(this, R.color.nav_selected_color)
        val unselectedColor = ContextCompat.getColor(this, R.color.nav_unselected_color)

        if (isSelected) {
            icon.setColorFilter(selectedColor)
            title.setTextColor(selectedColor)
        } else {
            icon.setColorFilter(unselectedColor)
            title.setTextColor(unselectedColor)
        }
    }
    true
}

方案二：通过样式修改（更简便） #

如果不需要完全自定义布局，仅需让文本换行，可以通过修改文本样式实现：

1. 定义支持多行的文本样式 #

在res/values/styles.xml中添加：

<style name="BottomNavMultiLineText" parent="TextAppearance.MaterialComponents.Caption">
    <item name="android:singleLine">false</item>
    <item name="android:maxLines">2</item>
    <item name="android:textAlignment">center</item>
    <item name="android:lineSpacingExtra">2dp</item> <!-- 可选：调整行间距 -->
</style>

2. 应用样式到BottomNavigationView #

修改你的布局代码，添加app:itemTextAppearance属性，并调整导航栏高度以容纳两行文本：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottomNav"
    android:layout_width="match_parent"
    android:layout_height="64dp" <!-- 增大高度，默认可能不够 -->
    android:layout_gravity="bottom"
    android:background="@color/white"
    app:labelVisibilityMode="labeled"
    app:itemIconTint="@drawable/nav_items_color"
    app:itemTextColor="@drawable/nav_items_color"
    app:itemTextAppearance="@style/BottomNavMultiLineText" <!-- 添加这行 -->
    app:menu="@menu/bottom_menu_nav" />

注意事项 #

• 方案二可能需要根据你的文本长度调整android:layout_height，确保两行文本能完全显示；
• 确保你的Material Components库是较新版本（建议1.5.0+），避免样式兼容性问题；
• 如果使用方案一，记得处理好选中/未选中状态的样式切换，保持和原导航栏的交互一致性。

内容的提问来源于stack exchange，提问作者Francislainy Campos