在android support.v4 中有一个抽屉视图控件DrawerLayout。使用这个控件,可以生成通过在屏幕上水平滑动打开或者关闭菜单,能给用户一个不错的体验效果。

最近在项目中,设计中有用到这个效果,但是是左右两边都能划出这样的一个菜单效果。经过使用发现,在xml布局中和代码中,几乎是添加添加同样的代码,就可以实现这种作用两种菜单的效果。

效果图如下:

左边拉出菜单:

右边拉出菜单效果:

具体的实现方法如下,结合代码文件,跟大家分享一下:


主页布局文件:

<?xmlversion="1.0"encoding="utf-8"?><android.support.v4.widget.DrawerLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/main_drawer_layout"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/transparent"><RelativeLayoutandroid:id="@+id/main_content_frame_parent"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/transparent"><!--下层显示的主要内容--><FrameLayoutandroid:id="@+id/main_content_frame"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/white"android:scrollbars="vertical"></FrameLayout></RelativeLayout><!--左侧滑动栏--><RelativeLayoutandroid:id="@+id/main_left_drawer_layout"android:layout_width="240dp"android:layout_height="match_parent"android:layout_gravity="start"android:background="@android:color/transparent"android:paddingTop="50dp"></RelativeLayout><!--右侧滑动栏--><RelativeLayoutandroid:id="@+id/main_right_drawer_layout"android:layout_width="240dp"android:layout_height="match_parent"android:layout_gravity="end"android:background="@android:color/transparent"android:paddingTop="50dp"></RelativeLayout></android.support.v4.widget.DrawerLayout>

如上,使用DrawerLayout需要在布局文件跟目录中引用,v4包中的DrawerLayout标签,并且宽和高,都设置为match_parent.里面framelayout用来现实菜单收起时,下层页面的布局。

而main_left_drawer_layout和main_right_drawer_layout为左右两个抽屉菜单对应的父layout,需要注意的是,在DrawerLayout中,从左侧开始使用android:layout_gravity="start",从右侧开始,使用android:layout_gravity="end"。

b.主布局代码文件:

packagecom.demo.drawlayout;importandroid.os.Bundle;importandroid.support.v4.app.ActionBarDrawerToggle;importandroid.support.v4.app.FragmentActivity;importandroid.support.v4.app.FragmentManager;importandroid.support.v4.app.FragmentTransaction;importandroid.support.v4.widget.DrawerLayout;importandroid.view.View;importandroid.widget.RelativeLayout;importandroid.widget.TextView;publicclassMainFrameLayoutextendsFragmentActivity{//抽屉菜单对象privateActionBarDrawerToggledrawerbar;publicDrawerLayoutdrawerLayout;privateTestFragmenttestFragment;privateRelativeLayoutleft_menu_layout,right_xiaoxi_layout;privateTextViewtext;@OverrideprotectedvoidonCreate(Bundlearg0){super.onCreate(arg0);setContentView(R.layout.main_frame_activity);initView();initEvent();}publicvoidinitView(){testFragment=newTestFragment();FragmentManagerfragmentManager=getSupportFragmentManager();FragmentTransactionf_transaction=fragmentManager.beginTransaction();f_transaction.replace(R.id.main_content_frame_parent,testFragment);f_transaction.commitAllowingStateLoss();initLeftLayout();initRightLayout();}publicvoidinitLeftLayout(){drawerLayout=(DrawerLayout)findViewById(R.id.main_drawer_layout);//设置透明drawerLayout.setScrimColor(0x00000000);//左边菜单left_menu_layout=(RelativeLayout)findViewById(R.id.main_left_drawer_layout);Viewview2=getLayoutInflater().inflate(R.layout.menu_layout,null);text=(TextView)view2.findViewById(R.id.text);text.setText("左边测试菜单");left_menu_layout.addView(view2);}publicvoidinitRightLayout(){//左边菜单right_xiaoxi_layout=(RelativeLayout)findViewById(R.id.main_right_drawer_layout);Viewview=getLayoutInflater().inflate(R.layout.xiaoxi_layout,null);text=(TextView)view.findViewById(R.id.text);text.setText("右边测试菜单");right_xiaoxi_layout.addView(view);}privatevoidinitEvent(){drawerbar=newActionBarDrawerToggle(this,drawerLayout,R.drawable.ic_launcher,R.string.open,R.string.close){//菜单打开@OverridepublicvoidonDrawerOpened(ViewdrawerView){super.onDrawerOpened(drawerView);}//菜单关闭@OverridepublicvoidonDrawerClosed(ViewdrawerView){super.onDrawerClosed(drawerView);}};drawerLayout.setDrawerListener(drawerbar);}//左边菜单开关事件publicvoidopenLeftLayout(){if(drawerLayout.isDrawerOpen(left_menu_layout)){drawerLayout.closeDrawer(left_menu_layout);}else{drawerLayout.openDrawer(left_menu_layout);}}//右边菜单开关事件publicvoidopenRightLayout(){if(drawerLayout.isDrawerOpen(right_xiaoxi_layout)){drawerLayout.closeDrawer(right_xiaoxi_layout);}else{drawerLayout.openDrawer(right_xiaoxi_layout);}}}

代码很简单,相应的地方都有注释。这里就不罗嗦了。

主要说一下:抽屉菜单的开关事件就是,把抽屉视图添加到ActionBarDrawerToggle开关中,通关它的开关事件来控制菜单的打开和关闭,同样,一个菜单需要注册一个事件,两个菜单,也是把菜单加到这个ActionBarDrawerToggle 中进行管理。它会自行处理左右两个菜单的打开和关闭,而不会出现同时打开的现象,这一点这个控件设计的还是挺棒的。

余下的工作,就是大家根据自己的需要,自己写左右菜单里面的内容和事件了。另外,以前看到一个帖子说,在DrawerLayout中使用listview,listview会无效,这个说法好像是不成立的,至少,在我们的项目中,菜单中添加listview或者其他常用控件,点击事件都不会受到影响。

相关的代码我添加在了附件中,感兴趣的朋友,可以下载互相学习一下。

附件:http://down.51cto.com/data/2364744