Android-侧边导航栏的使用

我是好小孩2025-08-02 19:39

在学习之前，我们先得知道侧边导航栏是什么？

它是一个 可以让内容从屏幕边缘滑出的布局容器 ，由安卓官方提供，用于创建侧边菜单，通常搭配 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 提供侧边滑出菜单的实现，允许用户通过滑动屏幕边缘或点击按钮打开抽屉菜单，提升界面简洁性和可用性；

  1. 支持左右两侧菜单 ：支持从屏幕的左侧或右侧分别展示抽屉菜单。通过 layout_gravity="start"（左侧）和 layout_gravity="end"（右侧）来指定；

  2. 与 Toolbar 集成 ：可以与 Toolbar 和 ActionBarDrawerToggle 配合使用，在 Toolbar 上显示图标，通过点击图标打开或关闭抽屉；

  3. 内建动画效果：DrawerLayout 自动提供抽屉打开和关闭的动画效果。主内容视图可以根据抽屉的滑动进行遮挡或平移，增强用户体验；

  4. 支持监听抽屉事件 ：提供 DrawerListener，可以监听抽屉的打开、关闭、滑动、状态变化等事件，方便开发者根据抽屉状态执行相关操作。

  5. 适配不同屏幕大小：DrawerLayout 可以自动适配小屏和大屏设备，适用于手机和平板等不同尺寸的屏幕，支持响应式布局。

  6. 结合 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 是 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 专用的方法；

最后完成的效果如下：

本次分享到此结束！

相关推荐
雨白5 小时前
Android 自定义 View：从绘制基础到实战仪表盘与饼图
android
jiunian_cn5 小时前
【Linux】线程
android·linux·运维·c语言·c++·后端
Frank_HarmonyOS13 小时前
Android MVVM（Model-View-ViewModel）架构
android·架构
新子y17 小时前
【操作记录】我的 MNN Android LLM 编译学习笔记记录（一）
android·学习·mnn
lincats19 小时前
一步一步学习使用FireMonkey动画（1） 使用动画组件为窗体添加动态效果
android·ide·delphi·livebindings·delphi 12.3·firemonkey
想想吴20 小时前
Android.bp 基础
android·安卓·android.bp
写点啥呢1 天前
Android为ijkplayer设置音频发音类型usage
android·音视频·usage·mediaplayer·jikplayer
coder_pig1 天前
🤡 公司Android老项目升级踩坑小记
android·flutter·gradle
死就死在补习班1 天前
Android系统源码分析Input - InputReader读取事件
android
死就死在补习班1 天前
Android系统源码分析Input - InputChannel通信
android
热门推荐
01UV安装并设置国内源02【踩坑笔记】50系显卡适配的 PyTorch 安装03KGG转MP3工具|非KGM文件|解密音频04Qwen3-Coder 快速上手教程 | Qwen Code + Claude Code05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接06Claude Code VSCode集成开发指南：AI编程助手完整配置0720个国内外主流AI绘画工具大汇总（最新免费可用~）08DeepSeek更新！速览DeepSeek V3.1新特性092025最新国内服务器可用docker源仓库地址大全（2025年8月更新）10【2025.08.06最新版】Android Studio下载、安装及配置记录（自动下载sdk）