在学习之前,我们先得知道侧边导航栏是什么?
它是一个 可以让内容从屏幕边缘滑出的布局容器 ,由安卓官方提供,用于创建侧边菜单,通常搭配
NavigationView
使用;
添加依赖:
在app下的build.gradle中添加以下代码:
implementation 'androidx.appcompat:appcompat:1.6.1'
implementation 'com.google.android.material:material:1.11.0'
implementation 'androidx.drawerlayout:drawerlayout:1.2.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
我们还需要在导包的时候修改一下:
把
import android.widget.Toolbar;
修改成
import androidx.appcompat.widget.Toolbar;
做好之后,我们就正式的开始学习了;
DrawerLayout的基本结构和用法
其实导航栏的实现就是靠DrawerLayout来实现的,我把概念放在下面:
DrawerLayout 是一个允许内容从屏幕边缘滑出显示的布局,适合放置菜单、用户信息或页面切换功能。它可以从**左边(start)或右边(end)**滑出,通常用于构建带有侧边栏的 Material Design 风格 App。
DrawerLayout的功能和特点
1. 侧滑菜单功能:DrawerLayout 提供侧边滑出菜单的实现,允许用户通过滑动屏幕边缘或点击按钮打开抽屉菜单,提升界面简洁性和可用性;
-
支持左右两侧菜单 :支持从屏幕的左侧或右侧分别展示抽屉菜单。通过
layout_gravity="start"
(左侧)和layout_gravity="end"
(右侧)来指定; -
与 Toolbar 集成 :可以与
Toolbar
和ActionBarDrawerToggle
配合使用,在 Toolbar 上显示图标,通过点击图标打开或关闭抽屉; -
内建动画效果:DrawerLayout 自动提供抽屉打开和关闭的动画效果。主内容视图可以根据抽屉的滑动进行遮挡或平移,增强用户体验;
-
支持监听抽屉事件 :提供
DrawerListener
,可以监听抽屉的打开、关闭、滑动、状态变化等事件,方便开发者根据抽屉状态执行相关操作。 -
适配不同屏幕大小:DrawerLayout 可以自动适配小屏和大屏设备,适用于手机和平板等不同尺寸的屏幕,支持响应式布局。
-
结合 NavigationView 使用 :常与
NavigationView
配合使用,后者提供了方便的菜单项管理、头部布局和选中状态功能,适合构建标准的侧边导航菜单。
我们来讲讲代码,在代码中通过讲解它的属性,布局等来学习:
<?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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/main"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:layout_height="match_parent"
>
<androidx.appcompat.widget.Toolbar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "@+id/toolbar"
app:subtitle="子标题"
app:title="标题"
app:navigationIcon="@drawable/title"
>
</androidx.appcompat.widget.Toolbar>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Hello World!"
android:layout_gravity="center"
android:layout_marginTop="300dp"/>
</LinearLayout>
<com.google.android.material.navigation.NavigationView
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:id = "@+id/nav_view"
android:layout_gravity="start"
app:headerLayout="@layout/nax_drawer_header"
app:menu = "@menu/nav_drawer_menu">
</com.google.android.material.navigation.NavigationView>
</androidx.drawerlayout.widget.DrawerLayout>
小知识点:
关于布局方面,我们需要学习两点:
- 这里我们可以看到,drawerlayout布局中,可以放置多个子布局,但是子布局的顺序很重要:drawerlayout布局中,第一个子布局必须是app的主内容,后续的子布局才能是你的侧边导航栏;
官方规定:drawerlayout的第一个子view会被视为"主界面",后续的view会被视为抽屉视图,比如侧边栏;
- DrawerLayout 最多只能有两个直接子 View;
什么是直接子view,给大家举个例子?
比如上图,中间的两个子view都是直接子view;
<DrawerLayout>
<LinearLayout>
<FrameLayout />
<NavigationView />
</LinearLayout>
</DrawerLayout>
在上图中,<FrameLayout /> 就不是直接子view了;
回顾代码:
<DrawerLayout>
<FrameLayout /> or ConstraintLayout
<NavigationView />
</DrawerLayout>
关于主界面中所需要用到的Toolbar:
第一个view:Toolbar
Toolbar 是 Android 中用于替代传统 ActionBar 的一个可高度自定义的顶部导航栏控件。它通常位于屏幕顶部,承载着应用的标题、导航按钮(如返回箭头或抽屉菜单图标)、操作菜单(如搜索、分享)等元素;
Toolbar 的特点:
-
灵活可定制:可以自由设置布局、样式、颜色和内容,比传统 ActionBar 更加灵活;
-
兼容性好:支持在不同 Android 版本中统一外观;
-
可嵌入布局中:不像 ActionBar 固定,Toolbar 可以作为普通视图嵌入到任意布局,方便自定义设计;
-
支持导航控件:例如左上角图标,常用于控制 DrawerLayout 的开合;
总结一下:Toolbar 就是你 App 界面顶部的"工具栏",负责承载导航和操作入口;
这里不做过多的介绍,简要告诉大家属性:
<androidx.appcompat.widget.Toolbar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "@+id/toolbar"
app:subtitle="子标题"
app:title="标题"
app:navigationIcon="@drawable/title"
>
</androidx.appcompat.widget.Toolbar>
在这段代码中:
比较生疏的属性就三个:
app:subtitle="子标题" 设置副标题,显示在主标题下方,一般用来补充信息,比如当前子页面名、状态等。
app:title="标题" 设置 Toolbar 的主标题,通常显示应用名称或当前页面名称
app:navigationIcon="@drawable/title" 设置左侧的导航图标,比如常见的“返回箭头”或“汉堡菜单”图标,用于导航或打开 DrawerLayout 抽屉。

