如何分配Bottom Navigation View空间？实现30:70比例双菜单项布局

我来帮你搞定这个符合要求的Bottom Navigation实现！咱们一步步来：

1. 补全菜单资源文件 #

首先把你的菜单文件补全，确保第二个菜单项只显示文本（不要加icon属性就行），保存为res/menu/bottom_nav_menu.xml：

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

    <!-- 第一个菜单项：带图标+文本 -->
    <item
        android:id="@+id/bottom_navigation_1"
        android:icon="@drawable/ic_symbol1"
        android:title="@string/bottom_navigation_title1"
        app:showAsAction="always|withText" />

    <!-- 第二个菜单项：仅显示文本 -->
    <item
        android:id="@+id/bottom_navigation_2"
        android:title="@string/bottom_navigation_title2"
        app:showAsAction="always|withText" />
</menu>

2. 布局里添加BottomNavigationView #

在你的Activity或Fragment布局中，用ConstraintLayout包裹底部导航（方便后续调整布局），代码如下：

<?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">

    <!-- 页面内容区域 -->
    <FrameLayout
        android:id="@+id/content_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/bottom_nav"
        app:layout_constraintTop_toTopOf="parent" />

    <!-- 底部导航栏 -->
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_nav"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:menu="@menu/bottom_nav_menu"
        app:itemTextColor="@color/your_text_color"
        app:itemIconTint="@color/your_icon_color" />

</androidx.constraintlayout.widget.ConstraintLayout>

3. 动态设置30:70的宽度比例 #

默认的BottomNavigationView会把所有菜单项均分宽度，所以咱们得用代码动态调整每个item的宽度，实现30%和70%的比例：

Kotlin版本

在Activity的onCreate或者Fragment的onViewCreated里添加这段代码：

val bottomNav = findViewById<BottomNavigationView>(R.id.bottom_nav)
val menuView = bottomNav.getChildAt(0) as BottomNavigationMenuView

// 获取屏幕宽度
val screenWidth = resources.displayMetrics.widthPixels

// 第一个菜单项占30%宽度
val firstItem = menuView.getChildAt(0) as BottomNavigationItemView
firstItem.layoutParams.width = (screenWidth * 0.3).toInt()

// 第二个菜单项占70%宽度
val secondItem = menuView.getChildAt(1) as BottomNavigationItemView
secondItem.layoutParams.width = (screenWidth * 0.7).toInt()

// 强制刷新布局让设置生效
menuView.requestLayout()

Java版本

如果用Java开发，代码如下：

BottomNavigationView bottomNav = findViewById(R.id.bottom_nav);
BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNav.getChildAt(0);

// 获取屏幕宽度
int screenWidth = getResources().getDisplayMetrics().widthPixels;

// 设置第一个菜单项为30%宽度
BottomNavigationItemView firstItem = (BottomNavigationItemView) menuView.getChildAt(0);
ViewGroup.LayoutParams firstParams = firstItem.getLayoutParams();
firstParams.width = (int) (screenWidth * 0.3);
firstItem.setLayoutParams(firstParams);

// 设置第二个菜单项为70%宽度
BottomNavigationItemView secondItem = (BottomNavigationItemView) menuView.getChildAt(1);
ViewGroup.LayoutParams secondParams = secondItem.getLayoutParams();
secondParams.width = (int) (screenWidth * 0.7);
secondItem.setLayoutParams(secondParams);

// 刷新布局让设置生效
menuView.requestLayout();

4. 确保文本居中显示 #

默认情况下BottomNavigation的文本已经是居中的，但如果你想更稳妥，可以自定义文本样式，在res/values/styles.xml里添加：

<style name="CenteredBottomNavText" parent="TextAppearance.MaterialComponents.Caption">
    <item name="android:gravity">center</item>
    <item name="android:textAlignment">center</item>
</style>

然后在BottomNavigationView里引用这个样式：

app:itemTextAppearanceActive="@style/CenteredBottomNavText"
app:itemTextAppearanceInactive="@style/CenteredBottomNavText"

这样一套操作下来，就能完美实现你想要的效果：两个菜单项按30:70分配宽度，第一个带图标+文本，第二个仅文本，所有文本都居中显示~

内容的提问来源于stack exchange，提问作者Prince Kumar