底栏导航底部菜单 BottomAppBar

2023-12-22 22:03:32

目前安卓底部导航栏一般由 BottomNavigationView + Fragment 组件使用，但如果你的 App 样式适合其他种类的底部导航，亦或者你的项目非常适合横屏，除了使用传统的 BottomNavigationView，你还可以使用 BottomAppBar 组件。BottomAppBar 组件是谷歌为符合 Material Design 而设计出的底部导航组件。

BottomAppBar 组件的特点是与以前的 BottomNavigationView 有明显的差异。BottomNavigationView 一般是从屏幕底部向上滑出，而 BottomAppBar 组件更像是一个工具栏（ActionBar），平放在屏幕底部。

今天这篇文章，我将手把手教你怎么在你的 App 中添加一个使用 BottomAppBar 组件的底栏导航。

添加依赖

在开始之前，我们需要先在项目中添加 BottomAppBar 组件的依赖：

implementation 'com.google.android.material:material:1.2.1'

布局文件

在你的布局文件中，我们需要将 <CoordinatorLayout> 作为父控件，<FloatingActionButton> 和 <BottomAppBar> 作为子控件。

<CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <fragment
        android:id="@+id/content"
        android:name="your.package.name.YourFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="com.google.android.material.appbar.AppBarLayout$ScrollingViewBehavior" />

    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@drawable/ic_add" />

    <com.google.android.material.bottomappbar.BottomAppBar
        android:id="@+id/bottom_app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        app:navigationIcon="@drawable/ic_menu"
        app:menu="@menu/bottom_app_bar_menu">

        <com.google.android.material.bottomappbar.BottomAppBar.FabCradle
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:cradle_inset_anchor_id="@+id/fab"
            app:cradle_translation_anchor_id="@+id/fab" />

    </com.google.android.material.bottomappbar.BottomAppBar>

</CoordinatorLayout>

在上面的布局文件中，我们使用了 <CoordinatorLayout> 作为父控件，<FloatingActionButton> 和 <BottomAppBar> 作为子控件。

<FloatingActionButton> 组件是一个悬浮按钮，它一般放置在屏幕的右下角，用于快速执行某个操作。

<BottomAppBar> 组件是底部导航栏组件，它一般放置在屏幕的底部，用于在不同的页面之间进行导航。

在 <BottomAppBar> 组件中，我们使用了 <com.google.android.material.bottomappbar.BottomAppBar.FabCradle> 子组件，它用于将 <FloatingActionButton> 组件固定在 <BottomAppBar> 组件上。

菜单文件

在你的菜单文件中，我们需要定义 <BottomAppBar> 组件的菜单项。

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

    <item
        android:id="@+id/action_home"
        android:icon="@drawable/ic_home"
        android:title="@string/home" />

    <item
        android:id="@+id/action_search"
        android:icon="@drawable/ic_search"
        android:title="@string/search" />

    <item
        android:id="@+id/action_settings"
        android:icon="@drawable/ic_settings"
        android:title="@string/settings" />

</menu>

在上面的菜单文件中，我们定义了三个菜单项：

action_home：主页
action_search：搜索
action_settings：设置

Java 代码

在你的 Java 代码中，我们需要处理 <BottomAppBar> 组件的点击事件。

BottomAppBar bottomAppBar = findViewById(R.id.bottom_app_bar);

bottomAppBar.setOnNavigationItemSelectedListener(new BottomAppBar.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.action_home:
                // Handle home action
                break;
            case R.id.action_search:
                // Handle search action
                break;
            case R.id.action_settings:
                // Handle settings action
                break;
        }
        return true;
    }
});