利用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,改过的各频道界面如下面各图所示,从上到下分别为首页频道、仪表盘频道、消息频道的页面效果,可见三个频道从标签文本和说明描述都改成了汉字。