<转>android-滑动菜单栏-开源项目SlidingMenu的搭建和使用

本文内容由http://blog.csdn.net/yangyu20121224/article/details/9255829 和http://blog.csdn.net/vipzjyno1/article/details/23614675共同组成

一、SlidingMenu简介

 

     相信大家对SlidingMenu都不陌生了，它是一种比较新的设置界面或配置界面的效果，在主界面左滑或者右滑出现设置界面效果，能方便的进行各种操作。很多优秀的应用都采用了这种界面方案，像facebook、人人网、everynote、Google+等等。如下图所示：

              

因为效果确实比较新颖，所以在很多的应用开发中去实现此效果，解决的办法也是不尽相同。诸多比较以后发

现，还是GitHub上的开源项目SlidingMenu提供了最佳的实现：定制灵活、各种阴影和渐变以及动画的滑动效果都很不错。不过这是一个开源库，而不是一个完整的项目，要把它作为libary引入到你自己的工程里，简单配置一下就可以实现SlidingMenu的效果。

二、SlidingMenu 导入工程项目中

slidingmenu_library下载地址

要想能够实现SlidingMenu的效果，首先必须要将它作为libary导入到你的工程，先看一下它的目录结构，如图：

这里面的代码我就不详细讲解了，主要是教大家怎么直接拿过来用，不过博主对代码进行了一些非常详细的注

释，有兴趣的同学可以好好学习研究一下。 

 

1、下载完毕之后，将此项目导入Eclipse开发环境中，然后执行如下几个步骤：

 

<1> 点击右键，点击“Import”按钮，弹出对话框选项；

<2> 选中“Existing Projects into Workspace”选项；

<3> 再单击“Browser”按钮后，弹出选项项目对话框，选中要导入的项目；

<4> 点击“Finish”完成。

 

2、导入项目之后，然后在新建一个Android项目，将slidingmenu_library导入新建的Android项目中，步骤如下：

<1> 右键点击新建的Android项目，然后点击最下方的“Properties”选项；

<2> 点击弹出对话框之后，在最左侧选择“Android”选项，然后再点击右下方的“Add”按钮；

<3> 点击后弹出对话框，选中之前导入的slidingmenu_library项目；

<4> 选中之后如图所示；

<5> 这就说明了导入库已经成功了，导入成功之后会在Android的引用包中出现一个slidingmenu_library.jar包；

注意：这里有个地方需要大家特别注意一下，在新建完Android项目之后，较新的Eclipse版本都会在Android目录下

生成一个libs的文件夹，里面会有一个android-support-v4.jar的jar包，这个jar一定要记得删掉，否则运行程序的时候

会出现异常，提示是找不到类的异常，博主在这个地方纠结了好长时间。最后发现出现异常的原因是因为在导入

slidingmenu_library类库的时候，这个类库里面本身就包含了android-support-v4.jar的jar包，所以运行的时候就会出

现异常，系统不知道去调用哪个路径的下的包，所以程序崩溃，提示找不到类。

三、 在你的项目中使用这个SlidingMenu

