Android DrawerLayout侧边导航栏的实现步骤
<div id="navCategory"><h5 class="catalogue">目录</h5><ul class="first_class_ul"><li>简介</li><li>实现步骤</li><li>NavigationView</li><li>DrawerLayout的功能和特点</li></ul></div><p class="maodian"></p><h2>简介</h2><p>DrawerLayout是Android开发中一种常见的布局组件，常用于实现侧滑菜单效果，它允许一个或多个子视图在用户交互时从屏幕边缘滑出。</p>
<p class="maodian"></p><h2>实现步骤</h2>
<p>1.完成布局文件，以DrawerLayout为根布局，其第一个子布局为主布局，第二个子布局为侧边导航栏的布局。</p>
<p>DrawerLayout最多只能有两个直接子View</p>
<p><strong>注意：</strong><br />侧边导航栏的布局必须设置属性android:layout_gravity，侧边栏才不会显示，否则侧边导航栏会默认直接显示在页面。</p>
<div class="jb51code"><pre class="brush:java;">android:layout_gravity="start" //侧边导航栏从左边出现
android:layout_gravity="end" //侧边导航栏从右边出现</pre></div>
<div class="jb51code"><pre class="brush: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></pre></div>
<p>2.代码控制</p>
<p>首先获取DrawerLayout对象</p>
<div class="jb51code"><pre class="brush:java;"> drawerLayout=findViewById(R.id.main);</pre></div>
<p>关闭侧边导航栏</p>
<div class="jb51code"><pre class="brush:java;"> drawerLayout.closeDrawers(); </pre></div>
<p>打开侧边导航栏</p>
<div class="jb51code"><pre class="brush:java;"> drawerLayout.openDrawer(left);
//上面的left既可以是菜单栏的布局对象，也可以是菜单栏的布局id</pre></div>
<p>监听侧边导航栏</p>
<div class="jb51code"><pre class="brush: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) {
}
});</pre></div>
<p class="maodian"></p><h2>NavigationView</h2>
<p><code>NavigationView</code> 是 Android 支持库中提供的一个专门用于<strong>配合 DrawerLayout 实现侧边导航菜单</strong>的控件。它本质上是一个可滚动的菜单容器，通常放在 DrawerLayout 的“抽屉”部分，用于显示应用的导航条目。</p>
<p><strong>主要作用：</strong></p>
<ul><li>显示菜单项：通过menu属性引用XML文件（menu.xml），自动生成可点击的的导航项；</li><li>添加头部视图：通过app:headerLayout属性添加用户头像、昵称、背景等内容；</li><li>支持状态高亮、点击事件：点击某个菜单项自动高亮，可配合NavigationItemSelectedListener页面跳转。</li></ul>
<p>1.实现布局文件</p>
<div class="jb51code"><pre class="brush: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：设置菜单图标和文字的颜色</pre></div>
<p>2.定义菜单</p>
<div class="jb51code"><pre class="brush: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></pre></div>
<p>3.导航头部</p>
<div class="jb51code"><pre class="brush: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></pre></div>
<p>4.设置菜单项点击事件</p>
<p>通过设置菜单项的点击事件监听器setNavigationItemSelectedListener()</p>
<div class="jb51code"><pre class="brush: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;
}
});</pre></div>
<p class="maodian"></p><h2>DrawerLayout的功能和特点</h2>
<p>1. 侧滑菜单功能：DrawerLayout 提供侧边滑出菜单的实现，允许用户通过滑动屏幕边缘或点击按钮打开抽屉菜单，提升界面简洁性和可用性；</p>
<p>2. 支持左右两侧菜单：支持从屏幕的左侧或右侧分别展示抽屉菜单。通过 layout_gravity="start"（左侧）和 layout_gravity="end"（右侧）来指定；</p>
<p>3. 与 Toolbar 集成：可以与 Toolbar 和 ActionBarDrawerToggle 配合使用，在 Toolbar 上显示图标，通过点击图标打开或关闭抽屉；</p>
<p>4. 内建动画效果：DrawerLayout 自动提供抽屉打开和关闭的动画效果。主内容视图可以根据抽屉的滑动进行遮挡或平移，增强用户体验；</p>
<p>5. 支持监听抽屉事件：提供 DrawerListener，可以监听抽屉的打开、关闭、滑动、状态变化等事件，方便开发者根据抽屉状态执行相关操作。</p>
<p>6. 适配不同屏幕大小：DrawerLayout 可以自动适配小屏和大屏设备，适用于手机和平板等不同尺寸的屏幕，支持响应式布局。</p>
<p>7. 结合 NavigationView 使用：常与 NavigationView 配合使用，后者提供了方便的菜单项管理、头部布局和选中状态功能，适合构建标准的侧边导航菜单。</p>
<p>我们来讲讲代码，在代码中通过讲解它的属性，布局等来学习：</p>
<div class="jb51code"><pre class="brush: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: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></pre></div>
<p>到此这篇关于Android DrawerLayout实现侧边导航栏的详细步骤的文章就介绍到这了,更多相关Android DrawerLayout侧边导航栏内容请搜索琼殿技术社区以前的文章或继续浏览下面的相关文章希望大家以后多多支持琼殿技术社区！</p>
<div class="art_xg">
<b>您可能感兴趣的文章:</b><ul><li>Android抽屉布局DrawerLayout的简单使用</li><li>Android实现侧滑菜单DrawerLayout</li><li>Android侧滑菜单之DrawerLayout用法详解</li><li>Android布局控件DrawerLayout实现完美侧滑效果</li><li>Android使用DrawerLayout仿QQ6.0双侧滑菜单</li><li>Android侧滑菜单控件DrawerLayout使用详解</li><li>android实现简单底部导航栏</li><li>Android实现底部导航栏效果</li></ul>
</div>
</div>
<!--endmain-->
頁:
[1]