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 专用的方法；

最后完成的效果如下：

本次分享到此结束！

相关推荐
BD_Marathon5 小时前
【MySQL】函数
android·数据库·mysql
西西学代码6 小时前
安卓开发---耳机的按键设置的UI实例
android·ui
maki07710 小时前
虚幻版Pico大空间VR入门教程 05 —— 原点坐标和项目优化技巧整理
android·游戏引擎·vr·虚幻·pico·htc vive·大空间
千里马学框架10 小时前
音频焦点学习之AudioFocusRequest.Builder类剖析
android·面试·智能手机·车载系统·音视频·安卓framework开发·audio
fundroid14 小时前
掌握 Compose 性能优化三步法
android·android jetpack
TeleostNaCl14 小时前
如何在 IDEA 中使用 Proguard 自动混淆 Gradle 编译的Java 项目
android·java·经验分享·kotlin·gradle·intellij-idea
旷野说16 小时前
Android Studio Narwhal 3 特性
android·ide·android studio
maki0771 天前
VR大空间资料 01 —— 常用VR框架对比
android·ue5·游戏引擎·vr·虚幻·pico
xhBruce1 天前
InputReader与InputDispatcher关系 - android-15.0.0_r23
android·ims
领创工作室1 天前
安卓设备分区作用详解-测试机红米K40
android·java·linux
热门推荐
01KGG转MP3工具|非KGM文件|解密音频02GitHub 镜像站点03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05jdk21下载、安装（Windows、Linux、macOS）06零基础搭建赛博朋克个人主页：蓝耘Claude Code完整实战教程0746个Nano-banana 精选提示词，持续更新中08adb安装教程（附adb命令大全详解）adb环境配置教程09Linux下V2Ray安装配置指南10两千字总结：Codex 国内如何安装和使用的教程，以及如何设置中文回答