一、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 > </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会不间断进行全局重绘,所以如果动画多了就卡