Android支持库BottomNavigationView不显示标题

Question

我正在使用Android支持设计小部件BottomNavigationView来制作我的底部导航项。这是工作的结果： 它有两个问题，第一个是它不显示项目下方的标题，第二个问题是我希望项目填充整个宽度，我不想在导航栏上留有空白，我只希望它们填充空间并在项目之间分配空间。

这是我的菜单代码：

    <?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/action_item1"
        android:icon="@drawable/phone"
        app:showAsAction="ifRoom"
        android:title="ارتباط" />

    <item
        android:id="@+id/action_item2"
        android:icon="@mipmap/ic_history"
        app:showAsAction="ifRoom"
        android:title="سوابق خرید" />

    <item
        android:id="@+id/action_item3"
        android:icon="@drawable/sabad"
        app:showAsAction="ifRoom"
        android:title="سبد خرید" />

    <item
        android:id="@+id/action_item4"
        android:icon="@drawable/market2"
        app:showAsAction="ifRoom"
        android:title="فروشگاه" />

</menu>

这是XML代码：

` <RelativeLayout
        android:id="@+id/activity_main"
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:context="com.truiton.bottomnavigation.MainActivity">

        <FrameLayout
            android:id="@+id/frame_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_above="@+id/navigation"
            android:animateLayoutChanges="true">

        </FrameLayout>

        <android.support.design.widget.BottomNavigationView
            android:id="@+id/navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:background="@color/colorPrimary"
            app:itemIconTint="#fff"
            app:itemTextColor="#F2F2F4"
            app:menu="@menu/bottom_navigation_items"/>
    </RelativeLayout>`

如何解决这个问题？

- j jones

Answer 1

更新设计支持库28.0.0

在您的xml中使用app:labelVisibilityMode="labeled"

旧答案是适用于28.0.0以下的支持库的解决方法

来自底部导航指南的第一个问题：

• “如果有四个或五个操作，请仅将不活动视图显示为图标”

要解决问题，请查看Android BottomNavigationView项目没有文本显示，布局也不随滚动而隐藏

- JingJoeh

---

谷歌自己不遵守这些准则，这很奇怪。Play Newsstand和Youtube应用程序都有四个操作，并在所有操作视图上显示图标和标题。 - ArunL

Answer 2

要在项目下启用标题，请使用以下技巧。 在您的BottomNavigationView中将labelVisibilityMode参数设置为“labeled”。

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:layout_width="match_parent"
    android:layout_height="49dp"
    android:layout_gravity="bottom"
    app:elevation="5dp"
    **app:labelVisibilityMode="labeled"**
    app:itemIconTint="@drawable/nav_item_color_state"
    app:itemTextColor="@drawable/nav_item_color_state"
    app:layout_constraintBottom_toBottomOf="parent"
    app:menu="@menu/bottom_navigation_menu" />

有几种标题可见性类型：

• 标记（将保持所有标签可见。）
• 未标记（仅显示图标）
• 选择（仅显示所选项目和 shift 项目的标签）
• 自动（将根据我们为1-3项标记的数量选择标记或选择，对于3个以上的项选择）

- Никита Тоцкий

Answer 3

两个行为（不是问题）是默认行为。如果我理解你的“空闲空间”正确，那么这个空间是由BottomNavigationView的一种行为——移动动画所创建的。 您可以重写BottomNavigationView类的onLayout方法，然后使用扩展标签来避免这两个行为。如果需要，此方法还可以为BottomNavigationView设置自定义字体系列。

public final class ExtendedBottomNavigationView extends BottomNavigationView{
    private final Context context;
    private Typeface fontFace = null;

    public ExtendedBottomNavigationView(Context context, AttributeSet attrs){
        super(context, attrs);
        this.context = context;
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom){
        super.onLayout(changed, left, top, right, bottom);
        final ViewGroup bottomMenu = (ViewGroup)getChildAt(0);
        final int bottomMenuChildCount = bottomMenu.getChildCount();
        BottomNavigationItemView item;
        View itemTitle;
        Field shiftingMode;

        if(fontFace == null){
            fontFace = Typeface.createFromAsset(context.getAssets(), context.getString(R.string.VazirBold));
        }
        try {
            //if you want to disable shiftingMode:
            //shiftingMode is a private member variable so you have to get access to it like this:
            shiftingMode = bottomMenu.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(bottomMenu, false);
            shiftingMode.setAccessible(false);
        } catch (NoSuchFieldException e){
            e.printStackTrace();
        } catch (IllegalAccessException e){e.printStackTrace();}
        //for changing font face of item titles.
        for(int i=0; i<bottomMenuChildCount; i++){
            item = (BottomNavigationItemView)bottomMenu.getChildAt(i);
            //this shows all titles of items
            item.setChecked(true);
            //every BottomNavigationItemView has two children, first is an itemIcon and second is an itemTitle
            itemTitle = item.getChildAt(1);
            //every itemTitle has two children, first is a smallLabel and second is a largeLabel. these two are type of AppCompatTextView
            ((TextView)((BaselineLayout) itemTitle).getChildAt(0)).setTypeface(fontFace, Typeface.BOLD);
            ((TextView)((BaselineLayout) itemTitle).getChildAt(1)).setTypeface(fontFace, Typeface.BOLD);
        }
    }
}

然后像这样使用它：

<your.package.name.ExtendedBottomNavigationView android:id="@id/bottomMenu" style="@style/bottomMenu"/>

- Arash