我有一个底部导航视图,该视图没有图标,只有文本字段。
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="schemas.android/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?
为 BottomNavigationView ,我们最终发现菜单项由 BottomNavigationItemView 对象表示(源自 FrameLayout ),其使用以下布局: https ://github/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: github/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中的菜单项未居中
发布评论