單元四 隱藏的選單 --- DrawerNavigation

什麼是 DrawerNavigation ? 用 Youtube App 的一張圖來讓大家瞭解.

當你按左上方的 App icon 時, 或者是向左拖拉畫面時,
影藏於左側的選單會跑出來, 這便是所謂的 DrawerNavigation 了.

Android 在 android.supprot.v4 的 SDK 裡提供了 DrawerLayout 以及 ActionBarDrawerToggle,
使得 DrawerNavigation 的製作上有了比較標準的格式.

drawer_layout 畫面

在畫面實作上, 我們用 DrawerLayout 包住主畫面以及左側邊欄畫面,
左側邊欄畫面的 layout_gravity = "left", 這樣 DrawerLayout 就知道它是左側欄了!

drawer_layout.xml

 <android.support.v4.widget.DrawerLayout  
   xmlns:android="http://schemas.android.com/apk/res/android"  
   android:id="@+id/drawer_layout"  
   android:layout_width="match_parent"  
   android:layout_height="match_parent">  
   <ScrollView  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:paddingLeft="16dp"  
     android:paddingRight="16dp"  
     android:scrollbarStyle="outsideOverlay">  
     <TextView android:id="@+id/content_text"  
          android:layout_width="match_parent"  
          android:layout_height="match_parent"  
          android:text="@string/drawer_layout_summary"  
          android:textAppearance="?android:attr/textAppearanceMedium"/>  
   </ScrollView>  
   <ListView android:id="@+id/left_drawer"  
        android:layout_width="200dp"  
        android:layout_height="match_parent"  
        android:layout_gravity="left"  
        android:background="#ff333333"/>  
 </android.support.v4.widget.DrawerLayout>  

DrawerLayoutActivity 主程式

在程式中調用 DrawerLayout, 須讓 drawer (左側欄) 的出現與 ActionBar 的顯示一致,
因此我們用 ActionBarDrawerToggle 讓 action bar 跟 DrawerLayout 連結在一起,
同時撰寫 DrawerListener 來處理 drawer 的狀態.

另外, 左側欄是一個 ListView, 依照 ListView 的模式處理即可.

DrawerLayoutActivity.class

 @SuppressLint("NewApi")  
 public class DrawerLayoutActivity extends Activity {  
   private DrawerLayout mDrawerLayout;  
   private ListView mDrawer;  
   private TextView mContent;  
   private ActionBarHelper mActionBar;  
   private ActionBarDrawerToggle mDrawerToggle;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
     setContentView(R.layout.drawer_layout);  
     mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);  
     mDrawer = (ListView) findViewById(R.id.left_drawer);  
     mContent = (TextView) findViewById(R.id.content_text);  
     mDrawerLayout.setDrawerListener(new DemoDrawerListener());  
     mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);  
     mDrawer.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1,  
         Shakespeare.TITLES));  
     mDrawer.setOnItemClickListener(new DrawerItemClickListener());  
     mActionBar = createActionBarHelper();  
     mActionBar.init();  
     mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,  
         R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close);  
   }  
   private class DrawerItemClickListener implements ListView.OnItemClickListener {  
     @Override  
     public void onItemClick(AdapterView<?> parent, View view, int position, long id) {  
       mContent.setText(Shakespeare.DIALOGUE[position]);  
       mActionBar.setTitle(Shakespeare.TITLES[position]);  
       mDrawerLayout.closeDrawer(mDrawer);  
     }  
   }  
   private class DemoDrawerListener implements DrawerLayout.DrawerListener {  
     @Override  
     public void onDrawerOpened(View drawerView) {  
       mDrawerToggle.onDrawerOpened(drawerView);  
       mActionBar.onDrawerOpened();  
     }  
     @Override  
     public void onDrawerClosed(View drawerView) {  
       mDrawerToggle.onDrawerClosed(drawerView);  
       mActionBar.onDrawerClosed();  
     }  
     @Override  
     public void onDrawerSlide(View drawerView, float slideOffset) {  
       mDrawerToggle.onDrawerSlide(drawerView, slideOffset);  
     }  
     @Override  
     public void onDrawerStateChanged(int newState) {  
       mDrawerToggle.onDrawerStateChanged(newState);  
     }  
   }  
   /**  
    * Create a compatible helper that will manipulate the action bar if available.  
    */  
   private ActionBarHelper createActionBarHelper() {  
     if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.ICE_CREAM_SANDWICH) {  
       return new ActionBarHelperICS();  
     } else {  
       return new ActionBarHelper();  
     }  
   }  
   private class ActionBarHelper {  
     public void init() {}  
     public void onDrawerClosed() {}  
     public void onDrawerOpened() {}  
     public void setTitle(CharSequence title) {}  
   }  
   private class ActionBarHelperICS extends ActionBarHelper {  
     private final ActionBar mActionBar;  
     private CharSequence mDrawerTitle;  
     private CharSequence mTitle;  
     ActionBarHelperICS() {  
       mActionBar = getActionBar();  
     }  
     @Override  
     public void init() {  
       mActionBar.setDisplayHomeAsUpEnabled(true);  
       mActionBar.setHomeButtonEnabled(true);  
       mTitle = mDrawerTitle = getTitle();  
     }  
     @Override  
     public void onDrawerClosed() {  
       super.onDrawerClosed();  
       mActionBar.setTitle(mTitle);  
     }  
     @Override  
     public void onDrawerOpened() {  
       super.onDrawerOpened();  
       mActionBar.setTitle(mDrawerTitle);  
     }  
     @Override  
     public void setTitle(CharSequence title) {  
       mTitle = title;  
     }  
   }  
   @Override  
   protected void onPostCreate(Bundle savedInstanceState) {  
     super.onPostCreate(savedInstanceState);  
     mDrawerToggle.syncState();  
   }  
   @Override  
   public boolean onOptionsItemSelected(MenuItem item) {  
     if (mDrawerToggle.onOptionsItemSelected(item)) {  
       return true;  
     }  
     return super.onOptionsItemSelected(item);  
   }  
   @Override  
   public void onConfigurationChanged(Configuration newConfig) {  
     super.onConfigurationChanged(newConfig);  
     mDrawerToggle.onConfigurationChanged(newConfig);  
   }  
 }  

範例圖片