一、SlidingMenu簡介

SlidingMenu是最常用的幾個開源項目之一.

GitHub上的開源項目Slidingmenu提供了最佳的實現：定制靈活、各種陰影和漸變以及動畫的滑動效果都不錯。不過這是一個開源庫，要把它作為library引入到你自己的工程裡，簡單配置一下就可以實現SlidingMenu的效果。

二、項目的導入

三、具體實現

你可以直接繼承app這個包中的SlidingActivity,SlidingFragmentActivity,SlidingListActivity等這幾個類去實現這個效果，或直接在項目中初始化SlidingMenu，並進行配置後使用。

1、項目中初始化SlidingMenu

 

 

        SlidingMenu menu = new SlidingMenu(this);
        menu.setMode(SlidingMenu.LEFT);
        menu.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
        menu.setShadowWidthRes(R.dimen.shadow_width);
        menu.setShadowDrawable(R.drawable.shadow);
        menu.setBehindOffsetRes(R.dimen.slidingmenu_offset);
        menu.setFadeDegree(0.35f);
        menu.attachToActivity(this, SlidingMenu.SLIDING_CONTENT);
	menu.setMenu(R.layout.menu);

其中可以在setMenu()前這樣實現：

 

View view = LayoutInflater.from(this).inflate(R.layout.menu, null);
menu.setMenu(view);

這樣就可以直接操作menu布局中的控件了。

 

2、SlidingFragmentActivity的實現

主類繼承SlidingFragmentActivity。 因為SlidingFragmentActivity裡面已集成了SlidingMenu，所以可以通過getSlidingMenu()可以獲取到一個SlidingMenu對象，然後像下面的代碼一樣設置常用的屬性就可以l

		// 設置存放側滑欄的容器的布局文件
		setBehindContentView(R.layout.menu);
		// 將側滑欄的fragment類填充到側滑欄的容器的布局文件中
		FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
		Fragment fragment = new MenuFragment();
		transaction.replace(R.id.menu_fragment, fragment);
		transaction.commit();
		
		SlidingMenu sm = getSlidingMenu();
		sm.setShadowWidth(0);
		sm.setShadowDrawable(R.drawable.shadow);
		// 設置側滑欄完全展開之後，距離另外一邊的距離，單位px，設置的越大，側滑欄的寬度越小
		sm.setBehindOffset(100);
		// 設置漸變的程度，范圍是0-1.0f,設置的越大，則在側滑欄剛劃出的時候，顏色就越暗。1.0f的時候，顏色為全黑
		sm.setFadeDegree(0.3f);
		// 設置觸摸模式，可以選擇全屏劃出，或者是邊緣劃出，或者是不可劃出
		sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
		//設置actionBar能否跟隨側滑欄移動，如果沒有，則可以去掉
		setSlidingActionBarEnabled(false);

 

3、雙側滑欄

我們可以通過下面的代碼實現雙側滑欄的效果：

		// 設置左邊的側滑欄
		getSlidingMenu().setMode(SlidingMenu.LEFT_RIGHT);
		getSlidingMenu().setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);
		setContentView(R.layout.content_frame);
		getSupportFragmentManager().beginTransaction()
				.replace(R.id.content_frame, new SampleListFragment()).commit();
		// 設置右邊的側滑欄
		getSlidingMenu().setSecondaryMenu(R.layout.menu_frame_two);
		getSlidingMenu().setSecondaryShadowDrawable(R.drawable.shadowright);
		getSupportFragmentManager().beginTransaction()
				.replace(R.id.menu_frame_two, new SampleListFragment())
				.commit();

4、設置觸摸模式

通過getSlidingMenu().setTouchModeAbove()可以設置側滑欄的觸摸模式，用下面3個常量值：
SlidingMenu.TOUCHMODE_FULLSCREEN 全屏幕模式，全屏滑動都可打開


SlidingMenu.TOUCHMODE_MARGIN 側邊模式，只在屏幕側邊滑動才能打開，中心滑動不能打開


SlidingMenu.TOUCHMODE_NONE 禁止觸摸模式，不能夠通過觸摸打開，只能夠通過SlidingMenu().toggle()打開或者是關閉

5、設置側滑欄顯示動畫

通過SlidingMenu.setbehindCanvasTransformer(CanvasTransformer）;方法可以設置側滑欄的顯示動畫，參數是一個CanvasTransformer對象。下面是幾個常見的動畫的設置：
折疊動畫：

new CanvasTransformer() {
			@Override
			public void transformCanvas(Canvas canvas, float percentOpen) {
				canvas.scale(percentOpen, 1, 0, 0);
			}			
		}

縮放動畫：

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);
			}
		

上升動畫：

private static Interpolator interp = new Interpolator() {
		@Override
		public float getInterpolation(float t) {
			t -= 1.0f;
			return t * t * t + 1.0f;
		}		
	};

new CanvasTransformer() {
			@Override
			public void transformCanvas(Canvas canvas, float percentOpen) {
				canvas.translate(0, canvas.getHeight()*(1-interp.getInterpolation(percentOpen)));
			}			
		}