Material Design系列教程（11） - BottomNavigationView

2019年6月5日 679次阅读 来源: Whyn

简介

在 Android Design Support Library 25 的时候，Google 推出了新一代 底部导航栏 控件： BottomNavigationView

我们在前面的教程中（TODO::TabLayout）有讲过用 TabLayout 实现底部导航栏，BottomNavigationView 的作用其实跟 TabLayout 作为底部导航栏差不多，只是它在性能上和动画效果上有所提升。

最后老规矩先来看下 BottomNavigationView 的官方文档：

《Material Design系列教程（11） - BottomNavigationView》 BottomNavigationView

BottomNavigationView 存在于 design 包中，且继承于FrameLayout。

BottomNavigationView 使用规范

在 Google Material Design 中，对于底部导航栏（bottom-navigation-behavior）的设计规范，提及了一些要求，可以更好地让我们知道什么时候或者应当如何正确使用 BottomNavigationView 去维护一个具备材料特征的应用：

《Material Design系列教程（11） - BottomNavigationView》 底部导航栏设计规范

  1. BottomNavigationView 应当为应用顶层界面提供快速访问的导航接口。只有那些需要直接访问的目标（界面）才应当放入到 BottomNavigationView 中。

  2. BottomNavigationView 一般提供3~5个目标（界面）导航接口。如果应用只有两个目标导航，建议使用 TabLayout。如果应用超过5个目标导航界面，建议使用抽屉式导航栏（DrawerLayout）。

  3. 每个选项的最大宽度为168dp，最小宽度为80dp，高度为56dp，每个图标（icon）的大小是24×24dp，对于选中选项，图标距离顶层内边距为6dp，非选中则为8dp；文字距离底部内边距为10dp,左右内边距为12dp。选项的高度（海拔）为8dp。

  4. 活动图标应当使用应用 primary color 进行着色。BottomNavigationView 背景浅色或灰色时，图标和文字要带鲜艳颜色；背景带颜色时，应当使用浅色或灰色图标。千万不要两者混合用在一起，标签的颜色任何时刻最多使用一种。

  5. 如果 view 得到焦点，那么 view 的图标和文字应当进行显示。如果只有3个选项，所有的图标和文字标题在任何时刻都应当显示。如果有4个或5个选项，非活动 view 应当只显示图标。

  6. 通过 BottomNavigationView 进行导航时，应当重置任务状态。当用户选中活动标签时，BottomNavigationView 应当展示对应页面的顶层界面给到用户。不支持滑动切换。

  7. 开发人员应当注意底部导航栏和标签栏（tabs）的结合，当导航时，这可能会为用户带来困扰。

BottomNavigationView 使用方法

下面介绍下 BottomNavigationView 的基本使用：

直接看布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.BottomNavigationView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/menu_bottom_nav" />

</RelativeLayout>

以上就是 BottomNavigationView 最简单的布局方式，里面最主要的就是app:menu属性的配置，通过app:menu，我们可以给 BottomNavigationView 设置一个菜单选项，其菜单内容具体如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- res/menu/menu_bottom_nav.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item_1"
        android:icon="@drawable/ic_message_black_24dp"
        android:title="消息" />

    <item
        android:id="@+id/item_2"
        android:icon="@drawable/ic_account_box_black_24dp"
        android:title="联系人" />

    <item
        android:id="@+id/item_3"
        android:icon="@drawable/ic_favorite_black_24dp"
        android:title="动态" />

</menu>

菜单 menu 主要提供了3个选项（Item）。

按上面的布局，其效果如下图所示：

《Material Design系列教程（11） - BottomNavigationView》 BottomNavigationView_basic_usage

从效果上看，基本的需求都已经具备，包括点击选中，波纹，选中图标增大效果等等（这里 BottomNavigationView 的背景是浅色的，按照规范我们应当为图标和文本设置其他颜色，但这里作为最简化例子，就暂时先忽略这些规范 -_-）。

但是按默认配置还是存在一些问题的，比如图标颜色被灰度化了······

解决方法是通过代码调用：this.mBotNavi.setItemIconTintList(null);，这样图标颜色就能恢复到原本颜色了。

但是更好的做法是为 图标颜色 添加一个选择器效果，为用户带来更好的体验。配置的方法也很简单：

  1. 首先，创建一个selector：
<?xml version="1.0" encoding="utf-8"?>
<!--res/color/selector_bottom_navi.xml-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="#FF0000" android:state_checked="true"></item>
    <item android:color="#000000"></item>

</selector>

设置选中的时候，图标颜色为红色；未选中的时候，图标颜色为黑色；

  1. 然后，将该 selector 通过 app:itemIconTint="@color/selector_bottom_navi"设置给 BottomNavigationView。

效果如下：

《Material Design系列教程（11） - BottomNavigationView》 app:itemIconTint

除了给 图标颜色 设置选择器外，我们也可以给 图标 设置一个选择器，通常用来更换图标：

  1. 同样，新建一个 selector：
<?xml version="1.0" encoding="utf-8"?>
<!--res/drawable/selector_bottom_navi_icon.xml-->
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_3d_rotation_black_24dp" android:state_checked="true"></item>
    <item android:drawable="@drawable/ic_message_black_24dp"></item>

</selector>
  1. 然后，在app:menu设置的菜单中，给某个菜单图标设置该 selector
    即可：
