【Android】DrawerLayout实现侧边导航栏

某空m2025-10-31 19:44

简介

DrawerLayout是Android开发中一种常见的布局组件，常用于实现侧滑菜单效果，它允许一个或多个子视图在用户交互时从屏幕边缘滑出。

实现步骤

1.完成布局文件，以DrawerLayout为根布局，其第一个子布局为主布局，第二个子布局为侧边导航栏的布局。

DrawerLayout最多只能有两个直接子View

注意：

侧边导航栏的布局必须设置属性android:layout_gravity，侧边栏才不会显示，否则侧边导航栏会默认直接显示在页面。

xml 复制代码 
android:layout_gravity="start" //侧边导航栏从左边出现
android:layout_gravity="end" //侧边导航栏从右边出现
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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:id="@+id/main"
    android:layout_height="match_parent"
    android:background="@android:color/transparent"
    android:fitsSystemWindows="true"
    tools:context=".all.view.MainActivity">
    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/mainpage_viewpager2"
        android:fitsSystemWindows="true"
        android:layout_marginTop="30dp"
        android:layout_width="match_parent"
        android:layout_height="0dp">
        <androidx.viewpager2.widget.ViewPager2
            android:background="@android:color/transparent"
            android:fitsSystemWindows="true"
            android:id="@+id/main_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            app:layout_constraintBottom_toBottomOf="parent"
        />

    <com.google.android.material.bottomnavigation.BottomNavigationView
        android:id="@+id/bottom_navigation"
        android:layout_width="match_parent"
        android:layout_height="55dp"
        android:elevation="1dp"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintBottom_toBottomOf="parent"

        app:menu="@menu/main_nav_bottom_menu"
        android:background="@drawable/bottom_nav_view"
        app:labelVisibilityMode="labeled"
        app:itemBackground="@drawable/bottom_nav_view"
        app:itemTextColor="@color/main_item_text_selector"
        app:itemActiveIndicatorStyle="@null"
        style="@style/CustomBottomNavigationView"
         app:itemRippleColor="@color/white"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        >
    </com.google.android.material.bottomnavigation.BottomNavigationView>
    <ImageView
        android:id="@+id/bottom_navigation_add"
        android:layout_width="48dp"
        android:layout_height="60dp"
        android:src="@drawable/add"
        android:elevation="200dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"/>
    </androidx.constraintlayout.widget.ConstraintLayout>
    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="310dp"
        android:layout_height="match_parent"
        android:background="#F5F5F5"
        android:layout_gravity="start"
        >
        <ScrollView
        android:id="@+id/drawerlayout_scroolview"
        android:layout_width="match_parent"
        android:layout_height="650dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginTop="65dp"
        >
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:cardCornerRadius="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                app:cardElevation="0dp"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="55dp"
                    android:orientation="horizontal"
                    >
                    <ImageView
                        android:layout_gravity="center_vertical"
                        android:src="@drawable/addfirends"
                        android:layout_marginLeft="15dp"
                        android:layout_width="28dp"
                        android:layout_height="28dp"/>
                    <TextView
                        android:layout_gravity="center_vertical"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:text="添加好友"
                        android:textSize="14dp"/>
                </LinearLayout>
            </androidx.cardview.widget.CardView>
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:cardCornerRadius="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                app:cardElevation="0dp"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="55dp"
                    android:orientation="horizontal"
                    >
                    <ImageView
                        android:layout_gravity="center_vertical"
                        android:src="@drawable/creators_center"
                        android:layout_marginLeft="15dp"
                        android:layout_width="28dp"
                        android:layout_height="28dp"/>
                    <TextView
                        android:layout_gravity="center_vertical"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:text="创作者中心"
                        android:textSize="14dp"/>
                </LinearLayout>
            </androidx.cardview.widget.CardView>
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:cardCornerRadius="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                app:cardElevation="0dp"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="55dp"
                        android:orientation="horizontal"
                        >
                        <ImageView
                            android:layout_gravity="center_vertical"
                            android:src="@drawable/my_draft"
                            android:layout_marginLeft="15dp"
                            android:layout_width="25dp"
                            android:layout_height="25dp"/>
                        <TextView
                            android:layout_gravity="center_vertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="我的草稿"
                            android:textSize="14dp"/>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="55dp"
                        android:orientation="horizontal"
                        >
                        <ImageView
                            android:layout_gravity="center_vertical"
                            android:src="@drawable/my_comment"
                            android:layout_marginLeft="15dp"
                            android:layout_width="28dp"
                            android:layout_height="28dp"/>
                        <TextView
                            android:layout_gravity="center_vertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="我的评论"
                            android:textSize="14dp"/>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="55dp"
                        android:orientation="horizontal"
                        >
                        <ImageView
                            android:layout_gravity="center_vertical"
                            android:src="@drawable/browse_records"
                            android:layout_marginLeft="15dp"
                            android:layout_width="28dp"
                            android:layout_height="28dp"/>
                        <TextView
                            android:layout_gravity="center_vertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="浏览记录"
                            android:textSize="14dp"/>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="55dp"
                        android:orientation="horizontal"
                        >
                        <ImageView
                            android:layout_gravity="center_vertical"
                            android:src="@drawable/my_download"
                            android:layout_marginLeft="21dp"
                            android:layout_width="20dp"
                            android:layout_height="20dp"/>
                        <TextView
                            android:layout_gravity="center_vertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="我的下载"
                            android:textSize="14dp"/>
                    </LinearLayout>
                </LinearLayout>
            </androidx.cardview.widget.CardView>
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:cardCornerRadius="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                app:cardElevation="0dp"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="vertical">
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="55dp"
                        android:orientation="horizontal"
                        >
                        <ImageView
                            android:layout_gravity="center_vertical"
                            android:src="@drawable/orders"
                            android:layout_marginLeft="15dp"
                            android:layout_width="25dp"
                            android:layout_height="25dp"/>
                        <TextView
                            android:layout_gravity="center_vertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="订单"
                            android:textSize="14dp"/>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="55dp"
                        android:orientation="horizontal"
                        >
                        <ImageView
                            android:layout_gravity="center_vertical"
                            android:src="@drawable/shopping_cart"
                            android:layout_marginLeft="15dp"
                            android:layout_width="28dp"
                            android:layout_height="28dp"/>
                        <TextView
                            android:layout_gravity="center_vertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="购物车"
                            android:textSize="14dp"/>
                    </LinearLayout>
                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="55dp"
                        android:orientation="horizontal"
                        >
                        <ImageView
                            android:layout_gravity="center_vertical"
                            android:src="@drawable/wallet"
                            android:layout_marginLeft="15dp"
                            android:layout_width="28dp"
                            android:layout_height="28dp"/>
                        <TextView
                            android:layout_gravity="center_vertical"
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:layout_marginLeft="10dp"
                            android:text="钱包"
                            android:textSize="14dp"/>
                    </LinearLayout>
                </LinearLayout>
            </androidx.cardview.widget.CardView>
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:cardCornerRadius="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                app:cardElevation="0dp"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="55dp"
                    android:orientation="horizontal"
                    >
                    <ImageView
                        android:layout_gravity="center_vertical"
                        android:src="@drawable/small_routine"
                        android:layout_marginLeft="15dp"
                        android:layout_width="28dp"
                        android:layout_height="28dp"/>
                    <TextView
                        android:layout_gravity="center_vertical"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:text="小程序"
                        android:textSize="14dp"/>
                </LinearLayout>
            </androidx.cardview.widget.CardView>
            <androidx.cardview.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:background="@color/white"
                app:cardCornerRadius="10dp"
                android:layout_marginLeft="10dp"
                android:layout_marginRight="10dp"
                android:layout_marginTop="10dp"
                app:cardElevation="0dp"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="55dp"
                    android:orientation="horizontal"
                    >
                    <ImageView
                        android:layout_gravity="center_vertical"
                        android:src="@drawable/community_pact"
                        android:layout_marginLeft="15dp"
                        android:layout_width="28dp"
                        android:layout_height="28dp"/>
                    <TextView
                        android:layout_gravity="center_vertical"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginLeft="10dp"
                        android:text="社区公约"
                        android:textSize="14dp"/>
                </LinearLayout>
            </androidx.cardview.widget.CardView>
        </LinearLayout>
         </ScrollView>
        <LinearLayout
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/drawerlayout_scroolview"
            android:layout_marginTop="30dp"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <LinearLayout
                android:layout_marginLeft="30dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <FrameLayout
                    android:layout_gravity="center_horizontal"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@drawable/drawerlayout_background">
                    <ImageView
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@drawable/sweep"/>
                </FrameLayout>
                <TextView
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="扫一扫"
                    android:textSize="12dp"/>
            </LinearLayout>
            <LinearLayout
                android:layout_marginLeft="50dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <FrameLayout
                    android:layout_gravity="center_horizontal"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@drawable/drawerlayout_background">
                    <ImageView
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@drawable/customer_service"/>
                </FrameLayout>
                <TextView
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="帮助与客服"
                    android:textSize="12dp"/>
            </LinearLayout>
            <LinearLayout
                android:layout_marginLeft="50dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">
                <FrameLayout
                    android:layout_gravity="center_horizontal"
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:background="@drawable/drawerlayout_background">
                    <ImageView
                        android:layout_marginTop="10dp"
                        android:layout_marginLeft="10dp"
                        android:layout_width="20dp"
                        android:layout_height="20dp"
                        android:src="@drawable/set"/>
                </FrameLayout>
                <TextView
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="设置"
                    android:textSize="12dp"/>
            </LinearLayout>
        </LinearLayout>
    </androidx.constraintlayout.widget.ConstraintLayout>
