BottomNavigationView中的菜单项未居中

时间:2018-02-12 21:05:47

标签: java xml bottomnavigationview

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

我希望将文字垂直居中放置。水平并为不同的状态添加了一个突出显示:

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

然而,它现在看起来像这样:

enter image description here

正如您所看到的,高亮显示不会覆盖菜单的一半,更像是40%的菜单;选择右手项时,尽管宽度设置为match_parent。

文本既不垂直也不水平居中;

1)如何在布局中垂直居中显示菜单文本?

2)我如何制作它以使两个菜单项占据导航视图的50%?这会使文本水平居中,使高光占据预期的50%。

2 个答案:

答案 0 :(得分:2)

真正的答案是:不要这样做。您尝试使用创建的支持设计库组件以使其具有某种特定的外观和感觉,但您希望使其外观和感觉不同。您应该创建自己的视图以按照自己的方式运行。

但是...

  

1)如何在布局中垂直居中显示菜单文本?

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

因此,我们可以创建一种方法来调整标签视图上的重力和填充。父母,使他们看起来居中:

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

每个菜单项的宽度受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
    }
}

在您的活动中使用这些方法后,您可以写下:

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

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

答案 1 :(得分:1)

这个答案对我有帮助。这是Ben P.的kotlin版本:

    private fun adjustGravity(v: View) {
        if (v.id == android.support.design.R.id.smallLabel) {
            val parent = v.parent as ViewGroup
            parent.setPadding(0, 0, 0, 0)

            val params = parent.layoutParams as FrameLayout.LayoutParams
            params.gravity = Gravity.CENTER
            parent.layoutParams = params
        }

        if (v is ViewGroup) {
            val vg = v as ViewGroup

            for (i in 0 until vg.childCount) {
                adjustGravity(vg.getChildAt(i))
            }
        }
    }

    private fun adjustWidth(nav: BottomNavigationView) {
        try {
            val menuViewField = nav.javaClass.getDeclaredField("mMenuView")
            menuViewField.isAccessible = true
            val menuView = menuViewField.get(nav)

            val itemWidth = menuView.javaClass.getDeclaredField("mActiveItemMaxWidth")
            itemWidth.isAccessible = true
            itemWidth.setInt(menuView, Integer.MAX_VALUE)
        } catch (e: NoSuchFieldException) {
            // TODO
        } catch (e: IllegalAccessException) {
            // TODO
        }
    }

然后...

    val bottomNavigationView: BottomNavigationView = findViewById(R.id.bottom_navigation)

    adjustGravity(bottomNavigationView)
    adjustWidth(bottomNavigationView)

enter image description here