BottomNavigationView始终显示图标和文本标签

时间:2016-11-03 08:08:35

标签: android android-support-library android-support-design bottomnavigationview

我在设计支持库25版中使用android.support.design.widget.BottomNavigationView

compile 'com.android.support:design:25.0.0'

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bottomBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_gravity="center"
        app:itemBackground="@color/colorPrimary"
        app:menu="@menu/bottom_navigation_main"
        android:forceHasOverlappingRendering="true"/>

当@ menu / bottom_navigation_main中只有三个动作时,它会一直显示图标和文本标签。

当有三个以上的操作时,有什么方法可以同时显示图标和文本标签。

12 个答案:

答案 0 :(得分:156)

对于仍在寻找解决方案但并不想依赖第三方库或运行时反射的人来说,支持库28 / Jetpack中的BottomNavigationView本身支持始终具有文本标签。

This是您正在寻找的方法。

或者使用XML,app:labelVisibilityMode="labeled"

答案 1 :(得分:50)

2018年5月8日更新

你可以使用 app:labelVisibilityMode="labeled" 直接在<android.support.design.widget.BottomNavigationView />

来源:https://developer.android.com/reference/com/google/android/material/bottomnavigation/LabelVisibilityMode

不需要以下这个冗长的解决方案。

以前的答案

我对BottomNavigationView有一些奇怪的行为。当我在其中选择任何项目/片段时,片段将BottomNavigationView推低一点,因此BottomNavigationView的文本位于屏幕下方,因此只有图标可见且文本在点击任何项目时隐藏。

如果您面临这种奇怪的行为,那么这就是解决方案。 只需删除

android:fitsSystemWindows="true"

在片段的根布局中。只需删除它和繁荣! BottomNavigationView可以正常工作,现在它可以显示文本和图标。 我在片段的根CoordinatorLayout中有这个。

另外不要忘记添加

BottomNavigationViewHelper.removeShiftMode(bottomNavigationView);

在您的活动中禁用转换模式。

以下是该课程:

public class BottomNavigationViewHelper {

    @SuppressLint("RestrictedApi")
    public static void removeShiftMode(BottomNavigationView view) {
        //this will remove shift mode for bottom navigation view
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(menuView, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                item.setChecked(item.getItemData().isChecked());
            }

        } catch (NoSuchFieldException e) {
            Log.e("ERROR NO SUCH FIELD", "Unable to get shift mode field");
        } catch (IllegalAccessException e) {
            Log.e("ERROR ILLEGAL ALG", "Unable to change value of shift mode");
        }
    }
}

答案 2 :(得分:18)

版本25很难。

试试这段代码。但我认为这不是一个好的解决方案。

BottomNavigationView navigationView = (BottomNavigationView) findViewById(R.id.bottomBar);
BottomNavigationMenuView menuView = (BottomNavigationMenuView) navigationView.getChildAt(0);
for (int i = 0; i < menuView.getChildCount(); i++) {
    BottomNavigationItemView itemView = (BottomNavigationItemView) menuView.getChildAt(i);
    itemView.setShiftingMode(false);
    itemView.setChecked(false);
}

答案 3 :(得分:10)

这是一个Kotlin扩展功能,它结合了@STAR_ZERO和@ KishanSolanki124的解决方案。

fun BottomNavigationView.disableShiftMode() {
    val menuView = getChildAt(0) as BottomNavigationMenuView

    menuView.javaClass.getDeclaredField("mShiftingMode").apply {
        isAccessible = true
        setBoolean(menuView, false)
        isAccessible = false
    }

    @SuppressLint("RestrictedApi")
    for (i in 0 until menuView.childCount) {
        (menuView.getChildAt(i) as BottomNavigationItemView).apply {
            setShiftingMode(false)
            setChecked(false)
        }
    }
}

使用它:

myBottomNavigation.disableShiftMode()

答案 4 :(得分:9)

你想要这个效果吗?

Click here to view the image

如果是这样,我建议您尝试BottomNavigationViewEx

答案 5 :(得分:6)

您可以直接在以下位置使用app:labelVisibilityMode =“ labeled”

<com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        app:labelVisibilityMode="labeled"
        android:elevation="8dp"
        android:layout_alignParentBottom="true"
        app:itemBackground="@drawable/bottom_navi"
        app:itemTextColor="@color/white"
        app:itemIconTint="@color/white"
        app:menu="@menu/bottom_nav_menu_managment" />

答案 6 :(得分:5)

在BottomNavigationView类中有一个BottomNavigationMenuView字段,在BottomNavigationMenuView中有一个BottomNavigationItemView []字段,它是底栏中的项目。

假设n是项目数,BottomNavigationMenuView将在BottomNavigationItemView []数组的每个成员上调用BottomNavigationItemView.setShiftingMode(n&gt; 3)。此函数决定行为(始终显示标题或仅在选择时显示标题)。

