BottomNavigationView + Fragment 底部导航栏实现

本篇是自己在学习 BottomNavigationView 时整理的笔记。

效果图：

效果图.gif

目录结构：

目录结构.png

https://github.com/Evan-zch/BottomNavigationViewDemo

正文

​前面呈现的效果图是现在很多主流App都在使用底部导航栏模式，比如常用的微信、QQ这些基本的社交软件，其实要实现上面的效果也很简单。

1、添加库文件

要使用 BottomNavigationView 需要在build.gradle中添加design库

implementation 'com.android.support:design:27.1.1'

2、布局文件

<android.support.design.widget.BottomNavigationView
        android:id="@+id/bv_bottomNavigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/write"
        app:itemIconTint="@drawable/bottom_navigation_item_selector"
        app:itemTextColor="@drawable/bottom_navigation_item_selector"
        app:menu="@menu/main_bottom_navigation" />

app:itemBackground：设置item的背景

app:itemIconTint：设置icon的颜色

app:itemTextColor：设置文字的颜色

app:menu ：设置底部导航栏icon和文字

3、bottom_navigation_item_selector.xml

app:itemIconTint="@drawable/bottom_navigation_item_selector"
app:itemTextColor="@drawable/bottom_navigation_item_selector"

在drawable下新建xml文件，通过为 itemIconTint 和 itemTextColor 设置 selector,可实现在点击时icon和title颜色的变换。

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/theme" android:state_checked="true" />
    <item android:color="@color/bottom_navigation_normal" android:state_checked="false" />
</selector>

4、main_bottom_navigation.xml

app:menu="@menu/main_bottom_navigation"

在menu目录下新建xml文件，自定义底部导航栏icon及title，代码如下：

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_message"
        android:enabled="true"
        android:icon="@mipmap/message"
        app:showAsAction="ifRoom"
        android:title="消息" />
    <item
        android:id="@+id/menu_contacts"
        android:enabled="true"
        android:icon="@mipmap/icon_contacts"
        app:showAsAction="ifRoom"
        android:title="联系人" />
    <item
        android:id="@+id/menu_discover"
        android:enabled="true"
        android:icon="@mipmap/icon_discover"
        app:showAsAction="ifRoom"
        android:title="发现" />
    <item
        android:id="@+id/menu_me"
        android:enabled="true"
        app:showAsAction="ifRoom"
        android:icon="@mipmap/me"
        android:title="我" />
</menu>

5、在Activity中进行初始化：

public void initBottomNavigation() {
        mBottomNavigationView = findViewById(R.id.bv_bottomNavigation);
        // 添加监听
        mBottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.menu_message:
                        setFragmentPosition(0);
                        break;
                    case R.id.menu_contacts:
                        setFragmentPosition(1);
                        break;
                    case R.id.menu_discover:
                        setFragmentPosition(2);
                        break;
                    case R.id.menu_me:
                        setFragmentPosition(3);
                        break;
                    default:
                        break;
                }
                // 这里注意返回true,否则点击失效
                return true;
            }
        });
    }

特别说明

当底部导航栏item数目大于三个时，展示效果如下：

item大于三个时效果图.gif

当item数目大于三个时，底部导航栏展示的效果采取动画的方式，很多时候非我们想要的效果， 通过反射来进行处理原文 。

代码如下：

public class BottomNavigationViewHelper {
    @SuppressLint("RestrictedApi")
    public static void disableShiftMode(BottomNavigationView 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);
                //noinspection RestrictedApi
                item.setShiftingMode(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);
        }
    }
}

可以在初始化的时候多添加一行代码就能避免这个问题

mBottomNavigationView = findViewById(R.id.bv_bottomNavigation);
// 解决当item大于三个时，非平均布局问题
BottomNavigationViewHelper.disableShiftMode(mBottomNavigationView);