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项目中实现一个底部菜单栏,并提供完整的实例代码。
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底部菜单栏实现的实例代码”的内容,你了解清楚吗?希望对你有所帮助,任何问题可以给我留言,让我们下期再见吧。
原创文章,作者:未希,如若转载,请注明出处:https://www.kdun.com/ask/1292568.html
本网站发布或转载的文章及图片均来自网络,其原创性以及文中表达的观点和判断不代表本网站。如有问题,请联系客服处理。
发表回复