public SlidingMenu initSlidingMenu(Activity activity) {SlidingMenu localSlidingMenu = new SlidingMenu(activity);localSlidingMenu.setMode(SlidingMenu.LEFT_RIGHT);//设置左右滑菜单localSlidingMenu.setTouchModeAbove(SlidingMenu.LEFT);//设置要使菜单滑动，触碰屏幕的范围//localSlidingMenu.setTouchModeBehind(SlidingMenu.RIGHT);localSlidingMenu.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度localSlidingMenu.setShadowDrawable(R.drawable.shadow);//设置阴影图片localSlidingMenu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//设置划出时主页面显示的剩余宽度<span style="white-space:pre"></span>localSlidingMenu.setFadeEnabled(true);//设置滑动时菜单的是否渐变localSlidingMenu.setFadeDegree(0.35F);//设置滑动时的渐变程度localSlidingMenu.attachToActivity(activity, SlidingMenu.RIGHT);//使SlidingMenu附加在Activity右边//localSlidingMenu.setBehindWidthRes(R.dimen.left_drawer_avatar_size);//设置SlidingMenu菜单的宽度localSlidingMenu.setMenu(R.layout.left_drawer_fragment);//设置menu的布局文件localSlidingMenu.toggle();//动态判断自动关闭或开启SlidingMenulocalSlidingMenu.setOnOpenedListener(new SlidingMenu.OnOpenedListener() {public void onOpened() {}});return localSlidingMenu;}

四、SlidingMenu属性详解

配置设定方法中 setMode() 是常用属性有：

1）SlidingMenu.LEFT    左测菜单

2）SlidingMenu.RIGHT   右侧菜单

3）SlidingMenu.LEFT_RIGHT    左右2测菜单 

注意：如果是1）或则  2） 的话，menu界面只用setMenu()就可以设定了

   如果是3）的话，必须在加上setSecondaryMenu()这个方法

<span style="white-space:pre"></span>localSlidingMenu.setMenu(R.layout.left_drawer_fragment);//设置左测menu的布局文件localSlidingMenu.setSecondaryMenu(R.layout.profile_drawer_right);<span style="font-family: Helvetica, arial, freesans, clean, sans-serif;">//设置右测menu的布局文件</span>localSlidingMenu.setSecondaryShadowDrawable(R.drawable.shadowright);//设置右侧阴影文件

SlidingMenu 常用属性介绍:
menu.setMode(SlidingMenu.LEFT);//设置左滑菜单
menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//设置滑动的屏幕范围，该设置为全屏区域都可以滑动
menu.setShadowDrawable(R.drawable.shadow);//设置阴影图片
menu.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度
menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu划出时主页面显示的剩余宽度
menu.setBehindWidth(400);//设置SlidingMenu菜单的宽度
menu.setFadeDegree(0.35f);//SlidingMenu滑动时的渐变程度
menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);//使SlidingMenu附加在Activity上
menu.setMenu(R.layout.menu_layout);//设置menu的布局文件
menu.toggle();//动态判断自动关闭或开启SlidingMenu
menu.showMenu();//显示SlidingMenu
menu.showContent();//显示内容
menu.setOnOpenListener(onOpenListener);//监听slidingmenu打开
关于关闭menu有两个监听，简单的来说，对于menu close事件，一个是when,一个是after
menu.OnClosedListener(OnClosedListener);//监听slidingmenu关闭时事件
menu.OnClosedListener(OnClosedListener);//监听slidingmenu关闭后事件

左右都可以划出SlidingMenu菜单只需要设置
menu.setMode(SlidingMenu.LEFT_RIGHT);属性，然后设置右侧菜单的布局文件
menu.setSecondaryShadowDrawable(R.drawable.shadowright);//右侧菜单的阴影图片

设置SlidingMenu属性
sm = getSlidingMenu();
//如果只显示左侧菜单就是用LEFT,右侧就RIGHT，左右都支持就LEFT_RIGHT
sm.setMode(SlidingMenu.LEFT_RIGHT);//设置菜单滑动模式，菜单是出现在左侧还是右侧，还是左右两侧都有
sm.setShadowDrawable(R.drawable.shadow);//设置阴影的图片资源
sm.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度
//sm.setBehindWidth(200);//设置菜单的宽
sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);//SlidingMenu划出时主页面显示的剩余宽度
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//设置滑动的区域

支持右侧划出菜单:
//SlidingMenu可以同时支持划出左右两侧的菜单，互不冲突，而且动画优美，体验良好。
sm.setSecondaryMenu(R.layout.menu_frame2);//设置右侧菜单
sm.setSecondaryShadowDrawable(R.drawable.shadowright);//设置右侧菜单阴影的图片资源
//右侧SlidingMenu的Fragment
getSupportFragmentManager().beginTransaction().replace(R.id.menu_frame2, new SampleListFragment()).commit();

slidingMenu = getSlidingMenu();
//设置是左滑还是右滑，还是左右都可以滑
slidingMenu.setMode(SlidingMenu.LEFT_RIGHT);
//设置阴影宽度
slidingMenu.setShadowWidth(getWindowManager().getDefaultDisplay().getWidth() / 40);
//设置左菜单阴影图片
slidingMenu.setShadowDrawable(R.drawable.shadow);
//设置右菜单阴影图片
slidingMenu.setSecondaryShadowDrawable(R.drawable.right_shadow);
//设置菜单占屏幕的比例
slidingMenu.setBehindOffset(getWindowManager().getDefaultDisplay().getWidth() / 5);
//设置滑动时菜单的是否淡入淡出
slidingMenu.setFadeEnabled(true);
//设置淡入淡出的比例
slidingMenu.setFadeDegree(0.4f);
//设置滑动时拖拽效果
slidingMenu.setBehindScrollScale(0);
//设置要使菜单滑动，触碰屏幕的范围
slidingMenu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);