</androidx.drawerlayout.widget.DrawerLayout>

2.代码控制

首先获取DrawerLayout对象

java 复制代码 
 drawerLayout=findViewById(R.id.main);

关闭侧边导航栏

java 复制代码 
 drawerLayout.closeDrawers();

打开侧边导航栏

java 复制代码 
 drawerLayout.openDrawer(left); 
 //上面的left既可以是菜单栏的布局对象，也可以是菜单栏的布局id

监听侧边导航栏

java 复制代码 
  drawerLayout.setDrawerListener(new DrawerLayout.DrawerListener() {
            @Override
            public void onDrawerSlide(View view, float v) {

            }

            @Override
            public void onDrawerOpened(View view) {
                Toast.makeText(MyActivity.this, "打开了侧边栏" , Toast.LENGTH_LONG).show();
            }

            @Override
            public void onDrawerClosed(View view) {
                Toast.makeText(MyActivity.this, "关闭了侧边栏" , Toast.LENGTH_LONG).show();
            }

            @Override
            public void onDrawerStateChanged(int i) {

            }
        });

NavigationView 是 Android 支持库中提供的一个专门用于配合 DrawerLayout 实现侧边导航菜单的控件。它本质上是一个可滚动的菜单容器，通常放在 DrawerLayout 的"抽屉"部分，用于显示应用的导航条目。

