Android BottomNavigationView，底部导航栏的简单实现

时间 2019-11-17

标签 android bottomnavigationview 底部导航简单实现栏目 Android 繁體版

原文原文链接

关于 Material Design 相关的控件，以前整理了一个系列文章，并在 GitHub 上创建一个 MDSamples 工程，使用代码和文字解说配合的方式逐一说明。截止目前，大体写有八九篇文章。期间，因为一些工做变更和杂事，停了一些时间。如今，有点时间，准备续上。php

以前的文章，参考列表以下：html

这一篇要说的是 Android App 中的 BottomNavigation 设计，底部导航栏，设计规范可参考官网：java

Material Design Components 之 Bottom Navigationandroid

support.design 包中对应提供的控件是 BottomNavigationView，提供很少于 5 个菜单的底部导航栏实现。git

咱们先来看一下基本使用：程序员

<android.support.design.widget.BottomNavigationView android:id="@+id/bnv_menu" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" app:itemIconTint="@color/selector_blue" app:itemTextColor="@color/selector_blue" app:menu="@menu/menu_bottom_navigation"/>复制代码

使用 menu 资源定义菜单内容，也就是这里的 res/menu/menu_bottom_navigation.xml 文件：github

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

    <item android:id="@+id/action_home" android:title="Home" android:icon="@drawable/ic_action_home"/>

    <item android:id="@+id/action_explore" android:title="Explore" android:icon="@drawable/ic_action_explore"/>

    <item android:id="@+id/action_me" android:title="Me" android:icon="@drawable/ic_action_me"/>

</menu>复制代码

除了 app:menu 属性定义菜单内容，BottomNavigationView 可以使用的定制属性并很少，有这几个：微信

app:itemIconTint：Icon 图标着色，值为一个 ColorStateList ，能够在 color 资源文件夹中定义。使用这个属性，奇妙利用 tint 着色器实现一个图标多种状态下使用。：app

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

    <item android:state_checked="true" android:color="@color/blue"></item>
    <item android:color="@color/gray"></item>

</selector>复制代码

app:itemTextColor：Label 文字颜色定义。ide

app:itemBackground：背景内容。

效果以下：

上图是 3 个菜单时的展现和交互方式，即菜单文字和图标同时显示，选中时有一个大小变化过程（这里不是动画，经过源码能够看到，其实只是一个简单的尺寸上的瞬时缩放）。可是，当超过 3 个菜单时，文字就再也不显示。对比看一下 5 个菜单时的效果图：

能够看到，交互方式也发生变化，选中有一个左右移动腾出空间的过程。那再多一点菜单数量，好比 6 个时呢？对不起，要报错啦，不支持！

注意：根据 Material Design 对底部导航栏的设计要求，BottomNavigationView 只支持 3 到 5 个子菜单数量的导航栏。而且，考虑到用户体验，3 个及3个如下菜单数量的导航栏，与超过 3 个时，交互过程也有所区分。关于最多支持 5 个字菜单的内容，能够从 BottomNavigationView 源码中查看：
public static final int MAX_ITEM_COUNT = 5;
当超出这个数量时，产生非法参数异常。

经过 setOnNavigationItemSelectedListener() 方法能够监听不一样子菜单的选中切换事件。可是，居然没有一个简便的方法直接设置选中某个子菜单，就像 check(id) 这样。不知是否是 BottomNavigationView 控件设计时的遗漏。目前可以想到的一个作法就是获取 menu item 对象，利用 performClick() 模拟点击事件，如：

BottomNavigationView view = (BottomNavigationView) findViewById(R.id.bnv_menu);
view.findViewById(R.id.action_explore).performClick();复制代码

以上即是 BottomNavigationView 的全部内容，按照 Android 上的 Bottom Navigation 设计规范定制而成。能够看出，使用起来仍是很简单的。同时，可定制性也很是有限。好比，想在底部某个子菜单添加一个小红点提示的视图，就有些难以处理。若是使用 RadioGroup 实现导航栏的话，就灵活一些。

附：GitHub 站有一个 BottomNavigationBar 开源项目，专门针对 Material Design 风格的 Bottom Navigation 量身定制的，可供参考。

关于我：亦枫，博客地址：yifeng.studio/，新浪微博：IT亦枫

微信扫描二维码，欢迎关注个人我的公众号：安卓笔记侠

不只分享个人原创技术文章，还有程序员的职场遐想