Android开发笔记（一百六十九）利用BottomNavigationView实现底部标签栏

在Android Studio上创建官方默认的首屏标签页面很方便，首先右击需要添加标签栏的模块，在弹出的右键菜单中依次选择“New”——“Activity”——“Bottom Navigation Activity”，弹出下图所示的活动创建页面。

在创建页面的“Activity Name”一栏填写新活动的名称，再单击页面右下角的Finish按钮，Android Studio就会自动创建该活动的Java代码及其布局文件。
然后编译运行App，进入刚创建的活动页面，其界面效果如下图所示。可见测试页面的底部默认提供了三个导航标签，分别是Home、Dashboard和Notifications。

注意到初始页面的Home标签从文字到图片均为高亮显示，说明当前处于Home频道。接着点击Dashboard标签，此时界面如下图所示，可见切换到了Dashboard频道。

继续点击Notifications，此时界面如下图所示，可见切换到了Notifications频道。

不过为了定制页面的详细内容，开发者仍需修改相关代码，譬如将标签文字从英文改成中文，将频道上方的描述说明从英文改成中文，给频道页面添加图像视图等其他控件等等，故而还得梳理标签栏框架的实现方式。
首先查看标签页面的布局文件，它的关键代码如下所示：

  

   

    

     

    
    

     

          <com.google.android.material.bottomnavigation.BottomNavigationView
     
    
   

    

     

    
    

     

              android:id=
      "@+id/nav_view"
     
    
   

    

     

    
    

     

              android:layout_width=
      "0dp"
     
    
   

    

     

    
    

     

              android:layout_height=
      "wrap_content"
     
    
   

    

     

    
    

     

              android:background=
      "?android:attr/windowBackground"
     
    
   

    

     

    
    

     

              app:layout_constraintBottom_toBottomOf=
      "parent"
     
    
   

    

     

    
    

     

              app:menu=
      "@menu/bottom_nav_menu" />    <fragment
     
    
   

    

     

    
    

     

              android:id=
      "@+id/nav_host_fragment"
     
    
   

    

     

    
    

     

              android:name=
      "androidx.navigation.fragment.NavHostFragment"
     
    
   

    

     

    
    

     

              android:layout_width=
      "match_parent"
     
    
   

    

     

    
    

     

              android:layout_height=
      "match_parent"
     
    
   

    

     

    
    

     

              app:defaultNavHost=
      "true"
     
    
   

    

     

    
    

     

              app:layout_constraintTop_toTopOf=
      "parent"
     
    
   

    

     

    
    

     

              app:navGraph=
      "@navigation/mobile_navigation" />
     
    
  

从布局内容可知，标签页面主要包含两个组成部分，一个是位于底部的BottomNavigationView（底部导航视图），另一个是位于其上占据剩余屏幕的碎片fragment。底部导航视图又由一排标签菜单组成，具体菜单在@menu/bottom_nav_menu中定义；而碎片为各频道的主体部分，具体内容在app:navGraph="@navigation/mobile_navigation中定义。哟，原来奥妙就在这两个文件当中，赶紧打开menu目录之下的bottom_nav_menu.xml看看：

  

   

    

     

    
    

     

      <menu xmlns:android=
      "http://schemas.android.com/apk/res/android">
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          <item
     
    
   

    

     

    
    

     

              android:id=
      "@+id/navigation_home"
     
    
   

    

     

    
    

     

              android:icon=
      "@drawable/ic_home_black_24dp"
     
    
   

    

     

    
    

     

              android:title=
      "@string/title_home" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          <item
     
    
   

    

     

    
    

     

              android:id=
      "@+id/navigation_dashboard"
     
    
   

    

     

    
    

     

              android:icon=
      "@drawable/ic_dashboard_black_24dp"
     
    
   

    

     

    
    

     

              android:title=
      "@string/title_dashboard" />    <item
     
    
   

    

     

    
    

     

              android:id=
      "@+id/navigation_notifications"
     
    
   

    

     

    
    

     

              android:icon=
      "@drawable/ic_notifications_black_24dp"
     
    
   

    

     

    
    

     

              android:title=
      "@string/title_notifications" />
     
    
   

    

     

    
    

     

      <
      /menu>
     
    
  

上面的菜单定义文件以menu为根节点，内部容纳三个item节点，分别对应屏幕底部的三个标签。每个item节点都拥有id、icon、title三个属性，其中id指定该菜单项的编号，icon指定该菜单项的图标，title指定该菜单项的文本。顺藤摸瓜查看values目录之下的strings.xml，果然找到了下面的三个标签文本定义：

  

   

    

     

    
    

     

          <
      string name=
      "title_home">Home</
      string>
     
    
   

    

     

    
    

     

          <
      string name=
      "title_dashboard">Dashboard</
      string>
     
    
   

    

     

    
    

     

          <
      string name=
      "title_notifications">Notifications</
      string>
     
    
  

