Skip to main content

Android 側邊滑動選單效果 (Side Menu Drawer)

· 3 min read

幾周前在 GTUG Taipei 活動，聽了 David Wu 分享的 "A Deep Dive into Android Open Source Project" 演講，回來後對 Slide Menu 效果很感興趣，也在gPaper 改版時使用到這個技巧。

後來我選擇使用的是 Simple Side Drawer 這個 Library https://github.com/adamrocker/simple-side-drawer

Simple Side Drawer 的好處是只要把它提供的 jar 檔放到專案中，就可以搭配如ActionBarSherlock等函式庫一起使用。

使用 Simple Side Drawer​

使用時首先是下載 jar 檔放進專案的 lib 目錄中並匯入。

接著需要在 onCreate 中初始化: 

> protected void onCreate (Bundle data) {
>    ....
> 
>       mSlidingMenu = new SimpleSideDrawer(this);
>       mSlidingMenu.setBehindContentView(R.layout.behind_menu);`</pre><pre>`&nbsp;`</pre><pre>`}`</pre><pre>`之後在程式裡的任何地方，都可以透過呼叫:`</pre><pre>`&nbsp;`</pre>> <pre>`<code>mSlidingMenu.toggleDrawer();`&nbsp;</code></pre><pre>`

來控制側邊欄的開關。下面以常見的點選 App 圖示來控制側邊滑動選單做例子，來介紹側邊滑動選單可以如何整合到 App 中。

透過點選App圖示控制側邊滑動選單​

將 Side Menu Drawer 設定好之後，並不會有按了 App 圖示就開啟側邊選單的效果，需要一些程式碼來控制。

在程式中的 onCreate 或 onResume 裡加入控制碼，強制顯示 App 圖示旁的小箭頭，作為側邊滑動選單的視覺參照，讓使用者注意到 App 圖示點選了還有功能：

ActionBar actionBar = this.getSupportActionBar(); actionBar.setDisplayHomeAsUpEnabled(true);

在 onOptionsItemSelected 的判斷裡，加入點選 App 圖示時的動作：

case android.R.id.home:     mSlidingMenu.toggleDrawer();     return true;

這樣點選 App 圖示後，就會出現開關側邊滑動選單的效果。