Android開源項目SlidingMenu深切解析

原文地址：http://www.byywee.com/page/M0/S912/912002.html

SlidingMenu簡介:

SlidingMenu的是一種鬥勁新的設置界面或設備界面結果，在主界面左滑或者右滑呈現設置界面，能便利的進行各種操縱.今朝有多量的應用都在應用這一結果。如Evernote、Google+、Foursquare等，國內的豌豆夾，人人，360助手等都應用SlidingMenu的界面規劃。

 

項面前目今載地址：https://github.com/jfeinstein10/SlidingMenu
重視： SlidingMenu依附於另外一個開源項目ActionBarSherlock，因此需要將ActionBarSherlock添加做爲SlidingMenu的庫，否則會報資料找不到錯誤。
而後再將SlidingMenu添加到自己的中去。

 

SlidingMenu集成常見錯誤:

Jar mismatch! Fix your dependencies ：引用的和自身以來的jar包版本不一致致使的衝突。確保SlidingMenu和ActionBarSherLock所應用的jar包版本一致

如果應用到ActionBarSherLock的相干api，可能報找不到getSupportActionBar等ActionBarSherLock的辦法。緣由是應用ActionBarSherLock的Activity需持續於SherlockActivity，批改SlidingMenu library中的SlidingFragmentActivity，讓它持續於SherlockFragmentActivity，從頭編譯library導入。

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）;//設置滑動的區域

 

支撐右側劃出菜單:
//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）;

}

}）;