java - BottomNavigationView 中的菜单项未居中

Question

我有一个没有图标，只有文本字段的底部导航 View 。

我想将文本垂直和水平居中，并为不同的状态添加高亮显示:

topnavigationview.setItemBackgroundResource(R.drawable.mainactivitybackgroundhighlight_top);

使用xml代码:

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

View 是这样包含的:

<android.support.design.widget.BottomNavigationView
            android:id="@+id/top_navigation_view"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:layout_below="@id/include4"
            android:background="@color/dunkelgraublau"
            app:itemTextColor="@color/weiß"
            app:menu="@menu/top_navigation_menu" />

但是，它现在看起来像这样:

如您所见，高亮部分并未覆盖菜单的一半，更像是 40%；选择右边的项目时，它是一样的——尽管宽度被设置为 match_parent。

文本既不是垂直居中也不是水平居中；

1) 如何让菜单文本在布局中垂直居中？

2) 如何让两个菜单项都占据导航 View 的 50%？这将使文本水平居中并使突出显示按预期占据 50%。

Answer 1

真正的答案是:不要这样做。您正在尝试使用一个支持设计库组件，该组件是为某种外观和感觉而创建的，但您想让它看起来和感觉不同。您应该创建自己的 View 以按照您想要的方式运行。

但是……

1) how do i center the menu text vertically within the layout?

深入研究 BottomNavigationView 的实现，我们最终发现菜单项由 BottomNavigationItemView 对象(派生自 FrameLayout)表示，它使用此布局:https://github.com/dandar3/android-support-design/blob/master/res/layout/design_bottom_navigation_item.xml

因此，我们可以创建一种方法来调整标签 View 父级上的重力和填充，以便它们显示为居中:

private static void adjustGravity(View v) {
    if (v.getId() == android.support.design.R.id.smallLabel) {
        ViewGroup parent = (ViewGroup) v.getParent();
        parent.setPadding(0, 0, 0, 0);

        FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) parent.getLayoutParams();
        params.gravity = Gravity.CENTER;
        parent.setLayoutParams(params);
    }

    if (v instanceof ViewGroup) {
        ViewGroup vg = (ViewGroup) v;

        for (int i = 0; i < vg.getChildCount(); i++) {
            adjustGravity(vg.getChildAt(i));
        }
    }
}

2) how do i make it so both menu items take up 50% of the navigation view?

BottomNavigationMenuView 类中的这段代码限制了每个菜单项的宽度:

mActiveItemMaxWidth = res.getDimensionPixelSize(
        R.dimen.design_bottom_navigation_active_item_max_width);

没有什么好的方法可以修改这个值，但是我们可以使用反射来修改:

private static void adjustWidth(BottomNavigationView nav) {
    try {
        Field menuViewField = nav.getClass().getDeclaredField("mMenuView");
        menuViewField.setAccessible(true);
        Object menuView = menuViewField.get(nav);

        Field itemWidth = menuView.getClass().getDeclaredField("mActiveItemMaxWidth");
        itemWidth.setAccessible(true);
        itemWidth.setInt(menuView, Integer.MAX_VALUE);
    }
    catch (NoSuchFieldException e) {
        // TODO
    }
    catch (IllegalAccessException e) {
        // TODO
    }
}

一旦你的 Activity 中有了这些方法，你就可以这样写:

BottomNavigationView nav = findViewById(R.id.top_navigation_view);
adjustGravity(nav);
adjustWidth(nav);

请注意，由于这些方法中的每一个都依赖于 BottomNavigationView 的内部实现细节，因此当您更新支持/设计库时，它们总是会损坏。