<?xml version="1.0" encoding="utf-8"?>
<!-- res/menu/menu_bottom_nav.xml -->
<menu xmlns:android="http://schemas.android.com/apk/res/android">

    <item
        android:id="@+id/item_1"
        android:icon="@drawable/selector_bottom_navi_icon"  //selector
        android:title="消息" />

    <item
        android:id="@+id/item_2"
        android:icon="@drawable/ic_account_box_black_24dp"
        android:title="联系人" />

    <item
        android:id="@+id/item_3"
        android:icon="@drawable/ic_favorite_black_24dp"
        android:title="动态" />

</menu>

我们这里就只为第一个菜单图标设置 selector，效果如下所示：

《Material Design系列教程（11） - BottomNavigationView》 menu_icon_selector

同理，我们也可以通过app:itemTextColor属性修改字体颜色，但更佳的体验同样是给字体设置一个 selector，这里我们使用复用设置 图标颜色 的 selector：app:itemTextColor="@color/selector_bottom_navi"

效果如下：

《Material Design系列教程（11） - BottomNavigationView》 menu_text_selector

BottomNavigationView 警惕点

BottomNavigationView 虽然可以很方便的帮助我们实现底部导航栏，但某些时候，你可能会遇到一些坑，就比如下面几种情况：

  • BottomNavigationView 的菜单个数不能超过5个，否则将会产生IllegalArgumentException：

《Material Design系列教程（11） - BottomNavigationView》 BottomNavigationView_menu_item_over_5

  • 当底部导航栏菜单超过3个时，BottomNavigationView 会自动开启移位模式（Shift Mode），现象就是当你选中某个菜单时，其他菜单变得较小，并且没有显示标题，切换的时候，菜单会带着移动特效。如下图所示：

《Material Design系列教程（11） - BottomNavigationView》 shift_mode

如果你对这种效果不满意，想取消移动模式（Shift Mode），让 BottomNavigationView 的表现跟3个菜单时的一致，怎么办呢？

很可惜，BottomNavigationView 并没有提供接口去禁止移动模式，所以只能通过非常规方法进行设置，具体方法请参考：
How to disable BottomNavigationView shift mode?

BottomNavigationView 与 ViewPager 结合

我们前面使用 TabLayout 的时候，可以很方便的结合 ViewPager 联合使用，因为 TabLayout 已提供了相关接口；

很可惜的是，BottomNavigationView 并未像 TabLayout 一样提供一个接口让我们结合 ViewPager。所以，我们只能自己手动进行实现了。

实现的原理其实很简单，就是对 BottomNavigationView 进行点击监听，然后控制 ViewPager 滑动到相应页面即可；同样也要对 ViewPager 进行事件监听，然后依据滑动方向设置 BottomNavigationView 相应的菜单状态。具体代码如下：

首先给出布局：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/botNavi"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="@color/colorPrimary"
        app:itemIconTint="@color/selector_bottom_navi"
        app:itemTextColor="@color/selector_bottom_navi"
        app:menu="@menu/menu_bottom_nav" />

    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/botNavi"
        android:layout_alignParentTop="true" />

</RelativeLayout>

源码如下：

public class BottomNavigationViewActivity extends AppCompatActivity {

    @BindView(R.id.botNavi)
    private BottomNavigationView mBotNavi;
    @BindView(R.id.viewpager)
    private ViewPager mViewPager;

    @Override
    @ViewInject(ViewInject.ACTIVITY)
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_bottom_nav);
        initView();
        initViewPagerEvent();
        initBotNaviEvent();
    }

    private void initView() {
//        this.mBotNavi.setItemIconTintList(null);
        this.mViewPager.setAdapter(new FragmentPagerAdapter(this.getSupportFragmentManager()) {
            private List<Fragment> fragments = Arrays.asList(
                    MyFragment.newInstance("one"),
                    MyFragment.newInstance("two"),
                    MyFragment.newInstance("three")
            );

            @Override
            public Fragment getItem(int position) {
                return this.fragments.get(position);
            }

            @Override
            public int getCount() {
                return this.fragments.size();
            }
        });
    }

    private void initViewPagerEvent() {
        this.mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                BottomNavigationViewActivity.this.resetBotNaviItemState();
                MenuItem item = BottomNavigationViewActivity.this.mBotNavi.getMenu().getItem(position);
                item.setCheckable(true);
                item.setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initBotNaviEvent() {
        this.mBotNavi.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                boolean bSelected = false;
                switch (item.getItemId()) {
                    case R.id.item_1:
                        BottomNavigationViewActivity.this.mViewPager.setCurrentItem(0);
                        bSelected = true;
                        break;
                    case R.id.item_2:
                        BottomNavigationViewActivity.this.mViewPager.setCurrentItem(1);
                        bSelected = true;
                        break;
                    case R.id.item_3:
                        BottomNavigationViewActivity.this.mViewPager.setCurrentItem(2);
                        bSelected = true;
                        break;
                    default:
                        break;
                }
                return bSelected;
            }
        });
    }

    @MainThread
    private void resetBotNaviItemState() {
        Menu menu = this.mBotNavi.getMenu();
        for (int i = 0, len = menu.size(); i < len; ++i) {
            menu.getItem(i).setCheckable(true);
            menu.getItem(i).setChecked(false);
        }
    }
}

效果如下：

《Material Design系列教程（11） - BottomNavigationView》 BottomNavigationView_ViewPager

彩蛋

  • 如果你对 BottomNavigationView 的效果不太满意，你还可以选择其他一些类似的第三方开源控件，就比如：BottomNavigation

  • 本文所示素材图标来源于 Android Studio的一个插件：android material design icon generator。该插件中拥有官方全套的 Material Design 图片素材，安装这个插件后，直接快捷键 ctrl + alt +m 就可以进入下载界面。

参考

    原文作者：Whyn
    原文地址: https://www.jianshu.com/p/854c458d2f0b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