这是这么设置后的效果;
第二个布局是NavigationView,我们来系统的介绍一下吧;
NavigationView
主要介绍:
NavigationView
是 Android 支持库中提供的一个专门用于配合 DrawerLayout 实现侧边导航菜单的控件。它本质上是一个可滚动的菜单容器,通常放在 DrawerLayout 的"抽屉"部分,用于显示应用的导航条目。
它的主要作用:
-
显示菜单项 :可通过
menu
属性引用菜单 XML 文件(menu.xml
),自动生成可点击的导航项; -
支持添加头部视图 :通过
app:headerLayout
属性或 Java 代码添加用户头像、昵称、背景等内容; -
与 DrawerLayout 搭配:放在 DrawerLayout 的第二个子视图中,用来显示侧边导航栏;
-
支持状态高亮、点击事件 :点击某个菜单项自动高亮,可以配合
NavigationItemSelectedListener
实现页面跳转; -
自带 Material Design 风格:默认支持波纹点击动画、图标与文本组合布局等;
<com.google.android.material.navigation.NavigationView android:layout_width="wrap_content" android:layout_height="match_parent" android:id = "@+id/nav_view" android:layout_gravity="start" app:headerLayout="@layout/nax_drawer_header" app:menu = "@menu/nav_drawer_menu"> </com.google.android.material.navigation.NavigationView>
-
app:menu:
引用一个菜单 XML 文件,定义导航项 -
app:headerLayout:
引用一个布局 XML 文件,作为导航头部 -
android:layout_gravity="start":
指定抽屉从哪边滑出,通常是start
表示左侧,end代表右侧; -
itemIconTint
,itemTextColor:
设置菜单图标和文字的颜色
app:menu:菜单的定义
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="@+id/it_title"
android:title="更改头像"
/>
<item
android:id="@+id/it_name"
android:title="修改昵称"
/>
<item
android:id="@+id/it_chatperson"
android:title="在线人数"
/>
<item
android:id="@+id/it_gotochat"
android:title="去聊天"
/>
<item
android:id="@+id/it_exit"
android:title="退出"
/>
</menu>
app:headerLayout :
导航头部
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="300dp"
android:orientation="vertical">
<ImageView
android:layout_width="70dp"
android:layout_height="70dp"
android:src = "@drawable/title1"
android:layout_marginTop="100dp"
android:layout_gravity="center"
/>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id = "@+id/tv_title"
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:text="个人中心"/>
</LinearLayout>
关于监听事件
navigationView = findViewById(R.id.nav_view);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
DrawerLayout drawerLayout = findViewById(R.id.main);
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
drawerLayout.openDrawer(Gravity.LEFT);
}
});
这是关于toolbar开启侧边栏视图的代码:
-
获取
toolbar
,设置为当前 Activity 的ActionBar;
-
setSupportActionBar(toolbar)
使 Toolbar 能使用 ActionBar 的功能,比如标题、返回按钮、菜单等; -
Toolbar 左上角"导航按钮"的点击事件监听器;
-
手动打开左侧的抽屉(Gravity.LEFT 表示"左侧抽屉");
drawerLayout.openDrawer(Gravity.LEFT);这句手动打开抽屉视图的代码,同时我们也可以为按钮设立点击事件;
drawerLayout.closeDrawer(Gravity.RIGHT);
同时我们也可以手动关闭侧边栏 ;
下面是关于每个菜单项的点击事件,我们可以利用点击事件达到我们想要的结果;
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
int id = menuItem.getItemId();
if(id == R.id.it_chatperson){
Toast.makeText(MainActivity.this,"chatperson",Toast.LENGTH_SHORT).show();
}
else if(id == R.id.it_exit){
Toast.makeText(MainActivity.this,"exit",Toast.LENGTH_SHORT).show();
}
else if(id == R.id.it_gotochat){
Toast.makeText(MainActivity.this,"gotochat",Toast.LENGTH_SHORT).show();
}
else if(id == R.id.it_name){
Toast.makeText(MainActivity.this,"name",Toast.LENGTH_SHORT).show();
}
else if(id == R.id.it_title){
Toast.makeText(MainActivity.this,"title",Toast.LENGTH_SHORT).show();
}
return true;
}
});
给 NavigationView 设置一个 菜单点击事件监听器 setNavigationItemSelectedListener(...)
是 NavigationView 专用的方法;
最后完成的效果如下:

本次分享到此结束!