当前位置:首页 > 行业动态 > 正文

如何实现Android底部菜单栏的实例代码?

在Android中,可以使用 BottomNavigationView来实现底部菜单栏。以下是一个简单的实例代码:,,“ xml,,` ,,在res/menu/bottom_nav_menu.xml 中定义菜单项:,,` xml,,,,,,` ,,在Activity中设置监听器:,,` java,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.navigation_home:, // Handle home action, return true;, case R.id.navigation_dashboard:, // Handle dashboard action, return true;, case R.id.navigation_notifications:, // Handle notifications action, return true;, }, return false;, },});,“

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

如何实现Android底部菜单栏的实例代码?  第1张

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底部菜单栏实现的实例代码”的内容,你了解清楚吗?希望对你有所帮助,任何问题可以给我留言,让我们下期再见吧。

0