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 圖示後,就會出現開關側邊滑動選單的效果。