引言
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