所以总是显示标题的方法是尝试调用此方法,您可以使用反射来访问私有字段。

    BottomNavigationView bottomNavigationView= (BottomNavigationView) findViewById(R.id.bottom_navigation);


//  get the private BottomNavigationMenuView field 
        Field f = null;
        try {
            f = bottomNavigationView.getClass().getDeclaredField("mMenuView");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }
        f.setAccessible(true);
        BottomNavigationMenuView menuView=null;
        try {
             menuView = (BottomNavigationMenuView) f.get(bottomNavigationView); 
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }

//  get the private BottomNavigationItemView[]  field 
        try {
            f=menuView.getClass().getDeclaredField("mButtons");
        } catch (NoSuchFieldException e) {
            e.printStackTrace();
        }
        f.setAccessible(true);
        BottomNavigationItemView[] mButtons=null;
        try {
            mButtons = (BottomNavigationItemView[]) f.get(menuView); 
        } catch (IllegalAccessException e) {
            e.printStackTrace();
        }


        for(int i=0;i<mButtons.length;i++){
            mButtons[i].setShiftingMode(false);
            mButtons[i].setChecked(true);
        }

答案 7 :(得分:4)

一直显示标题。试试这个Kotlin代码:

@SuppressLint("RestrictedApi")
override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_ofree)

    navigation.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener)

    val menuView = navigation.getChildAt(0) as BottomNavigationMenuView
    for (i in 0 until menuView.childCount) {
        val itemView = menuView.getChildAt(i) as BottomNavigationItemView
        itemView.setShiftingMode(false)
        itemView.setChecked(false)
    }
}

答案 8 :(得分:1)

替代 BottomNavigationViewEx BottomBar

答案 9 :(得分:1)

尝试一下,为我工作

app:labelVisibilityMode="labeled"

答案 10 :(得分:0)

您可以使用它在BottomNevigationView上同时显示文本和图标

app:labelVisibilityMode="labeled"

如果您正在使用它,您将能够同时查看图标和文本

<android.support.design.widget.BottomNavigationView
    app:labelVisibilityMode="labeled"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/bottom_navigation_view"
    android:layout_alignParentBottom="true"
    app:menu="@menu/bottom_navigation_menu"/>

答案 11 :(得分:-1)

您可以使用它在BottomNevigationView上同时显示3到5个项目的文本和图标,并停止移动。

 app:labelVisibilityMode="labeled"

但是您将在BottmNevigationView上遇到5个项目的长文本剪切问题。为此,我找到了一个很好的解决方案,用于停止文本以及BottomNevigationView的图标移动。您还可以停止移动文本以及BottomNevigationView上的图标。代码片段在此处给出。

1。如图所示,在BottomNevigationView中添加这行代码

<android.support.design.widget.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="@dimen/seventy_dp"
    android:layout_semitransparent="true"
    android:background="@color/colorBottomNev"
    android:showAsAction="always|withText"
    app:itemIconTint="@drawable/bottom_navigation_colors"
    app:itemTextColor="@drawable/bottom_navigation_colors"
    app:itemTextAppearanceActive="@style/BottomNavigationViewTextStyle"
    app:itemTextAppearanceInactive="@style/BottomNavigationViewTextStyle"
    app:menu="@menu/bottom_navigation_menu"
    app:labelVisibilityMode="labeled"/>

2。添加菜单项,如下所示:-

 <?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_catalogue"
        android:icon="@drawable/catalogue"
        android:title="@string/catalogue"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_contracts"
        android:icon="@drawable/contract"
        android:title="@string/contracts"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_prospects"
        android:icon="@drawable/prospect"
        android:title="@string/prospects"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_performance"
        android:icon="@drawable/performance"
        android:title="@string/performance"
        android:enabled="true"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_advance"
        android:icon="@drawable/advance"
        android:title="@string/advance"
        android:enabled="true"
        app:showAsAction="ifRoom" />

</menu>

3。在style.xml文件中添加此样式:

 <style name="BottomNavigationViewTextStyle">
            <item name="android:fontFamily">@font/montmedium</item>
            <item name="android:textSize">10sp</item>
            <item name="android:duplicateParentState">true</item>
            <item name="android:ellipsize">end</item>
            <item name="android:maxLines">1</item>
        </style>

4)将它们添加到Dimen文件夹中

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
    <dimen name="design_bottom_navigation_text_size" tools:override="true">10sp</dimen>
    <dimen name="design_bottom_navigation_active_text_size" tools:override="true">10sp</dimen>
</resources>

我从这些linklink获得了帮助。您也可以通过研究这些链接获得帮助。这对我有很大帮助。希望这对您也有帮助。谢谢。...