Android開發—Navigation Drawer(側邊欄菜單實現)

習來源：Navigation Draw描述： http://developer.android.com/design/patterns/navigation-drawer.html

                     如何創建一個Navigation Drawer： http://developer.android.com/training/implementing-navigation/nav-drawer.html

第一次翻譯，只能是大概，很多都是自己的話，內容也不多，，.如果有錯請指正，謝謝了。

首先，這個控件是現在比較主流的，在很多app上都可以看到，左側滑出主菜單，既節省空間，又方便，而且炫酷。關於上面那篇描述可以仔細去閱讀一下（我還沒來得及仔細看。。。）

下面開始翻譯：

========================================

Navigation drawer在屏幕的左側，控件主要包含了app的主菜單功能，不過一般情況下是隱藏的，通過手勢（左側邊緣向右滑動），或者點擊最上面應用程序圖標，即可顯示該控件。

下面主要描述瞭如何利用DrawerLayout api來實現這個控件。

1， 創建一個Drawer Layout

首先，在你的layout中，需要申明一個DrawerLayout作爲最外部的layout，而這個layout裏面包含了一個屏幕的主視圖（當控件隱藏時的layout顯示）和另外一個視圖（基本是listview），包含了主菜單的按鈕。

下面舉個例子：

<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">
    <!-- The main content view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- The navigation drawer -->
    <ListView android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:choiceMode="singleChoice"
        android:divider="@android:color/transparent"
        android:dividerHeight="0dp"
        android:background="#111"/>
</android.support.v4.widget.DrawerLayout>

這裏面的DrawerLayout包含了兩個子控件：一個FrameLayout和一個ListView，這個listview就是包含主菜單按鈕的。。

其中有幾點比較重要的屬性：

* 主視圖（上述的FrameLayout）一定要是DrawerLayout的第一個子控件；並且最外層的控件一定要是DrawerLayout；

* 主視圖的寬和高都設置爲match_parent，因爲Navigation drawer是隱藏的；

* 其中Navigation drawer 必須申明他的layout_gravity屬性，爲了支持從右向左滑動也可以出現的情況

（原文是：To support right-to-left (RTL) languages, specify the value with "start" instead of "left" (so the drawer appears on the right when the layout is RTL).

* drawer視圖，上述的listview，需要申明dp爲單位的實際寬度，最好也不要超過屏幕本身的寬度。這樣不至於遮擋主視圖。

2， 初始化Drawer List

即初始化主菜單的內容，在你的activity中，第一件事就是要做初始化navigation drawer list中的按鈕內容。在這邊我們一般都是ListView，所以我們需要用一個Adapter（arrayadapter或者simpleCursoradapter）來實現list中內容的顯示。

下面代碼是用了一個String array來初始化的：

public class MainActivity extends Activity {
    private String[] mPlanetTitles;
    private DrawerLayout mDrawerLayout;
    private ListView mDrawerList;
    ...

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mPlanetTitles = getResources().getStringArray(R.array.planets_array);
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerList = (ListView) findViewById(R.id.left_drawer);

        // Set the adapter for the list view
        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                R.layout.drawer_list_item, mPlanetTitles));
        // Set the list's click listener
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

        ...
    }
}

接下來的事情就是實現DrawerItemClickListener（），來響應按鈕事件。我會在下一篇博客中實現這個功能。

還是應該制定以下計劃：這個星期的目標實現界面的調整，和拍照功能，以及拍照後照片存儲等，希望在週日能完成。

下面是一張目前的實現圖：

=======================

2014-12-14補充：

之前忘了一個步驟，就是標題的點擊事件，以及標題中圖片的設置等操作，需要通過如下代碼實現：

<strong style="font-size:18px;"> </strong><span style="font-size:12px;">mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer image to replace 'Up' caret */
                R.string.drawer_open,  /* "open drawer" description for accessibility */
                R.string.drawer_close /* "close drawer" description for accessibility */
                ) {
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
</span>

其中mDrawerToggle是一個ActionBarDrawerToggle對象。

測試後好像還是不能點擊標題，遺留這樣的一個問題。