Android组件DrawerLayout仿网易新闻v4.4侧滑菜单
概述
今天这篇博客将记录一些关于drawerlayout的基本用法,我想关于drawerlayout的用法也许有不少不够了解,这也是比较正常的事情,因为drawerlayout作为android组件是google后来在android中添加的,在android.support.v4包下。那么,drawerlayout是一个怎么的组件呢?我们知道,当我们使用android上各类app的时候,是不是注意过app主页上通常有一个“侧滑菜单”?关于侧滑菜单的实现,我在前面博客里有一些介绍,想多些了解的朋友请移步:
android自定义控件——侧滑菜单
android自定义控件——开源组件slidingmenu的项目集成
这里用“网易新闻”客户端v4.4的截图来说明一下,这个drawerlayout抽屉式布局是什么样子的。
好,大家已经看到了,网易新闻客户端效果很明显,当我们手指在屏幕左侧向右滑动时候,就会有一个抽屉式的菜单从左边弹出,并且是“悬浮”在主界面之上的,合理的利用了设备上有限的空间,同样手指在屏幕右侧向左滑动也会出现一个向左弹出的抽屉式菜单,用户体验效果还是不错的,在drawerlayout出现之前,我们需要做侧滑菜单时,不得不自己实现一个或者使用github上的开源的项目slidingmenu,也许是google也看到了slidingmenu的强大之处,于是在android的后期版本中添加了drawerlayout来实现slidingmenu同样功能的组件,而且为了兼容早期版本,将其添加在android,support.v4包下。
关于drawerlayout的training:
关于drawerlayout的api:http://developer.android.com/reference/android/support/v4/widget/drawerlayout.html
另外,我已经翻译过了google的training课程,地址是:
效果预览
创建抽屉布局
下面这个抽屉布局引用的是android.support.v4.drawerlayout,类似于linealayout、relativelayout等布局一样定义,在drawerlayout内部再定义3个布局,分别是管理主界面的framelayout,此布局用来展示界面切换的fragment,下面是listview,用来展示菜单列表,最后是一个relativelayout,用来展示右边的布局,布局代码如下:
<android.support.v4.widget.drawerlayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" > <framelayout android:id="@+id/content_frame" android:layout_width="match_parent" android:layout_height="match_parent" /> <listview android:id="@+id/left_drawer" android:layout_width="200dp" android:layout_height="match_parent" android:layout_gravity="start" android:background="#111" android:choicemode="singlechoice" android:divider="@android:color/transparent" android:dividerheight="0dp" /> <relativelayout android:id="@+id/right_drawer" android:layout_width="220dp" android:layout_height="match_parent" android:layout_gravity="end" android:background="#111" android:gravity="center_horizontal" > <textview android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="这是右边栏" android:textcolor="@android:color/white" android:textsize="24sp" /> </relativelayout> </android.support.v4.widget.drawerlayout>
这个布局文件示范了一些重要的布局特征.
- 主要内容的视图(framelayout)必须是drawlayout的第一个子元素, 因为导航抽屉是在主要内容视图的上面.
- 主要内容视图设置为匹配父视图的宽度和高度, 因为它代表了整个界面导航抽屉是隐藏的.
- 抽屉视图(listview)必须指定其水平重力与android:layout_gravity属性。支持从右到左(rtl)语言,指定值与 "start" 代替 "left"(所以抽屉里出现在布局的右侧当布局是rtl时).这里将listview设置为左边栏菜单,所以android:layout_gravity属性设置为“start”,将relativelayout设置为右边栏,设置android:layout_gravity属性为“end”.
- 抽屉视图指定其宽度用dp单位和高度匹配父视图。抽屉里的宽度不能超过320 dp, 所以用户总是可以看到主要内容视图的一部分。
初始化抽屉列表
正如上述所讲,因为drawerlayout里包含一个listview作为左边栏侧滑菜单,所以我们需要首先初始化这个抽屉列表,并且为这个列表适配上数据,数据适配器使用的是最简单的arrayadapter,模拟数据被简单的定义在res/values/strings.xml里,如下:
<string-array name="menu_array"> <item>menu 1</item> <item>menu 2</item> <item>menu 3</item> <item>menu 4</item> </string-array>
在java代码中,首先创建一个mainactivity继承了android.support.v4.app.fragmentactivity,因为后续中需要进行fragment之间的切换。
protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); ...... // 初始化菜单列表 mmenutitles = getresources().getstringarray(r.array.menu_array); mmenulistview.setadapter(new arrayadapter<string>(this, r.layout.drawer_list_item, mmenutitles)); mmenulistview.setonitemclicklistener(new draweritemclicklistener()); ...... }
处理导航点击事件
当用户选择了抽屉列表里面的一个item时, 系统调用onitemclicklistener上的onitemclick(), 给setonitemclicklistener()你在onitemclick()方法里面做什么,在下面的例子中, 选择每一个item都会在主要内容的布局中插入一个不同的fragment.并且将导航列表的内容传递给fragment中显示出来,下面是部分代码:
/** * listview上的item点击事件 * */ private class draweritemclicklistener implements listview.onitemclicklistener { @override public void onitemclick(adapterview<?> parent, view view, int position, long id) { selectitem(position); } } /** * 切换主视图区域的fragment * * @param position */ private void selectitem(int position) { // todo auto-generated method stub fragment fragment = new contentfragment(); bundle args = new bundle(); switch (position) { case 0: args.putstring("key", mmenutitles[position]); break; case 1: args.putstring("key", mmenutitles[position]); break; case 2: args.putstring("key", mmenutitles[position]); break; case 3: args.putstring("key", mmenutitles[position]); break; default: break; } fragment.setarguments(args); // fragmentactivity将点击的菜单列表标题传递给fragment fragmentmanager fragmentmanager = getsupportfragmentmanager(); fragmentmanager.begintransaction().replace(r.id.content_frame, fragment).commit(); // 更新选择后的item和title,然后关闭菜单 mmenulistview.setitemchecked(position, true); settitle(mmenutitles[position]); mdrawerlayout.closedrawer(mmenulistview); }
开源material-menu的集成
细心的朋友也许会发现“网易新闻”v4.4客户端主页左上角上有个菜单“动态”的菜单按钮,显示流程是这样的,当菜单没有打开时,显示“三”这样的三条横线,当菜单打开(无论左右菜单)时,会显示“<-”这样的按钮,不停的变化,这样的效果是不是有点绚丽啊?!了解过android5.0的朋友,应该会知道这种效果是使用了android5.0新推出的material design设计语言做出来的效果,那么该怎么模仿这个效果呢?不好意思,由于偷懒,我已经在牛牛的github中找到了这样的效果——material-menu组件,该组件模拟出了android5.0下的material design效果,注意的是该组件中使用了jackwharton的nineoldandroids动画效果。
material-menu主页:
nineoldandroids主页:https://github.com/jakewharton/nineoldandroids
关于material-menu的使用可以参考其主页上的demo和说明,集成时需要下载nineoldandroids导出jar集成到项目中。下面是我使用的部分代码:
protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); ...... // 设置抽屉打开时,主要内容区被自定义阴影覆盖 mdrawerlayout.setdrawershadow(r.drawable.drawer_shadow, gravitycompat.start); // 设置actionbar可见,并且切换菜单和内容视图 getactionbar().setdisplayhomeasupenabled(true); getactionbar().sethomebuttonenabled(true); mmaterialmenuicon = new materialmenuicon(this, color.white, stroke.thin); mdrawerlayout.setdrawerlistener(new drawerlayout.simpledrawerlistener() { @override public void ondrawerslide(view drawerview, float slideoffset) { showview = drawerview; if (drawerview == mmenulistview) { mmaterialmenuicon.settransformationoffset(materialmenudrawable.animationstate.burger_arrow, isdirection_left ? 2 - slideoffset : slideoffset); } else if (drawerview == right_drawer) { mmaterialmenuicon.settransformationoffset(materialmenudrawable.animationstate.burger_arrow, isdirection_right ? 2 - slideoffset : slideoffset); } } @override public void ondraweropened(android.view.view drawerview) { if (drawerview == mmenulistview) { isdirection_left = true; } else if (drawerview == right_drawer) { isdirection_right = true; } } @override public void ondrawerclosed(android.view.view drawerview) { if (drawerview == mmenulistview) { isdirection_left = false; } else if (drawerview == right_drawer) { isdirection_right = false; showview = mmenulistview; } } }); ...... }
此外,还需要关联一下meterial-menu的状态,需要覆盖activity下的onpostcreate和onsaveinstancestate方法:
/** * 根据onpostcreate回调的状态,还原对应的icon state */ @override protected void onpostcreate(bundle savedinstancestate) { super.onpostcreate(savedinstancestate); mmaterialmenuicon.syncstate(savedinstancestate); } /** * 根据onsaveinstancestate回调的状态,保存当前icon state */ @override protected void onsaveinstancestate(bundle outstate) { mmaterialmenuicon.onsaveinstancestate(outstate); super.onsaveinstancestate(outstate); }
添加actionbar上的菜单按钮
为了尽量模拟出“网易新闻”v4.4客户端主页,我也在标题栏右上角添加一个小图标,为了能在点击这个小图标的时候弹出右边栏菜单,实现方式很简单,关于actionbar上添加导航的知识可以在csdn上搜到一些解释或者上android开发者官网查看源文档,我这里首先简单的在res/menu下main.xml中这样定义一个:
<menu xmlns:android="http://schemas.android.com/apk/res/android" > <item android:id="@+id/action_personal" android:icon="@drawable/action_personal" android:orderincategory="100" android:showasaction="always" android:title="@string/action_personal"/> </menu>
完成定义操作后,需要加载菜单布局:
/** * 加载菜单 */ @override public boolean oncreateoptionsmenu(menu menu) { // inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, menu); return true; }
标题栏导航点击事件处理
/** * 点击actionbar上菜单 */ @override public boolean onoptionsitemselected(menuitem item) { int id = item.getitemid(); switch (id) { case android.r.id.home: if (showview == mmenulistview) { if (!isdirection_left) { // 左边栏菜单关闭时,打开 mdrawerlayout.opendrawer(mmenulistview); } else {// 左边栏菜单打开时,关闭 mdrawerlayout.closedrawer(mmenulistview); } } else if (showview == right_drawer) { if (!isdirection_right) {// 右边栏关闭时,打开 mdrawerlayout.opendrawer(right_drawer); } else {// 右边栏打开时,关闭 mdrawerlayout.closedrawer(right_drawer); } } break; case r.id.action_personal: if (!isdirection_right) {// 右边栏关闭时,打开 if (showview == mmenulistview) { mdrawerlayout.closedrawer(mmenulistview); } mdrawerlayout.opendrawer(right_drawer); } else {// 右边栏打开时,关闭 mdrawerlayout.closedrawer(right_drawer); } break; default: break; } return super.onoptionsitemselected(item); }
这段的逻辑有点绕,事实上我做的是这样的,需要保证主界面上只能最多显示一个菜单布局,当左边的菜单布局展示时,此时打开右边菜单布局时,需要隐藏左边菜单布局;同样,如果右边的菜单布局已经在展示的时候,这时需要打开左边菜单布局,必须首先隐藏掉右边的菜单布局。为了判断当前即将显示或者关闭的是哪个布局,我在全局变量中定义了showview用来标记当前即将显示或者关闭的视图,如果showview==mmenulistview,说明左边菜单布局是即将被显示或隐藏的,这时进一步判断菜单是视图mmenulistview的是否已经显示的标记isdirection_left,来打开或者关闭左边视图菜单。
同样的道理,如果当前即将显示或者隐藏的是右边导航菜单的话,我们需要进一步判断右边导航是否已经显示,从而进行相关打开或隐藏的决定。
这里的逻辑似乎解释的有点乱,而且代码是分片段贴出来的,不利于理解,需要进一步理解的话,不妨继续看下面的部分,我已经贴出了所以的java代码,注释也很详尽,可以方便理解,实在不行,还可以点击博客下方的下载链接,直接下载源码运行一下。
全部源码
public class mainactivity extends fragmentactivity { /** drawerlayout */ private drawerlayout mdrawerlayout; /** 左边栏菜单 */ private listview mmenulistview; /** 右边栏 */ private relativelayout right_drawer; /** 菜单列表 */ private string[] mmenutitles; /** material design风格 */ private materialmenuicon mmaterialmenuicon; /** 菜单打开/关闭状态 */ private boolean isdirection_left = false; /** 右边栏打开/关闭状态 */ private boolean isdirection_right = false; private view showview; @override protected void oncreate(bundle savedinstancestate) { super.oncreate(savedinstancestate); setcontentview(r.layout.activity_main); mdrawerlayout = (drawerlayout) findviewbyid(r.id.drawer_layout); mmenulistview = (listview) findviewbyid(r.id.left_drawer); right_drawer = (relativelayout) findviewbyid(r.id.right_drawer); this.showview = mmenulistview; // 初始化菜单列表 mmenutitles = getresources().getstringarray(r.array.menu_array); mmenulistview.setadapter(new arrayadapter<string>(this, r.layout.drawer_list_item, mmenutitles)); mmenulistview.setonitemclicklistener(new draweritemclicklistener()); // 设置抽屉打开时,主要内容区被自定义阴影覆盖 mdrawerlayout.setdrawershadow(r.drawable.drawer_shadow, gravitycompat.start); // 设置actionbar可见,并且切换菜单和内容视图 getactionbar().setdisplayhomeasupenabled(true); getactionbar().sethomebuttonenabled(true); mmaterialmenuicon = new materialmenuicon(this, color.white, stroke.thin); mdrawerlayout.setdrawerlistener(new drawerlayoutstatelistener()); if (savedinstancestate == null) { selectitem(0); } } /** * listview上的item点击事件 * */ private class draweritemclicklistener implements listview.onitemclicklistener { @override public void onitemclick(adapterview<?> parent, view view, int position, long id) { selectitem(position); } } /** * drawerlayout状态变化监听 */ private class drawerlayoutstatelistener extends drawerlayout.simpledrawerlistener { /** * 当导航菜单滑动的时候被执行 */ @override public void ondrawerslide(view drawerview, float slideoffset) { showview = drawerview; if (drawerview == mmenulistview) {// 根据isdirection_left决定执行动画 mmaterialmenuicon.settransformationoffset( materialmenudrawable.animationstate.burger_arrow, isdirection_left ? 2 - slideoffset : slideoffset); } else if (drawerview == right_drawer) {// 根据isdirection_right决定执行动画 mmaterialmenuicon.settransformationoffset( materialmenudrawable.animationstate.burger_arrow, isdirection_right ? 2 - slideoffset : slideoffset); } } /** * 当导航菜单打开时执行 */ @override public void ondraweropened(android.view.view drawerview) { if (drawerview == mmenulistview) { isdirection_left = true; } else if (drawerview == right_drawer) { isdirection_right = true; } } /** * 当导航菜单关闭时执行 */ @override public void ondrawerclosed(android.view.view drawerview) { if (drawerview == mmenulistview) { isdirection_left = false; } else if (drawerview == right_drawer) { isdirection_right = false; showview = mmenulistview; } } } /** * 切换主视图区域的fragment * * @param position */ private void selectitem(int position) { fragment fragment = new contentfragment(); bundle args = new bundle(); switch (position) { case 0: args.putstring("key", mmenutitles[position]); break; case 1: args.putstring("key", mmenutitles[position]); break; case 2: args.putstring("key", mmenutitles[position]); break; case 3: args.putstring("key", mmenutitles[position]); break; default: break; } fragment.setarguments(args); // fragmentactivity将点击的菜单列表标题传递给fragment fragmentmanager fragmentmanager = getsupportfragmentmanager(); fragmentmanager.begintransaction() .replace(r.id.content_frame, fragment).commit(); // 更新选择后的item和title,然后关闭菜单 mmenulistview.setitemchecked(position, true); settitle(mmenutitles[position]); mdrawerlayout.closedrawer(mmenulistview); } /** * 点击actionbar上菜单 */ @override public boolean onoptionsitemselected(menuitem item) { int id = item.getitemid(); switch (id) { case android.r.id.home: if (showview == mmenulistview) { if (!isdirection_left) { // 左边栏菜单关闭时,打开 mdrawerlayout.opendrawer(mmenulistview); } else {// 左边栏菜单打开时,关闭 mdrawerlayout.closedrawer(mmenulistview); } } else if (showview == right_drawer) { if (!isdirection_right) {// 右边栏关闭时,打开 mdrawerlayout.opendrawer(right_drawer); } else {// 右边栏打开时,关闭 mdrawerlayout.closedrawer(right_drawer); } } break; case r.id.action_personal: if (!isdirection_right) {// 右边栏关闭时,打开 if (showview == mmenulistview) { mdrawerlayout.closedrawer(mmenulistview); } mdrawerlayout.opendrawer(right_drawer); } else {// 右边栏打开时,关闭 mdrawerlayout.closedrawer(right_drawer); } break; default: break; } return super.onoptionsitemselected(item); } /** * 根据onpostcreate回调的状态,还原对应的icon state */ @override protected void onpostcreate(bundle savedinstancestate) { super.onpostcreate(savedinstancestate); mmaterialmenuicon.syncstate(savedinstancestate); } /** * 根据onsaveinstancestate回调的状态,保存当前icon state */ @override protected void onsaveinstancestate(bundle outstate) { mmaterialmenuicon.onsaveinstancestate(outstate); super.onsaveinstancestate(outstate); } /** * 加载菜单 */ @override public boolean oncreateoptionsmenu(menu menu) { // inflate the menu; this adds items to the action bar if it is present. getmenuinflater().inflate(r.menu.main, menu); return true; } }
源码请在这里下载:http://xiazai.jb51.net/201701/yuanma/androiddrawerlayout(jb51.net).rar
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。