Android开发笔记（一百六十九）利用BottomNavigationView实现底部标签栏
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，改过的各频道界面如下面各图所示，从上到下分别为首页频道、仪表盘频道、消息频道的页面效果，可见三个频道从标签文本和说明描述都改成了汉字。