搞清楚了底部标签栏的资源情况，接着打开navigation目录之下的mobile_navigation.xml，究竟里面是怎么定义各个频道的呢？

  

   

    

     

    
    

     

      <navigation xmlns:android=
      "http://schemas.android.com/apk/res/android"
     
    
   

    

     

    
    

     

          xmlns:app=
      "http://schemas.android.com/apk/res-auto"
     
    
   

    

     

    
    

     

          xmlns:tools=
      "http://schemas.android.com/tools"
     
    
   

    

     

    
    

     

          android:id=
      "@+id/mobile_navigation"
     
    
   

    

     

    
    

     

          app:startDestination=
      "@+id/navigation_home">
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          <fragment
     
    
   

    

     

    
    

     

              android:id=
      "@+id/navigation_home"
     
    
   

    

     

    
    

     

              android:name=
      "com.example.chapter12.ui.home.HomeFragment"
     
    
   

    

     

    
    

     

              android:label=
      "@string/title_home"
     
    
   

    

     

    
    

     

              tools:layout=
      "@layout/fragment_home" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          <fragment
     
    
   

    

     

    
    

     

              android:id=
      "@+id/navigation_dashboard"
     
    
   

    

     

    
    

     

              android:name=
      "com.example.chapter12.ui.dashboard.DashboardFragment"
     
    
   

    

     

    
    

     

              android:label=
      "@string/title_dashboard"
     
    
   

    

     

    
    

     

              tools:layout=
      "@layout/fragment_dashboard" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          <fragment
     
    
   

    

     

    
    

     

              android:id=
      "@+id/navigation_notifications"
     
    
   

    

     

    
    

     

              android:name=
      "com.example.chapter12.ui.notifications.NotificationsFragment"
     
    
   

    

     

    
    

     

              android:label=
      "@string/title_notifications"
     
    
   

    

     

    
    

     

              tools:layout=
      "@layout/fragment_notifications" />
     
    
   

    

     

    
    

     

      <
      /navigation>
     
    
  

上述的导航定义文件以navigation为根节点，内部依旧分布着三个fragment节点，显然正好对应三个频道。每个fragment节点拥有id、name、label、layout四个属性，各属性的用途说明如下：
id：指定当前碎片的编号。
name：指定当前碎片的完整类名路径。
label：指定当前碎片的的标题文本。
layout：指定当前碎片的布局文件。
这些默认的碎片代码到底有何不同，打开其中一个HomeFragment.java研究研究，它的关键代码如下所示：

  

   

    

     

    
    

     

          
      public View onCreateView(
      @NonNull LayoutInflater inflater,
     
    
   

    

     

    
    

     

                                   ViewGroup container, Bundle savedInstanceState) {
     
    
   

    

     

    
    

     

              homeViewModel = ViewModelProviders.of(
      this).
      get(HomeViewModel.
      class);
     
    
   

    

     

    
    

     

              View root = inflater.inflate(R.layout.fragment_home, container, 
      false);
     
    
   

    

     

    
    

     

              
      final TextView textView = root.findViewById(R.id.text_home);
     
    
   

    

     

    
    

     

              homeViewModel.getText().observe(
      this, new Observer<String>() {
     
    
   

    

     

    
    

     

                  
      @Override
     
    
   

    

     

    
    

     

                  
      public void onChanged(
      @Nullable String s) {
     
    
   

    

     

    
    

     

                      textView.setText(s);
     
    
   

    

     

    
    

     

                  }
     
    
   

    

     

    
    

     

              });
     
    
   

    

     

    
    

     

              
      return root;
     
    
   

    

     

    
    

     

          }
     
    
  

看来频道用到的碎片代码仍然在onCreateView方法中根据布局文件生成页面元素，这样修改频道界面就变成给碎片编码了。总算理清了这种底部导航的实现方式，接下来准备修理修理默认的标签及其频道。先打开values目录之下的strings.xml，把三个标签的文字从英文改成中文，修改内容示例如下：

  

   

    

     

    
    

     

          <
      string name=
      "title_home">首页</
      string>
     
    
   

    

     

    
    

     

          <
      string name=
      "title_dashboard">仪表盘</
      string>
     
    
   

    

     

    
    

     

          <
      string name=
      "title_notifications">消息</
      string>
     
    
  

再打开三个频道的碎片代码，给文本视图填上中文描述，首页频道HomeFragment.java的修改内容示例如下：

  

   

    

     

    
    

     

          
      public View onCreateView(
      @NonNull LayoutInflater inflater,
     
    
   

    

     

    
    

     

                                   ViewGroup container, Bundle savedInstanceState) {
     
    
   

    

     

    
    

     

              View root = inflater.inflate(R.layout.fragment_home, container, 
      false);
     
    
   

    

     

    
    

     

              
      final TextView textView = root.findViewById(R.id.text_home);
     
    
   

    

     

    
    

     

              textView.setText(
      "这是首页页面");
     
    
   

    

     

    
    

     

              
      return root;
     
    
   

    

     

    
    

     

          }
     
    
  

因为默认代码里的ViewModel并非必需组件，所以简洁起见省去了ViewModel相关代码，另外两个碎片频道的代码依此类推。
重新编译运行App，改过的各频道界面如下面各图所示，从上到下分别为首页频道、仪表盘频道、消息频道的页面效果，可见三个频道从标签文本和说明描述都改成了汉字。

点此查看Android开发笔记的完整目录