问题
如何实现常见应用中的底部导航栏的功能？
底部导航栏.png
回答
可以借助 BottomNavigationView 来实现这一效果。
效果
效果.gif
简介
BottomNavigationView 是应用程序的标准底部导航栏，是 Material Design 3 导航规范、Material Design 2 底部导航规范 的实现。
应用于顶级页面的导航，适用于 3 - 5 个菜单项的场景。
本文的说明不涉及角标 ( 图标右上角显示的数字 )。如有需要，BottomNavigation 可能会有所帮助。
步骤
- 添加
BottomNavigationView所在库的依赖。
dependencies {
...
implementation 'com.google.android.material:material:1.4.0'
...
}
如果 build 失败，可能和项目与 material 库的版本不匹配有关。
1.5.0 版本对应 Material Design 3, 要求 compileSdkVersion 和 targetSdkVersion 不低于 31 。其他版本的项目要求可以查阅 material-components-android/releases。
- 在 Activity 的 layout 文件中使用
BottomNavigationView控件。
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/main_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="@menu/navigation_view_menu_items" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
- 第二步中，
BottomNavigationView的app:menu属性需要引用一个菜单资源，该菜单资源用于定义导航栏中菜单项的数量和样式。创建res/menu目录，在目录下创建菜单文件。
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/navigation_menu_item_home"
android:icon="@drawable/navigation_home"
android:title="主页" />
<item
android:id="@+id/navigation_menu_item_contact"
android:icon="@drawable/navigation_contact"
android:title="联系人" />
<item
android:id="@+id/navigation_menu_item_mine"
android:icon="@drawable/navigation_mine"
android:title="我的" />
</menu>
上面的菜单文件中，定义了 3 个菜单项，每个菜单项包含 id, icon(图标) 和title (标题) 三个属性。
- 第三步中的
icon属性需要引用 drawable 资源，以“主页”为例进行说明。创建 drawable 文件, 为选中和非选中状态添加对应的图标。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@drawable/navigation_home_selected" android:state_selected="true" />
<item android:drawable="@drawable/navigation_home_default" android:state_selected="false" />
</selector>
item 的 drawable属性引用 png 之类的图片即可。
navigation_home_default.png
navigation_home_selected.png
至此，底部导航栏的样式就实现了。
创建“主页”、“联系人”和“我的” Fragment 和 layout 文件。当某个菜单项选中时，切换到对应的 Fragment。
在 Activity 的 layout 文件中使用
ViewPager2控件。作为 3 个 Fragment 的容器，并控制它们的切换。
<?xml version="1.0" encoding="utf-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<data>
</data>
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@id/main_navigation_bar"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_weight="1" />
<com.google.android.material.bottomnavigation.BottomNavigationView
android:id="@+id/main_navigation_bar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@android:color/white"
app:layout_constraintBottom_toBottomOf="parent"
app:menu="@menu/navigation_view_menu_items" />
</androidx.constraintlayout.widget.ConstraintLayout>
</layout>
创建 ViewPager2 的 Fragment 适配器。
public class FragmentAdapter extends FragmentStateAdapter {
private final ArrayList<Fragment> fragments;
public FragmentAdapter(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
fragments = new ArrayList<>();
fragments.add(new HomeFragment());
fragments.add(new ContactFragment());
fragments.add(new MineFragment());
}
@NonNull
@Override
public Fragment createFragment(int position) {
return fragments.get(position);
}
@Override
public int getItemCount() {
return fragments.size();
}
}
在 Activity 中为 ViewPager2 设置适配器。
public class BottomNavigationBarActivity extends AppCompatActivity {
private NavigationActivityBottomNavigationBarBinding binding;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
int layoutId = R.layout.navigation_activity_bottom_navigation_bar;
binding = DataBindingUtil.setContentView(this, layoutId);
// 为 ViewPager2 设置适配器
binding.mainFragmentContainer.setAdapter(new FragmentAdapter(this));
}
}
- 在 Activity 中为
BottomNavigationView控件添加菜单项选中事件监听器，当某一项选中后，ViewPager2切换为对应的 Fragment。
private void setNavigationItemSelectedListener() {
binding.mainNavigationBar.setOnItemSelectedListener(new NavigationBarView.OnItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
String itemTitle = (String) item.getTitle();
switch (itemTitle) {
case "主页": {
binding.mainFragmentContainer.setCurrentItem(0);
}
break;
case "联系人": {
binding.mainFragmentContainer.setCurrentItem(1);
}
break;
case "我的": {
binding.mainFragmentContainer.setCurrentItem(2);
}
break;
}
return true;
}
});
}
禁用 ViewPager2 控件的滑动切换页面功能，仅支持点击底部导航栏的菜单项切换页面。( 监听 ViewPager2 的页面切换，设置 BottomNavigationView 的选中项亦可。类似于微信的效果，支持点击和滑动两种切换方式 )
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
int layoutId = R.layout.navigation_activity_bottom_navigation_bar;
binding = DataBindingUtil.setContentView(this, layoutId);
binding.mainFragmentContainer.setAdapter(new FragmentAdapter(this));
// 禁用滑动切换页面功能
binding.mainFragmentContainer.setUserInputEnabled(false);
setNavigationItemSelectedListener();
}
