BottomNavigationView中的菜单项未居中

问题描述

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

I have a bottom navigation view that has no icons, only text fields.

我想使文本垂直居中&

I want to center the text vertically & horizontally and added a highlight for the different states:

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>

包含如下视图：

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

但是，现在看起来像这样：

however, it now looks like this:

您可以看到，突出显示部分没有覆盖菜单的一半，更像是菜单的40％；

as you can see the highlight does not cover half of the menu, more like 40% of it; when selecting the right hand item its the same - despite the width being set to match_parent.

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

the text also is neither centered vertically nor horizontally;

1）如何将菜单文本在布局内垂直居中？

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

2）我如何做到这一点，以便两个菜单项都可以使用50％的导航视图？这将使文本水平居中，并使突出显示部分按预期占50％。

2) how do i make it so both menu items take up 50% of the navigation view? this would center the text horizontally and make the highlight take up 50% as intended.

推荐答案

真正的答案是：不要这样做。您正在尝试使用支持设计库组件，该组件是为外观和感觉而创建的，但是您希望使其外观和感觉有所不同。您应该创建自己的视图以按照自己的方式进行操作。

The real answer is: don't do this. You're trying to use a support design library component that was created to look and feel a certain way, but you want to make it look and feel a different way. You should create your own view to behave the way you want.

但是...

为<$ c $挖掘实现c> BottomNavigationView ，我们最终发现菜单项由 BottomNavigationItemView 对象表示（源自 FrameLayout ），其使用以下布局：

Digging into the implementation for BottomNavigationView, we eventually find that the menu items are represented by BottomNavigationItemView objects (derived from FrameLayout), which use this layout: https://github.com/dandar3/android-support-design/blob/master/res/layout/design_bottom_navigation_item.xml

这样，我们可以创建一种方法来调整标签视图的父级上的重力和填充，以使其居中显示：

As such, we can create a method to adjust the gravity and padding on the label views' parent so that they appear centered:

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));
        }
    }
}

每个菜单项的宽度在 BottomNavigationMenuView 类中受以下代码约束：

The width of each menu item is constrained by this code in the BottomNavigationMenuView class:

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

没有修改此值的好方法，但是我们可以因此，使用反射：

There's no good way to modify this value, but we can do so using reflection:

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
    }
}

一旦您在活动中使用了这些方法，就可以这样写： p>

Once you have these methods in your activity, you can just write this:

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

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

Note that, because each of these methods relies on internal implementation details of BottomNavigationView, they are always subject to breakage when you update the support/design libraries.

这篇关于BottomNavigationView中的菜单项未居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！