主要作用：

  • 显示菜单项：通过menu属性引用XML文件（menu.xml），自动生成可点击的的导航项；
  • 添加头部视图：通过app:headerLayout属性添加用户头像、昵称、背景等内容；
  • 支持状态高亮、点击事件：点击某个菜单项自动高亮，可配合NavigationItemSelectedListener页面跳转。

1.实现布局文件

xml 复制代码 
   <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：设置菜单图标和文字的颜色

2.定义菜单

xml 复制代码 
<?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>

3.导航头部

xml 复制代码 
<?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>

4.设置菜单项点击事件

通过设置菜单项的点击事件监听器setNavigationItemSelectedListener()

java 复制代码 
  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;
            }
        });
相关推荐
v***913017 分钟前
Spring+Quartz实现定时任务的配置方法
android·前端·后端
wilsend31 分钟前
Android Studio 2024版新建java项目和配置环境下载加速
android
兰琛1 小时前
Android Compose展示PDF文件
android·pdf
走在路上的菜鸟2 小时前
Android学Dart学习笔记第四节 基本类型
android·笔记·学习
百锦再2 小时前
第21章 构建命令行工具
android·java·图像处理·python·计算机视觉·rust·django
skyhh4 小时前
Android Studio 最新版汉化
android·ide·android studio
路人甲ing..4 小时前
Android Studio 快速的制作一个可以在 手机上跑的app
android·java·linux·智能手机·android studio
携欢7 小时前
PortSwigger靶场之Web shell upload via path traversal靶场通关秘籍
android
消失的旧时光-194314 小时前
Android ADB指令大全详解
android·adb
ashcn200117 小时前
opengl 播放视频的android c++ 方案
android·c++ opengl es
热门推荐
01GitHub 镜像站点02Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南03UV安装并设置国内源04【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连05BongoCat - 跨平台键盘猫动画工具06今天 Cloudflare 全球事故，连 GPT 和你的网站都一起“掉线”了07安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）08Linux下V2Ray安装配置指南09全球最强模型Grok4，国内已可免费使用！（附教程）1046个Nano-banana 精选提示词，持续更新中