蓝桉云顶

在Android应用开发中，底部菜单栏（Bottom Navigation Bar）是一种常见的UI组件，用于在应用的不同功能模块之间进行导航，本文将详细介绍如何在Android项目中实现一个底部菜单栏，并提供完整的实例代码。

1. 准备工作

1 创建一个新的Android项目

打开Android Studio并创建一个新的项目，选择“Empty Activity”模板，然后点击“Next”，为项目命名并设置包名，最后点击“Finish”完成项目创建。

2 添加依赖项

在build.gradle文件中添加所需的依赖项，我们使用com.google.android.material:material库来实现Material Design风格的底部菜单栏。

dependencies {
    implementation 'com.google.android.material:material:1.4.0'
}

同步项目以下载依赖项。

2. 设计底部菜单栏

1 创建菜单资源文件

在res/menu目录下创建一个名为bottom_nav_menu.xml的文件，定义底部菜单栏的菜单项。

<!-res/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"
        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>

2 创建图标资源

在res/drawable目录下添加图标资源文件（如ic_home.xml,ic_dashboard.xml,ic_notifications.xml），这些文件可以是矢量图（Vector Drawable），也可以是位图（Bitmap）。

一个简单的矢量图图标：

<!-res/drawable/ic_home.xml -->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:fillColor="#FF000000"
        android:pathData="M10,20v-6h4v6h5v-8h3L12,3 2,12h3v8z"/>
</vector>

3. 实现底部菜单栏

1 修改布局文件

在res/layout/activity_main.xml中添加BottomNavigationView组件。

<!-res/layout/activity_main.xml -->
<RelativeLayout 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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/bottom_navigation" />
    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        app:menu="@menu/bottom_nav_menu" />
</RelativeLayout>

2 修改主活动文件

在MainActivity.java或MainActivity.kt中设置底部菜单栏的导航逻辑。

Java版本：

// MainActivity.java
package com.example.bottomnavigationbar;
import android.os.Bundle;
import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentTransaction;
import com.google.android.material.bottomnavigation.BottomNavigationView;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView bottomNav = findViewById(R.id.bottom_navigation);
        bottomNav.setOnNavigationItemSelectedListener(navListener);
        // Set default fragment
        getSupportFragmentManager().beginTransaction()
                .replace(R.id.fragment_container, new HomeFragment()).commit();
    }
    private final BottomNavigationView.OnNavigationItemSelectedListener navListener =
            new BottomNavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    Fragment selectedFragment = null;
                    switch (item.getItemId()) {
                        case R.id.navigation_home:
                            selectedFragment = new HomeFragment();
                            break;
                        case R.id.navigation_dashboard:
                            selectedFragment = new DashboardFragment();
                            break;
                        case R.id.navigation_notifications:
                            selectedFragment = new NotificationsFragment();
                            break;
                    }
                    if (selectedFragment != null) {
                        getSupportFragmentManager().beginTransaction()
                                .replace(R.id.fragment_container, selectedFragment).commit();
                        return true;
                    }
                    return false;
                }
            };
}

Kotlin版本：

// MainActivity.kt
package com.example.bottomnavigationbar
import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import androidx.fragment.app.Fragment
import com.google.android.material.bottomnavigation.BottomNavigationView
class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val bottomNav: BottomNavigationView = findViewById(R.id.bottom_navigation)
        bottomNav.setOnNavigationItemSelectedListener { menuItem ->
            var selectedFragment: Fragment? = null
            when (menuItem.itemId) {
                R.id.navigation_home -> selectedFragment = HomeFragment()
                R.id.navigation_dashboard -> selectedFragment = DashboardFragment()
                R.id.navigation_notifications -> selectedFragment = NotificationsFragment()
            }
            if (selectedFragment != null) {
                supportFragmentManager.beginTransaction()
                    .replace(R.id.fragment_container, selectedFragment).commit()
                return@setOnNavigationItemSelectedListener true
            }
            false
        }
        // Set default fragment
        supportFragmentManager.beginTransaction()
            .replace(R.id.fragment_container, HomeFragment()).commit()
    }
}

3 创建Fragment类

创建三个Fragment类：HomeFragment,DashboardFragment,NotificationsFragment，每个Fragment类都继承自Fragment并重写onCreateView方法。

HomeFragment.java：

// HomeFragment.java
package com.example.bottomnavigationbar;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class HomeFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_home, container, false);
    }
}

DashboardFragment.java：

// DashboardFragment.java
package com.example.bottomnavigationbar;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class DashboardFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_dashboard, container, false);
    }
}

NotificationsFragment.java：

// NotificationsFragment.java
package com.example.bottomnavigationbar;
import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class NotificationsFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_notifications, container, false);
    }
}

4 创建Fragment布局文件

在res/layout目录下创建三个布局文件：fragment_home.xml,fragment_dashboard.xml,fragment_notifications.xml，每个文件包含一个简单的TextView来显示内容。

fragment_home.xml：

<!-res/layout/fragment_home.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Home Fragment" />
</LinearLayout>

fragment_dashboard.xml：

<!-res/layout/fragment_dashboard.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Dashboard Fragment" />
</LinearLayout>

fragment_notifications.xml：

<!-res/layout/fragment_notifications.xml -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Notifications Fragment" />
</LinearLayout>

4. 运行和测试应用

您可以运行应用程序并测试底部导航栏的功能，点击不同的菜单项时，应该能够看到相应的Fragment被加载到容器中。

小伙伴们，上文介绍了“Android底部菜单栏实现的实例代码”的内容，你了解清楚吗？希望对你有所帮助，任何问题可以给我留言，让我们下期再见吧。