BottomNavigationView无图标菜单项居中及高亮异常问题求助

我来帮你搞定这个BottomNavigationView的布局问题！无图标底部导航的样式调整确实容易遇到默认样式的限制，咱们一步步来解决：

1. 先搞定文本的垂直水平居中 #

默认的BottomNavigationItemView会给图标预留空间，即使你没设置图标，也会导致文本无法完全居中。解决办法是自定义菜单项的布局：

创建一个名为bottom_nav_item.xml的布局文件放在res/layout下：

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/bottom_nav_title"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center" <!-- 核心：让文本水平垂直都居中 -->
    android:textColor="@drawable/bottom_nav_text_color"
    android:textSize="14sp"
    android:paddingVertical="8dp" <!-- 可选：调整上下内边距让文本更舒适 -->
    android:singleLine="true"/>

然后在你的BottomNavigationView中指定这个自定义布局：

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:itemLayout="@layout/bottom_nav_item" <!-- 关联自定义item布局 -->
    .../>

2. 修复选中项高亮宽度不足的问题 #

选中背景宽度不够通常有两个原因：默认背景有内边距，或者启用了选中项的水平位移动画。咱们逐个解决：

步骤1：关闭水平位移动画 #

默认itemHorizontalTranslationEnabled是true，会让选中项有左右位移，导致背景无法占满整个item宽度。直接关掉：

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:itemHorizontalTranslationEnabled="false"
    .../>

步骤2：自定义选中背景Drawable #

默认的选中背景是带圆角和左右边距的，咱们自己写一个全屏宽的背景：

创建bottom_nav_selected_bg.xml放在res/drawable下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/your_selected_bg_color"/> <!-- 替换成你的高亮颜色 -->
        </shape>
    </item>
    <item>
        <shape android:shape="rectangle">
            <solid android:color="@android:color/transparent"/>
        </shape>
    </item>
</selector>

然后把这个背景设置给BottomNavigationView：

<com.google.android.material.bottomnavigation.BottomNavigationView
    ...
    app:itemBackground="@drawable/bottom_nav_selected_bg"
    app:itemPaddingHorizontal="0dp" <!-- 去掉默认水平内边距 -->
    .../>

3. 完善文本的状态高亮 #

配合上面的自定义item布局，咱们再写一个文本颜色的selector，实现选中/未选中的颜色切换：

创建bottom_nav_text_color.xml放在res/drawable下：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/your_selected_text_color" android:state_checked="true"/>
    <item android:color="@color/your_unselected_text_color"/>
</selector>

最后检查Menu文件 #

确保你的menu里的item没有设置图标（或者设为null），避免预留图标空间：

<!-- res/menu/bottom_nav_menu.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/nav_home"
        android:title="首页"
        android:icon="@null"/> <!-- 移除图标 -->
    <item
        android:id="@+id/nav_profile"
        android:title="我的"
        android:icon="@null"/>
</menu>

这样设置后，你的BottomNavigationView应该就能实现文本完全居中，选中项高亮占满整个item宽度，并且有清晰的状态区分啦！

内容的提问来源于stack exchange，提问作者Gérard