Android官方BottomNavigationView添加Badge(角标)，全部tab显示文字自动铺满

我使用的BottomNavigationView版本如下，以下功能也是在下面的版本上测试的

implementation "com.android.support:design:28.0.0"

相关推荐：二行代码去掉Android BottomNavigationView图标和文字缩放动画效
在我们使用BottomNavigationView时在tab个数大于三个是无法在全部的tab上显示文字，以下提供2中解决方式

1.网上搜索提供的方法如下：

import android.util.Log;
import com.google.android.material.bottomnavigation.BottomNavigationItemView;
import com.google.android.material.bottomnavigation.BottomNavigationMenuView;
import com.google.android.material.bottomnavigation.BottomNavigationView;
 
import java.lang.reflect.Field;
 
public class BottomNavigationViewHelper {
    public static void disableShiftMode(BottomNavigationView view) {
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) view.getChildAt(0);
        try {
            Field shiftingMode = menuView.getClass().getDeclaredField("labelVisibilityMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setInt(menuView, 1);//labelVisibilityMode
//            shiftingMode.setBoolean(menuView, false);//mShiftingMode
            shiftingMode.setAccessible(false);
            for (int i = 0; i < menuView.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) menuView.getChildAt(i);
                //noinspection RestrictedApi
//                item.setShiftingMode(false);
                item.setShifting(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {
            Log.e("BNVHelper", "Unable to get shift mode field", e);
        } catch (IllegalAccessException e) {
            Log.e("BNVHelper", "Unable to change value of shift mode", e);
        }
    }
}

使用方法：

 BottomNavigationView bottomNavigationView = findViewById(R.id.navigation);
 BottomNavigationViewHelper.disableShiftMode(bottomNavigationView);

参考自地址，里面有具体的解析和源码分析

2.另一种方法就是只要BottomNavigationMenuView中的isShifting返回false就行了

 private boolean isShifting(int labelVisibilityMode, int childCount) {
        return labelVisibilityMode == -1 ? childCount > 3 : labelVisibilityMode == 0;
 }

由于labelVisibilityMode 有4个值-1,0,1,2所以只需设置BottomNavigationView 的setLabelVisibilityMode参数为1就行，其他几个值的效果请自己试试吧

 BottomNavigationView bottomNavigationView = findViewById(R.id.navigation);
 // 这里我设置参数为1
 bottomNavigationView.setLabelVisibilityMode(1);

或者在xml里面设置也行四个值任选其一auto,，labeled，selected，unlabeled：

	<android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:labelVisibilityMode="auto|labeled|selected|unlabeled"
        app:menu="@menu/tt_navigation"/>

另一个需求是需要BottomNavigationView 显示Badge角标，角标的显示这里使用的一个第三方的库，网上也有其他的很多。
主要逻辑是找到要显示角标的view和确定显示的位置。下面提供我实现的一个方法供大家参考啊，代码中有详细的注释：

    /**
     * BottomNavigationView显示角标
     * 
     * @param viewIndex tab索引
     * @param showNumber 显示的数字，小于等于0是将不显示
     */
    private void showBadgeView(int viewIndex, int showNumber) {
        // 具体child的查找和view的嵌套结构请在源码中查看
        // 从bottomNavigationView中获得BottomNavigationMenuView
        BottomNavigationMenuView menuView = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
        // 从BottomNavigationMenuView中获得childview, BottomNavigationItemView
        if (viewIndex < menuView.getChildCount()) {
            // 获得viewIndex对应子tab
            View view = menuView.getChildAt(viewIndex);
            // 从子tab中获得其中显示图片的ImageView
            View icon = view.findViewById(android.support.design.R.id.icon);
            // 获得图标的宽度
            int iconWidth = icon.getWidth();
            // 获得tab的宽度/2
            int tabWidth = view.getWidth() / 2;
            // 计算badge要距离右边的距离
            int spaceWidth = tabWidth - iconWidth;
            
            // 显示badegeview
            new QBadgeView(this).bindTarget(view).setGravityOffset(spaceWidth, 3, false).setBadgeNumber(showNumber);
        }
    }

角标显示库使用的是如下：

implementation 'q.rorbin:badgeview:1.1.3'

最后上传一个效果图啊
在这里插入图片描述

Android官方BottomNavigationView添加Badge(角标)，全部tab显示文字自动铺满

猜你喜欢