Android 中的 Material Design 组件底部应用栏

在 Android 中，Material Design 组件底部应用栏是一种常见的用户界面设计元素。底部应用栏可以让用户轻松导航和访问应用内的不同功能。

特点

底部应用栏具有以下特点：

• 显示在屏幕底部，通常和导航栏和/或标签页栏一起使用。
• 可以包含图标和文本标签，以便用户了解其功能。
• 可以滚动，当底部应用栏上的内容过多时，用户可以通过左右滑动来访问所有功能。
• 可以与浮动操作按钮 (FAB) 结合使用，使用户可以轻松访问关于页面的主要操作。

实现

1. 使用 BottomNavigationView

Android 原生提供了 BottomNavigationView 组件来实现底部应用栏。使用该组件时，需要在布局文件中添加 BottomNavigationView 元素，然后编写代码来配置其内容和行为。

以下是一个简单的例子：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:menu="@menu/nav_items" />

其中 app:menu 属性指定了底部应用栏要显示的菜单项，可以在 res/menu 目录下创建一个 XML 文件来定义菜单项。

<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/home"
        android:icon="@drawable/ic_home"
        android:title="@string/home" />
    <item
        android:id="@+id/search"
        android:icon="@drawable/ic_search"
        android:title="@string/search" />
    <item
        android:id="@+id/profile"
        android:icon="@drawable/ic_profile"
        android:title="@string/profile" />
</menu>

BottomNavigationView navigation = findViewById(R.id.navigation);
navigation.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.home:
                // 点击 Home 菜单项
                return true;
            case R.id.search:
                // 点击 Search 菜单项
                return true;
            case R.id.profile:
                // 点击 Profile 菜单项
                return true;
        }
        return false;
    }
});

2. 使用 Toolbar 和 BottomAppBar

除了 BottomNavigationView 以外，还可以使用 Toolbar 和 BottomAppBar 组件来实现底部应用栏。这种方法需要更多的自定义工作，但是可以实现更多个性化的设计。

以下是一个例子：

<androidx.coordinatorlayout.widget.CoordinatorLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- 页面内容 -->
    <androidx.core.widget.NestedScrollView
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." />

    </androidx.core.widget.NestedScrollView>

    <!-- 底部应用栏 -->
    <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"
        android:backgroundTint="@color/colorPrimary"
        app:fabAlignmentMode="center"
        app:navigationIcon="@drawable/ic_menu">

        <com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottom_navigation"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:menu="@menu/nav_items" />

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

    <!-- 浮动操作按钮 -->
    <com.google.android.material.floatingactionbutton.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="@dimen/fab_margin"
        android:src="@drawable/ic_add"
        app:backgroundTint="@color/colorAccent"
        app:layout_anchor="@id/bottom_app_bar" />

</androidx.coordinatorlayout.widget.CoordinatorLayout>

BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        switch (item.getItemId()) {
            case R.id.home:
                // 点击 Home 菜单项
                return true;
            case R.id.search:
                // 点击 Search 菜单项
                return true;
            case R.id.profile:
                // 点击 Profile 菜单项
                return true;
        }
        return false;
    }
});

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

FloatingActionButton fab = findViewById(R.id.fab);
fab.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        // 点击 FAB
    }
});

总结

底部应用栏是一种常见的用户界面设计元素，可以帮助用户轻松导航和访问应用内的不同功能。Android 中有多种方式可以实现底部应用栏，其中最简单的方法是使用 BottomNavigationView 组件。对于更复杂的设计需求，可以使用 Toolbar 和 BottomAppBar 组件，并自定义布局和行为。