### 实现带顶部导航栏、底部导航栏
和侧滑菜单的Android布局
#### 实现方案（使用
DrawerLayout和ViewPager2）
##### 1. 添加依赖（build.gradle）
```groovy
dependencies {
implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'com.google.android.material:material:1.9.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
implementation "androidx.viewpager2:viewpager2:1.0.0"
implementation "androidx.
drawerlayout:
drawerlayout:1.2.0"
}
```
##### 2. 主布局文件（activity_main.xml）
```xml
<?xml version="1.0" encoding="utf-8"?>
<androidx.
drawerlayout.widget.
DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/
drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- 主内容区域 -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!-- 顶部导航栏 -->
<com.google.android.material.appbar.MaterialToolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="?attr/actionBarSize"
android:background="?attr/colorPrimary"
app:title="应用标题"
app:menu="@menu/top_menu">
<!-- 左侧按钮 -->
<ImageView
android:id="@+id/btnLeft"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_menu"
android:layout_gravity="start"
android:padding="16dp"/>
<!-- 中间标题 -->
<TextView
android:id="@+id/tvTitle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="主标题"
android:textSize="18sp"
android:textColor="@android:color/white"
android:layout_gravity="center"/>
<!-- 右侧按钮 -->
<ImageView
android:id="@+id/btnRight"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/ic_more"
android:layout_gravity="end"
android:padding="16dp"/>
</com.google.android.material.appbar.MaterialToolbar>
<!-- 内容区域 -->
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"/>
<!-- 底部导航栏 -->
<com.google.android.material.bottom
navigation.Bottom
NavigationView
android:id="@+id/bottomNav"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:menu="@menu/bottom_menu"/>
</LinearLayout>
<!-- 左侧侧滑菜单 -->
<com.google.android.material.
navigation.
NavigationView
android:id="@+id/navViewLeft"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/nav_left_menu"/>
<!-- 右侧侧滑菜单 -->
<com.google.android.material.
navigation.
NavigationView
android:id="@+id/navViewRight"
android:layout_width="280dp"
android:layout_height="match_parent"
android:layout_gravity="end"
app:menu="@menu/nav_right_menu"/>
</androidx.
drawerlayout.widget.
DrawerLayout>
```
##### 3. Java代码实现（MainActivity.java）
```java
public class MainActivity extends AppCompatActivity {
private
DrawerLayout drawerLayout;
private ViewPager2 viewPager;
private
NavigationView navViewLeft, navViewRight;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// 初始化视图
drawerLayout = findViewById(R.id.
drawerLayout);
viewPager = findViewById(R.id.viewPager);
navViewLeft = findViewById(R.id.navViewLeft);
navViewRight = findViewById(R.id.navViewRight);
ImageView btnLeft = findViewById(R.id.btnLeft);
ImageView btnRight = findViewById(R.id.btnRight);
Bottom
NavigationView bottomNav = findViewById(R.id.bottomNav);
// 设置ViewPager适配器
ViewPagerAdapter adapter = new ViewPagerAdapter(this);
viewPager.setAdapter(adapter);
// 顶部左侧按钮点击打开左侧菜单
btnLeft.setOnClickListener(v ->
drawerLayout.open
Drawer(GravityCompat.START));
// 顶部右侧按钮点击打开右侧菜单
btnRight.setOnClickListener(v ->
drawerLayout.open
Drawer(GravityCompat.END));
// 底部导航与ViewPager联动
bottomNav.setOnItemSelectedListener(item -> {
int itemId = item.getItemId();
if (itemId == R.id.nav_home) {
viewPager.setCurrentItem(0);
} else if (itemId == R.id.nav_dashboard) {
viewPager.setCurrentItem(1);
} else if (itemId == R.id.nav_notifications) {
viewPager.setCurrentItem(2);
}
return true;
});
// ViewPager页面切换时更新底部导航
viewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
bottomNav.getMenu().getItem(position).setChecked(true);
}
});
// 侧滑菜单项点击事件
navViewLeft.set
NavigationItemSelectedListener(item -> {
// 处理左侧菜单点击
drawerLayout.close
Drawer(GravityCompat.START);
return true;
});
navViewRight.set
NavigationItemSelectedListener(item -> {
// 处理右侧菜单点击
drawerLayout.close
Drawer(GravityCompat.END);
return true;
});
}
// ViewPager2适配器
private static class ViewPagerAdapter extends FragmentStateAdapter {
public ViewPagerAdapter(@NonNull FragmentActivity fragmentActivity) {
super(fragmentActivity);
}
@NonNull
@Override
public Fragment createFragment(int position) {
switch (position) {
case 0: return new HomeFragment();
case 1: return new DashboardFragment();
case 2: return new NotificationsFragment();
default: return new HomeFragment();
}
}
@Override
public int getItemCount() {
return 3;
}
}
}
```
#### 关键实现点说明
1. **布局结构**：
- 使用 `
DrawerLayout` 作为根布局实现侧滑菜单
- 主内容区域包含顶部工具栏、ViewPager2
和底部导航栏
- 两个 `
NavigationView` 分别作为左右侧滑菜单
2. **功能联动**：
- 顶部左右按钮控制对应侧滑菜单的开关
- 底部导航与 ViewPager2 页面联动
- 侧滑菜单项点击后自动关闭菜单
3. **适配器实现**：
- 使用 `FragmentStateAdapter` 管理 ViewPager2 的页面
- 每个页面对应一个 Fragment 实现内容分离
4. **资源文件**：
- 创建 `res/menu` 目录下的菜单文件：
- `top_menu.xml`：顶部工具栏菜单
- `bottom_menu.xml`：底部导航菜单
- `nav_left_menu.xml`
和 `nav_right_menu.xml`：左右侧滑菜单
#### 优化建议
1. **手势控制**：
```java
// 添加边缘滑动手势
drawerLayout.set
DrawerLockMode(
DrawerLayout.LOCK_MODE_UNLOCKED);
```
2. **状态栏沉浸**：
```java
// 在styles.xml中设置
<item name="android:windowTranslucentStatus">true</item>
```
3. **菜单动画**：
```xml
<!-- 在res/anim中创建动画 -->
<scale xmlns:android="http://schemas.android.com/apk/res/android"
android:duration="300"
android:fromXScale="0.8"
android:toXScale="1.0"/>
```
使用 Jetpack
Navigation实现类似布局
博客提及了SlidingPaneLayout、Navigation Drawer和drawerlayout，这些均为前端开发中涉及的布局相关内容。
扫一扫
1912
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
