如何增加 BottomNavigationView 的宽度以填满屏幕

Question

如何增加 BottomNavigationView 菜单的宽度。下面是目前的情景。我无法增加宽度以完成屏幕。

菜单.xml

 <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout  xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.idea.nikhil.googlemaps.bottomNavigationbar">

        <FrameLayout
            android:id="@+id/container"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/bottom_navigation"
            android:layout_alignParentTop="true">
        </FrameLayout>
        <android.support.design.widget.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/white"
            app:itemIconTint="@drawable/bottom_navigation_selector"
            app:itemTextColor="@drawable/bottom_navigation_selector"
            app:menu="@menu/bottom_navigation_menu"
            android:layout_alignParentBottom="true" />
    </RelativeLayout>

Answer 1

这是可行的（即使没有反思）。但它会反对default design specs，我建议你选择default design specs。

---

现在来到我的解决方案...

将以下维度定义为dimens.xml。这些尺寸应该在values、values-large、values-large-land 和600dp 中可以增加到1000dp 或更多values-large、values-large-land，如果在平板电脑中你看不到这种变化。

<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_item_max_width" tools:override="true">600dp</dimen>
    <dimen name="design_bottom_navigation_active_item_max_width" tools:override="true">600dp</dimen>
</resources>

就是这样！！！结果会像

---

这不是魔术。

为什么添加了具有这样名称和值的维度是 600dp

BottomNavigationMenuView.java（BottomNavigationView 中用于表示菜单的类）使用了这两个维度。 下面是代码

public BottomNavigationMenuView(Context context, AttributeSet attrs) {
    super(context, attrs);
    ...
    mInactiveItemMaxWidth = res.getDimensionPixelSize(
            R.dimen.design_bottom_navigation_item_max_width);
    ....
    mActiveItemMaxWidth = res.getDimensionPixelSize(
            R.dimen.design_bottom_navigation_active_item_max_width);
    .....
}

现在这些值用于创建固定宽度的视图，如下所示

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    ....
    if (mShiftingMode) {
        final int inactiveCount = count - 1;
        final int activeMaxAvailable = width - inactiveCount * mInactiveItemMinWidth;
        final int activeWidth = Math.min(activeMaxAvailable, mActiveItemMaxWidth);
        final int inactiveMaxAvailable = (width - activeWidth) / inactiveCount;
        final int inactiveWidth = Math.min(inactiveMaxAvailable, mInactiveItemMaxWidth);
        ...
    } else {
        final int maxAvailable = width / count;
        final int childWidth = Math.min(maxAvailable, mActiveItemMaxWidth);
        .....
    }
    ....
}

为了始终使用activeMaxAvailable 的值，我将一个虚拟值设置为mActiveItemMaxWidth（以上面的尺寸表示）。所以activeWidth会有 activeMaxAvailable 的值。同样的规则适用于inactiveWidth。

所以当你构建项目时，design_bottom_navigation_item_max_width 和 design_bottom_navigation_active_item_max_width 定义了 design-support-lib 中，将被我们定义的尺寸替换。

代码也在最大支持选项（最多 5 个）上验证。

Answer 2

我不记得我在哪里找到了这个解决方案，但是你使用这个帮助类来禁用使用 Java 反射的 BottomNavigation 的项目移动：

import android.content.Context;
import android.graphics.Typeface;
import android.support.design.internal.BottomNavigationItemView;
import android.support.design.internal.BottomNavigationMenuView;
import android.support.design.widget.BottomNavigationView;
import android.util.Log;
import android.widget.TextView;
import java.lang.reflect.Field;

public class BottomNavigationViewHelper {
    public static void disableShiftMode(Context context,BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);

                Field LargeText = item.getClass().getDeclaredField("mLargeLabel");
                LargeText.setAccessible(true);
                Field SmallText = item.getClass().getDeclaredField("mSmallLabel");
                SmallText.setAccessible(true);

//                 TextView SmallTextView =(TextView) SmallText.get(item);
//                 TextView LargeTextView =(TextView) LargeText.get(item);

//                 Typeface tf = TypefaceHelper.getTypeface(context);
//                 SmallTextView.setTypeface(tf);
//                 LargeTextView.setTypeface(tf);

                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}

Answer 3

根据 BottomNavigationView 规范： https://material.io/guidelines/components/bottom-navigation.html#specs-figure-caption-17

你的导航是正确的，但如果你想扩展元素之间的填充，我建议你使用类似 FlexBoxLayout 的东西创建自己的底部导航：https://github.com/google/flexbox-layout