Android SlidingMenu 使用详解

SlidingMenu简介:

SlidingMenu的是一种新的设置界面或设备界面结果，在主界面左滑或者右滑呈现设置界面，能便利的进行各类操纵.现在有大量的应用都在使用这一开源组件。如Evernote、Google+、Foursquare等，国内的豌豆夹，人人，360助手等。

 

github地址：https://github.com/jfeinstein10/SlidingMenu
重视： SlidingMenu依附于另一个开源项目ActionBarSherlock，所以须要将ActionBarSherlock添加作为SlidingMenu的库，不然会报资料找不到错误。
然后再将SlidingMenu添加到本身的中去。

ActionBarSherlock 地址：https://github.com/JakeWharton/ActionBarSherlock

 

SlidingMenu集成常见错误:

Jar mismatch! Fix your dependencies ：引用的和自身以来的jar包版本不一致导致的冲突。确保SlidingMenu和ActionBarSherLock所应用的jar包版本一致

若是应用到ActionBarSherLock的相干api，可能报找不到getSupportActionBar等ActionBarSherLock的办法。原因是应用ActionBarSherLock的Activity需继承于SherlockActivity，修改SlidingMenu library中的SlidingFragmentActivity，让它继承于SherlockFragmentActivity，从头编译library导入。

我修改错误编译好的下载地址：http://download.csdn.net/detail/caiwenfeng_for_23/7548019

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）;//右侧菜单的暗影

应用Fragment实现SlidingMenu:

1.首先Activity继承自SlidingMenu包下的SlidingFragmentActivity
2. setContentView（R.layout.content_frame）;//该layout为一个全屏的FrameLayout
3. setBehindContentView（R.layout.menu_frame）;//设置SlidingMenu应用的布局，同样是一个全屏的FrameLayout
4.设置SlidingMenu左侧菜单的Fragment

        setBehindContentView（R.layout.menu_frame）;

        FragmentTransaction t = this.getSupportFragmentManager（）.beginTransaction（）;

        leftMenuFragment = new MenuFragment（）;

        t.replace（R.id.menu_frame， leftMenuFragment）;

        t.commit（）;

 

MenuFragment其实就是一个Fragment，显示一个ListView
然后点击ListView的每一项时，通知Activity切换不同的Fragment
为了看清结果，我们新建5个Frament，分别是
Fragment1， Fragment2， Fragment3， Fragment4， Fragment5
在SlidingMenu顶用ListView显示。

设置主页面显示的Fragment:

if （savedInstanceState == null） {//== null的时辰新建Fragment1

contentFragment = new Fragment1（）;

} else {//不是null，直接get出来

//不是null，找出之前保存的当前Activity显示的Fragment

contentFragment = getSupportFragmentManager（）.getFragment（savedInstanceState， "contentFragment"）;

}

//设置内容Fragment

getSupportFragmentManager（）

.beginTransaction（）

.replace（R.id.content_frame， contentFragment）

.commit（）;

在Activity的onSaveInstanceState中保存当前显示的Fragment
getSupportFragmentManager（）.putFragment（outState， "contentFragment"， contentFragment）;

设置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）;//设置滑动的区域

LEFT_RIGHT下设置右侧划出菜单:
//SlidingMenu可以同时支撑划出阁下两侧的菜单，互不冲突，并且动画精美，体验杰出。
sm.setSecondaryMenu（R.layout.menu_frame2）;//设置右侧菜单
sm.setSecondaryShadowDrawable（R.drawable.shadowright）;//设置右侧菜单暗影的资料
//右侧SlidingMenu的Fragment
 getSupportFragmentManager（）.beginTransaction（）.replace（R.id.menu_frame2， new SampleListFragment（））.commit（）;

 

设置ActionBar可以被点击:
getSupportActionBar（）.setHomeButtonEnabled（true）;//actionbar主按键可以被点击
getSupportActionBar（）.setDisplayHomeAsUpEnabled（true）;//显示向左的图标
setSlidingActionBarEnabled（false）;//阁下两侧slidingmenu的fragment是否显示题目栏

切换主页面显示的Fragment:
public void switchContent（Fragment f） {
//给内容Fragment赋值，并在onSaveInstanceState时保存这个Fragment
contentFragment = f;
FragmentTransaction  t = getSupportFragmentManager（）.beginTransaction（）;
t.replace（R.id.content_frame， f）;
t.commit（）;
sm.showContent（）;



应用通俗Activity实现SlidingMenu:

slidingMenu menu = new SlidingMenu（this）;//直接new，而不是getSlidingMenu

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）;

menu.setBehindWidth（400）;//设置SlidingMenu菜单的宽度

menu.setFadeDegree（0.35f）;

menu.attachToActivity（this， SlidingMenu.SLIDING_CONTENT）;//必须调用

menu.setMenu（R.layout.menu_layout_left）;//就是通俗的layout布局

menu.setBehindCanvasTransformer（mTransformer）;

响应SlidingMenu里的点击事务，因为SlidingMenu已经被包含在了Activity中了，所以直接findViewById（id），拿到view之后就可以进行响应的处理。

支撑两侧都能划出菜单
menu.setSecondaryMenu（R.layout.menu_layout_right）;
menu.setSecondaryShadowDrawable（R.drawable.shadowright）;

右侧菜单一样直接findViewById（id），拿到view之后就可以随便处理了

 

调换SlidingMenu的动画

SlidingMenu支撑左滑或者右滑时定义不同的动画，包含拉伸，缩放，扭转等动画。就是在滑动的过程中，SlidingMenu如何呈现的动画。
动画应用也很简单
首先定义CanvasTransformer mTransformer;变量:

mTransformer = new CanvasTransformer（） {

＠Override

public void transformCanvas（Canvas canvas， float percentOpen） {

float scale = （float） （percentOpen*0.25 + 0.75）;

canvas.scale（scale， scale， canvas.getWidth（）/2， canvas.getHeight（）/2）;

}

};

然后将mTransformer对象设置给SlidingMenu即可，这个是缩放动画:

private void initSlidUpCanvasTransformer（） {

mTransformer = new CanvasTransformer（） {



＠Override

public void transformCanvas（Canvas canvas， float percentOpen） {

canvas.translate（0， canvas.getHeight（）*（1-interp.getInterpolation（percentOpen）））;

}

};

}



private static Interpolator interp = new Interpolator（） {

＠Override

public float getInterpolation（float t） {

t -= 1.0f;

return t * t * t + 1.0f;

}

};

 

拉伸动画:

mTransformer = new CanvasTransformer（） {

＠Override

public void transformCanvas（Canvas canvas， float percentOpen） {

canvas.scale（percentOpen， 1， 0， 0）;

}

}）;

简单记下属性。
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);