Android 侧滑菜单（DrawerLayout+ToolBar的使用）

关注

VIP免费原创最新推荐文章于 2023-06-20 11:45:00 发布 2.8k 阅读 AI 写同款· GEO 优化 ›

Android使用DrawerLayout和ToolBar实现仿知乎侧滑菜单侧滑菜单现在在很多app上都可以看到，以下文章主要讲如何实现实现Android的侧滑菜单。可以先看一个简单的侧滑菜单设计。示例图：从屏幕左端向右滑动或点击左上角按钮可打开侧滑栏菜单。具体实现activity_main.xml<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout 阅读详情

引言

DrawerLayout是现在Android App开发很流行的一种UI框架，它就是我们常见的侧滑菜单，QQ和百度阅读等很多APP都有类似的效果。不过它们其中有些是用SlidingMenu实现的，有些则是用DrawerLayout实现的。SlidingMenu是GitHub上一个很火的开源框架，早期的很多Android App的侧滑菜单都是用这个框架做的。不过后来Google给开发者写了这个官方的用起来更加简便的DrawerLayout。现在做侧滑菜单，我们都 推荐使用DrawerLayout。最近我做的一个项目中也用到了这个，所以把自己的一些开发经验记录下来，也希望能帮助到需要了解这方面的人。_^o^

使用思路

布局

DrawerLayout是Android提供的控件，它的API就在Android的SDK里，为了向下兼容，我们使用支持包V4包里的。一般情况下我们想实现的是侧滑菜单既可以手指滑出也可以点击ToolBar上的汉堡按钮来弹出。这里就涉及到ToolBar的使用和在代码中设置 ActionBarDrawerToggle监听了。下面我们详细说明。

android.support.v4.widget.DrawerLayout

android.support.v7.widget.Toolbar

ActionBarDrawerToggle

这里先给出我们的Demo最后效果截图：
布局文件

布局中，首先是一个android.support.v7.widget.Toolbar，因为ToolBar中用到
app:title="功能菜单" app:navigationIcon="@drawable/tb_navigation_icon"这两个属性，所以在父布局中一定要声明命名空间：xmlns:app="http://schemas.android.com/apk/res-auto"

然后，就是我们的android.support.v4.widget.DrawerLayout了，这个控件的使用分为两部分，首先要写显示在主空间（也就是主界面）上的部分，这里用一个FrameLayout填充，这是考虑到我们这个地方可以用Fragment.第二部分则是侧滑菜单的菜单内容。根据我们上面的效果图，我们写一个圆形的头像（CircleImageView）,然后写几个菜单选项即可，这个很简单，大家可以看看后面的Demo代码，这里不多说了。值得注意的是，DrawerLayout必须先写主界面部分的UI，再写侧滑菜单的ui。这是因为android解析的时候以这个顺序来识别。

<?xml version="1.0" encoding="utf-8"?>
		<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
		    xmlns:tools="http://schemas.android.com/tools"
		    android:layout_width="match_parent"
		    android:layout_height="match_parent"
		    android:orientation="vertical"
		    tools:context="com.alanjet.drawerlayouttest.MainActivity"
		    xmlns:app="http://schemas.android.com/apk/res-auto">
		    <android.support.v7.widget.Toolbar
		        android:id="@+id/tl_toolbar"
		        app:title="功能菜单"
		        app:navigationIcon="@drawable/tb_navigation_icon"
		        android:layout_height="wrap_content"
		        android:minHeight="?attr/actionBarSize"
		        android:layout_width="match_parent"
		        android:background="#66cc99" />
	
	    <android.support.v4.widget.DrawerLayout
	        android:id="@+id/dl_d