如何在 Material Design 中使用 BottomNavigationView

在 Material Design 中，BottomNavigationView 是一种非常流行的底部导航栏控件，可以帮助用户快速切换不同的页面或功能。本文将介绍如何在 Android 应用中使用 BottomNavigationView，并提供详细的指导和示例代码。

1. 导入依赖库

在使用 BottomNavigationView 之前，需要先在项目中导入相应的依赖库。在 build.gradle 文件中添加以下代码：

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

2. 在布局文件中添加 BottomNavigationView

在布局文件中添加 BottomNavigationView 控件，并设置相应的属性。例如：

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

其中，app:menu 属性指定了 BottomNavigationView 中显示的菜单，需要在 res/menu 目录下创建一个 XML 文件，并在其中定义菜单项。例如：

// www.javascriptcn.com code example
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard"
        android:title="Dashboard" />
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Notifications" />
</menu>

3. 处理 BottomNavigationView 的点击事件

在 Activity 或 Fragment 中，需要处理 BottomNavigationView 的点击事件，并根据点击的菜单项切换相应的页面或功能。可以通过以下代码实现：

// www.javascriptcn.com code example
BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);
bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
        switch (menuItem.getItemId()) {
            case R.id.navigation_home:
                // 切换到 Home 页面
                return true;
            case R.id.navigation_dashboard:
                // 切换到 Dashboard 页面
                return true;
            case R.id.navigation_notifications:
                // 切换到 Notifications 页面
                return true;
        }
        return false;
    }
});

4. 自定义 BottomNavigationView 样式

如果需要自定义 BottomNavigationView 的样式，可以通过以下方式实现。首先，在 res/drawable 目录下创建一个 XML 文件，定义 BottomNavigationView 的样式。例如：

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorPrimary" />
    <item android:state_checked="false" android:color="@color/colorAccent" />
</selector>

然后，在布局文件中设置 BottomNavigationView 的样式：

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemIconTint="@drawable/bottom_navigation_item_color"
    app:itemTextColor="@drawable/bottom_navigation_item_color"
    app:menu="@menu/bottom_navigation_menu" />

5. 示例代码

综合以上内容，以下是一个完整的示例代码：

// www.javascriptcn.com code example
public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        BottomNavigationView bottomNavigationView = findViewById(R.id.bottom_navigation);
        bottomNavigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
                switch (menuItem.getItemId()) {
                    case R.id.navigation_home:
                        // 切换到 Home 页面
                        return true;
                    case R.id.navigation_dashboard:
                        // 切换到 Dashboard 页面
                        return true;
                    case R.id.navigation_notifications:
                        // 切换到 Notifications 页面
                        return true;
                }
                return false;
            }
        });
    }
}

<com.google.android.material.bottomnavigation.BottomNavigationView
    android:id="@+id/bottom_navigation"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:itemIconTint="@drawable/bottom_navigation_item_color"
    app:itemTextColor="@drawable/bottom_navigation_item_color"
    app:menu="@menu/bottom_navigation_menu" />

// www.javascriptcn.com code example
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/navigation_home"
        android:icon="@drawable/ic_home"
        android:title="Home" />
    <item
        android:id="@+id/navigation_dashboard"
        android:icon="@drawable/ic_dashboard"
        android:title="Dashboard" />
    <item
        android:id="@+id/navigation_notifications"
        android:icon="@drawable/ic_notifications"
        android:title="Notifications" />
</menu>

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/colorPrimary" />
    <item android:state_checked="false" android:color="@color/colorAccent" />
</selector>

结语

本文介绍了如何在 Material Design 中使用 BottomNavigationView，并提供了详细的指导和示例代码。通过学习本文，读者可以快速掌握 BottomNavigationView 的使用方法，为自己的应用添加漂亮、实用的底部导航栏。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d9ead8a941bf713419fd1c