在Android stdio中如何实现点击页面底部的导航栏不同页面地名称就可以直接跳转至相应的页面。给出详细步骤和每一步的代码
时间: 2024-03-09 09:48:23 浏览: 118
android实现页面跳转
好的,以下是详细的步骤和代码:
1. 首先,在你的 Android 项目中,创建一个底部导航栏。你可以使用 Android Studio 提供的 Navigation Component 来创建导航栏。
在 app/build.gradle 文件中添加 Navigation Component 的依赖:
```groovy
implementation "androidx.navigation:navigation-fragment-ktx:2.3.2"
implementation "androidx.navigation:navigation-ui-ktx:2.3.2"
```
在 res 目录中创建一个名为 navigation 的目录,并创建一个名为 nav_graph.xml 的文件。在该文件中,使用 Navigation Editor 来添加底部导航栏的目标页面。例如,我这里添加了三个页面:home、dashboard 和 notifications。
nav_graph.xml 文件内容如下:
```xml
<?xml version="1.0" encoding="utf-8"?>
<navigation 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"
app:startDestination="@id/home">
<fragment
android:id="@+id/home"
android:name="com.example.myapplication.ui.home.HomeFragment"
android:label="Home"
tools:layout="@layout/fragment_home" />
<fragment
android:id="@+id/dashboard"
android:name="com.example.myapplication.ui.dashboard.DashboardFragment"
android:label="Dashboard"
tools:layout="@layout/fragment_dashboard" />
<fragment
android:id="@+id/notifications"
android:name="com.example.myapplication.ui.notifications.NotificationsFragment"
android:label="Notifications"
tools:layout="@layout/fragment_notifications" />
</navigation>
```
2. 在 Navigation Component 中,你需要创建一个 NavGraph,并添加导航栏上的每个目标页面。你可以使用 Fragment 或 Activity 来实现这些目标页面。
例如,我这里创建了三个 Fragment:HomeFragment、DashboardFragment 和 NotificationsFragment。
HomeFragment.java 文件内容如下:
```java
public class HomeFragment extends Fragment {
public View onCreateView(@NonNull LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.fragment_home, container, false);
return root;
}
}
```
DashboardFragment.java 文件内容如下:
```java
public class DashboardFragment extends Fragment {
public View onCreateView(@NonNull LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.fragment_dashboard, container, false);
return root;
}
}
```
NotificationsFragment.java 文件内容如下:
```java
public class NotificationsFragment extends Fragment {
public View onCreateView(@NonNull LayoutInflater inflater,
ViewGroup container, Bundle savedInstanceState) {
View root = inflater.inflate(R.layout.fragment_notifications, container, false);
return root;
}
}
```
3. 然后,你需要设置底部导航栏的点击事件。你可以在你的 Activity 或 Fragment 中重写 `onNavigationItemSelected()` 方法,并使用 Navigation Component 中的 `Navigation.findNavController(view).navigate(destination)` 方法来实现页面跳转。
例如,我这里在 MainActivity 中实现了底部导航栏的点击事件:
MainActivity.java 文件内容如下:
```java
public class MainActivity extends AppCompatActivity
implements NavigationView.OnNavigationItemSelectedListener {
private AppBarConfiguration mAppBarConfiguration;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
DrawerLayout drawer = findViewById(R.id.drawer_layout);
NavigationView navigationView = findViewById(R.id.nav_view);
mAppBarConfiguration = new AppBarConfiguration.Builder(
R.id.nav_home, R.id.nav_dashboard, R.id.nav_notifications)
.setDrawerLayout(drawer)
.build();
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);
NavigationUI.setupWithNavController(navigationView, navController);
navigationView.setNavigationItemSelectedListener(this);
}
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem item) {
int id = item.getItemId();
if (id == R.id.nav_home) {
Navigation.findNavController(this, R.id.nav_host_fragment).navigate(R.id.home);
} else if (id == R.id.nav_dashboard) {
Navigation.findNavController(this, R.id.nav_host_fragment).navigate(R.id.dashboard);
} else if (id == R.id.nav_notifications) {
Navigation.findNavController(this, R.id.nav_host_fragment).navigate(R.id.notifications);
}
DrawerLayout drawer = findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
@Override
public boolean onSupportNavigateUp() {
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
return NavigationUI.navigateUp(navController, mAppBarConfiguration)
|| super.onSupportNavigateUp();
}
}
```
4. 最后,你需要在底部导航栏中为每个目标页面设置一个唯一的 ID。这样,当用户点击导航栏上的页面名称时,你可以通过这个 ID 来识别目标页面并进行页面跳转。
例如,我这里在 res/menu/menu_nav.xml 文件中为每个目标页面设置了一个唯一的 ID。
menu_nav.xml 文件内容如下:
```xml
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/nav_home"
android:icon="@drawable/ic_home_black_24dp"
android:title="Home" />
<item
android:id="@+id/nav_dashboard"
android:icon="@drawable/ic_dashboard_black_24dp"
android:title="Dashboard" />
<item
android:id="@+id/nav_notifications"
android:icon="@drawable/ic_notifications_black_24dp"
android:title="Notifications" />
</menu>
```
以上就是在 Android Studio 中实现点击底部导航栏跳转至相应页面的详细步骤和代码。希望能对你有所帮助。
阅读全文