一、SlidingMenu简介

 

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

Android 点击和滑动事件 android滑动菜单_Android 点击和滑动事件

              

Android 点击和滑动事件 android滑动菜单_Android_02

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

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




二、SlidingMenu 导入工程项目中

slidingmenu_library下载地址

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

Android 点击和滑动事件 android滑动菜单_布局文件_03

Android 点击和滑动事件 android滑动菜单_Android 点击和滑动事件_04

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

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

 

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

 

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




Android 点击和滑动事件 android滑动菜单_布局文件_05



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


Android 点击和滑动事件 android滑动菜单_Android_06

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

Android 点击和滑动事件 android滑动菜单_Android_07

<4> 点击“Finish”完成。

 

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

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


Android 点击和滑动事件 android滑动菜单_Android 点击和滑动事件_08


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

Android 点击和滑动事件 android滑动菜单_Android_09

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

Android 点击和滑动事件 android滑动菜单_Android 点击和滑动事件_10

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

Android 点击和滑动事件 android滑动菜单_Android_11

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

Android 点击和滑动事件 android滑动菜单_布局文件_12

注意:这里有个地方需要大家特别注意一下,在新建完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 >	</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();//动态判断自动关闭或开启SlidingMenu
		localSlidingMenu.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()就可以设定了




<span >		</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);

(以上加粗内容(属性)来自

配置设定方法中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 >	</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会不间断进行全局重绘,所以如果动画多了就卡