BottomNavigationView中的菜单项未居中 [英] Menu items in BottomNavigationView not centered

问题描述

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

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.

但是...

1）如何在菜单中垂直放置菜单文本？

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

为<$ c $挖掘实现c> BottomNavigationView ，我们最终发现菜单项由 BottomNavigationItemView 对象表示（源自 FrameLayout ），其使用以下布局： https ：//github.com/dandar3/android-support-design/blob/master/res/layout/design_bottom_navigation_item.xml

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

2）如何使两个菜单项都占据导航视图的50％？

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

每个菜单项的宽度在 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中的菜单项未居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！