（以上加粗内容（属性）来自http://blog.csdn.net/caiwenfeng_for_23/article/details/23384775）

配置设定方法中setTouchModeAbove常用属性有：

1）SlidingMenu.LEFT    在左测进行拖动才会相应MENU的拖动效果

2）SlidingMenu.RIGHT  在右测进行拖动才会相应MENU的拖动效果

3）SlidingMenu.TOUCHMODE_FULLSCREEN    全屏可以拖动

配置设定方法中 attachToActivity(Activity activity, int slideStyle)中slideStyle常用属性有：

1）SlidingMenu.LEFT    

2）SlidingMenu.RIGHT   

3）SlidingMenu.ABOVE    

配置设定中以下方法的效果是一样的，可是实现方式不一样：

<span style="white-space:pre"></span>localSlidingMenu.setShadowWidthRes(R.dimen.shadow_width);//设置阴影图片的宽度localSlidingMenu.setShadowWidth(100);//设置阴影图片的宽度

第一个是从资源文件中获取 ，第二种是直接设定给它，注意，第二种设定的是像素，所以一般建议用第一种方式，其它有的方法结构一样也是类似，以此类推。

//这样便配置完成了SlidingMenu，之后你可以去调用以下方法实现SlidingMenu的动作效果：

//1）localSlidingMenu.showContent();  //隐藏Menu菜单

//2）localSlidingMenu.showMenu();  //显示Menu菜单

//3）localSlidingMenu.showSecondaryMenu();  //显示Menu第2个菜单
//4）localSlidingMenu.setOnOpenListener(OnOpenListener listener);  设置Menu菜单的打开监听

//5）localSlidingMenu.setOnCloseListener(OnCloseListener listener);  设置Menu菜单的关闭时候的监听（when）

//6）localSlidingMenu.setOnClosedListener(OnClosedListener listener);;  设置Menu菜单的关闭后的监听（after ,和 //方法4是有区别的）
和一些判断：

1）Boolean 类型：localSlidingMenu.isMenuShowing(); 判断menu菜单是否是显示的，显示的话返回true，反之false。
   localSlidingMenu.isSecondaryMenuShowing(); 判断menu的第2个菜单是否是显示的，显示的话返回true，反之false。

上面的流程设定的menu是通过设定layout给定的布局文件，而有的人喜欢把侧拉菜单使用块Fragment去管理，那么可以继承架包中的SlidingFragmentActivity方法去实现。

下面是我找到的一个相关帖子，我这里就不做总结了，里面有怎么去用Fragment实现menu.点我

上面讲好了用代码的方式去实现menu侧拉菜单，下面说说如何在布局xml文件中实现类似的效果。

其实就是把SlidingMenu作为一个view，在布局文件中配置实现。

<com.jeremyfeinstein.slidingmenu.lib.SlidingMenu    xmlns:sliding="http://schemas.android.com/apk/res-auto"    android:id="@+id/slidingmenulayout"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    sliding:viewAbove="@layout/YOUR_ABOVE_VIEW"    sliding:viewBehind="@layout/YOUR_BEHIND_BEHIND"    sliding:touchModeAbove="margin|fullscreen"    sliding:behindOffset="@dimen/YOUR_OFFSET"    sliding:behindWidth="@dimen/YOUR_WIDTH"    sliding:behindScrollScale="@dimen/YOUR_SCALE"    sliding:shadowDrawable="@drawable/YOUR_SHADOW"    sliding:shadowWidth="@dimen/YOUR_SHADOW_WIDTH"    sliding:fadeEnabled="true|false"    sliding:fadeDegree="float"    sliding:selectorEnabled="true|false"    sliding:selectorDrawable="@drawable/YOUR_SELECTOR"/>

类似于这样，它的相关属性配置和代码是一样的，只是换成了布局中设定相关属性而已。

使用过程中发现的问题：

1）设置了这个属性后localSlidingMenu.setTouchModeBehind(SlidingMenu.RIGHT);

会发生测拉菜单按钮等的焦点被夺走或失效，所以这个属性最好不好设了。

2）关于SlidingMenu的引发的原生动画不流畅的问题

slidingmenu会不间断进行全局重绘，所以如果动画多了就卡