Android 創(chuàng)建抽屜式導(dǎo)航(navigation drawer)

編寫(xiě):Lin-H - 原文: http://developer.android.com/training/implementing-navigation/nav-drawer.html

Navigation drawer是一個(gè)在屏幕左側(cè)邊緣顯示導(dǎo)航選項(xiàng)的面板。大部分時(shí)候是隱藏的，當(dāng)用戶(hù)從屏幕左側(cè)劃屏，或在top level模式的app中點(diǎn)擊action bar中的app圖標(biāo)時(shí)，才會(huì)顯示。

這節(jié)課敘述如何使用Support Library中的DrawerLayout API，來(lái)實(shí)現(xiàn)navigation drawer。

Navigation Drawer 設(shè)計(jì)：在你決定在你的app中使用Navigation Drawer之前，你應(yīng)該先理解在Navigation Drawer design guide中定義的使用情況和設(shè)計(jì)準(zhǔn)則。

創(chuàng)建一個(gè)Drawer Layout

要添加一個(gè)navigation drawer，在你的用戶(hù)界面layout中聲明一個(gè)用作root view(根視圖)的DrawerLayout對(duì)象。在DrawerLayout中為屏幕添加一個(gè)包含主要內(nèi)容的view(當(dāng)drawer隱藏時(shí)的主layout)，和其他一些包含navigation drawer內(nèi)容的view。

例如，下面的layout使用了有兩個(gè)子視圖(child view)的DrawerLayout:一個(gè)FrameLayout用來(lái)包含主要內(nèi)容(在運(yùn)行時(shí)被Fragment填入)，和一個(gè)navigation drawer使用的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">
    <!-- 包含主要內(nèi)容的 view -->
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
    <!-- navigation drawer(抽屜式導(dǎo)航) -->
    <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>

這個(gè)layout展示了一些layout的重要特點(diǎn):

• 主內(nèi)容view(上面的FrameLayout)，在DrawerLayout中必須是第一個(gè)子視圖，因?yàn)閄ML的順序代表著Z軸(垂直于手機(jī)屏幕)的順序，并且drawer必須在內(nèi)容的前端。

• 主內(nèi)容view被設(shè)置為匹配父視圖的寬和高，因?yàn)楫?dāng)navigation drawer隱藏時(shí)，主內(nèi)容表示整個(gè)UI部分。

• drawer視圖(ListView)必須使用android:layout_gravity屬性指定它的horizontal gravity。為了支持從右邊閱讀的語(yǔ)言(right-to-left(RTL) language)，指定它的值為"start"而不是"left"(當(dāng)layout是RTL時(shí)drawer在右邊顯示)。

• drawer視圖以dp為單位指定它的寬和高來(lái)匹配父視圖。drawer的寬度不能大于320dp，這樣用戶(hù)總能看到部分主內(nèi)容。

初始化Drawer List

在你的activity中，首先要做的事就是要初始化drawer的item列表。這要根據(jù)你的app內(nèi)容來(lái)處理，但是一個(gè)navigation drawer通常由一個(gè)ListView組成，所以列表應(yīng)該通過(guò)一個(gè)Adapter(例如ArrayAdapter或SimpleCursorAdapter)填入。

例如，如何使用一個(gè)字符串?dāng)?shù)組(string array)來(lái)初始化導(dǎo)航列表(navigation list):

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);

        // 為list view設(shè)置adapter
        mDrawerList.setAdapter(new ArrayAdapter<String>(this,
                R.layout.drawer_list_item, mPlanetTitles));
        // 為list設(shè)置click listener
        mDrawerList.setOnItemClickListener(new DrawerItemClickListener());

        ...
    }
}

這段代碼也調(diào)用了setOnItemClickListener()來(lái)接收navigation drawer列表的點(diǎn)擊事件。下一節(jié)會(huì)說(shuō)明如何實(shí)現(xiàn)這個(gè)接口，并且當(dāng)用戶(hù)選擇一個(gè)item時(shí)如何改變內(nèi)容視圖(content view)。

處理導(dǎo)航的點(diǎn)擊事件

當(dāng)用戶(hù)選擇drawer列表中的item，系統(tǒng)會(huì)調(diào)用在setOnItemClickListener()中所設(shè)置的OnItemClickListener的onItemClick()。

在onItemClick()方法中做什么，取決于你如何實(shí)現(xiàn)你的app結(jié)構(gòu)(app structure)。在下面的例子中，每選擇一個(gè)列表中的item，就插入一個(gè)不同的Fragment到主內(nèi)容視圖中(FrameLayout元素通過(guò)R.id.content_frameID辨識(shí)):

private class DrawerItemClickListener implements ListView.OnItemClickListener {
    @Override
    public void onItemClick(AdapterView parent, View view, int position, long id) {
        selectItem(position);
    }
}

/** 在主內(nèi)容視圖中交換fragment */
private void selectItem(int position) {
    // 創(chuàng)建一個(gè)新的fragment并且根據(jù)行星的位置來(lái)顯示
    Fragment fragment = new PlanetFragment();
    Bundle args = new Bundle();
    args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
    fragment.setArguments(args);

    // 通過(guò)替換已存在的fragment來(lái)插入新的fragment
    FragmentManager fragmentManager = getFragmentManager();
    fragmentManager.beginTransaction()
                   .replace(R.id.content_frame, fragment)
                   .commit();

    // 高亮被選擇的item, 更新標(biāo)題, 并關(guān)閉drawer
    mDrawerList.setItemChecked(position, true);
    setTitle(mPlanetTitles[position]);
    mDrawerLayout.closeDrawer(mDrawerList);
}

@Override
public void setTitle(CharSequence title) {
    mTitle = title;
    getActionBar().setTitle(mTitle);
}

監(jiān)聽(tīng)打開(kāi)和關(guān)閉事件

要監(jiān)聽(tīng)drawer的打開(kāi)和關(guān)閉事件，在你的DrawerLayout中調(diào)用setDrawerListener()，并傳入一個(gè)DrawerLayout.DrawerListener的實(shí)現(xiàn)。這個(gè)接口提供drawer事件的回調(diào)例如onDrawerOpened()和onDrawerClosed()。

但是，如果你的activity包含有action bar可以不用實(shí)現(xiàn)DrawerLayout.DrawerListener，你可以繼承ActionBarDrawerToggle來(lái)替代。ActionBarDrawerToggle實(shí)現(xiàn)了DrawerLayout.DrawerListener，所以你仍然可以重寫(xiě)這些回調(diào)。這么做也能使action bar圖標(biāo)和 navigation drawer的交互操作變得更容易(在下節(jié)詳述)。

如Navigation Drawer design guide中所述,當(dāng)drawer可見(jiàn)時(shí)，你應(yīng)該修改action bar的內(nèi)容，比如改變標(biāo)題和移除與主文字內(nèi)容相關(guān)的action item。下面的代碼向你說(shuō)明如何通過(guò)ActionBarDrawerToggle類(lèi)的實(shí)例，重寫(xiě)DrawerLayout.DrawerListener的回調(diào)方法來(lái)實(shí)現(xiàn)這個(gè)目的:

public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    private CharSequence mDrawerTitle;
    private CharSequence mTitle;
    ...

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

        mTitle = mDrawerTitle = getTitle();
        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

            /** 當(dāng)drawer處于完全關(guān)閉的狀態(tài)時(shí)調(diào)用 */
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // 創(chuàng)建對(duì)onPrepareOptionsMenu()的調(diào)用
            }

            /** 當(dāng)drawer處于完全打開(kāi)的狀態(tài)時(shí)調(diào)用 */
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // 創(chuàng)建對(duì)onPrepareOptionsMenu()的調(diào)用
            }
        };

        // 設(shè)置drawer觸發(fā)器為DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }

    /* 當(dāng)invalidateOptionsMenu()調(diào)用時(shí)調(diào)用 */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // 如果nav drawer是打開(kāi)的, 隱藏與內(nèi)容視圖相關(guān)聯(lián)的action items
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }
}

下一節(jié)會(huì)描述ActionBarDrawerToggle的構(gòu)造參數(shù)，和處理與action bar圖標(biāo)交互所需的其他步驟。

使用App圖標(biāo)來(lái)打開(kāi)和關(guān)閉

用戶(hù)可以在屏幕左側(cè)使用劃屏手勢(shì)來(lái)打開(kāi)和關(guān)閉navigation drawer，但是如果你使用action bar,你也應(yīng)該允許用戶(hù)通過(guò)點(diǎn)擊app圖標(biāo)來(lái)打開(kāi)或關(guān)閉。并且app圖標(biāo)也應(yīng)該使用一個(gè)特殊的圖標(biāo)來(lái)指明navigation drawer的存在。你可以通過(guò)使用上一節(jié)所說(shuō)的ActionBarDrawerToggle來(lái)實(shí)現(xiàn)所有的這些操作。

要使ActionBarDrawerToggle起作用，通過(guò)它的構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例，需要用到以下參數(shù):

• Activity用來(lái)容納drawer。

• DrawerLayout。

• 一個(gè)drawable資源用作drawer指示器。 標(biāo)準(zhǔn)的navigation drawer可以在Download the Action Bar Icon Pack獲的

• 一個(gè)字符串資源描述"打開(kāi)抽屜"操作(便于訪(fǎng)問(wèn))

• 一個(gè)字符串資源描述"關(guān)閉抽屜"操作(便于訪(fǎng)問(wèn))

那么，不論你是否創(chuàng)建了用作drawer監(jiān)聽(tīng)器的ActionBarDrawerToggle的子類(lèi)，你都需要在activity生命周期中的某些地方根據(jù)你的ActionBarDrawerToggle來(lái)調(diào)用。

public class MainActivity extends Activity {
    private DrawerLayout mDrawerLayout;
    private ActionBarDrawerToggle mDrawerToggle;
    ...

    public void onCreate(Bundle savedInstanceState) {
        ...

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mDrawerToggle = new ActionBarDrawerToggle(
                this,                  /* 承載 Activity */
                mDrawerLayout,         /* DrawerLayout 對(duì)象 */
                R.drawable.ic_drawer,  /* nav drawer 圖標(biāo)用來(lái)替換'Up'符號(hào) */
                R.string.drawer_open,  /* "打開(kāi) drawer" 描述 */
                R.string.drawer_close  /* "關(guān)閉 drawer" 描述 */
                ) {

            /** 當(dāng)drawer處于完全關(guān)閉的狀態(tài)時(shí)調(diào)用 */
            public void onDrawerClosed(View view) {
                super.onDrawerClosed(view);
                getActionBar().setTitle(mTitle);
            }

            /** 當(dāng)drawer處于完全打開(kāi)的狀態(tài)時(shí)調(diào)用 */
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getActionBar().setTitle(mDrawerTitle);
            }
        };

        // 設(shè)置drawer觸發(fā)器為DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);

        getActionBar().setDisplayHomeAsUpEnabled(true);
        getActionBar().setHomeButtonEnabled(true);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // 在onRestoreInstanceState發(fā)生后，同步觸發(fā)器狀態(tài).
        mDrawerToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mDrawerToggle.onConfigurationChanged(newConfig);
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // 將事件傳遞給ActionBarDrawerToggle, 如果返回true，表示app 圖標(biāo)點(diǎn)擊事件已經(jīng)被處理
        if (mDrawerToggle.onOptionsItemSelected(item)) {
          return true;
        }
        // 處理你的其他action bar items...

        return super.onOptionsItemSelected(item);
    }

    ...
}

一個(gè)完整的navigation drawer例子,可以在原文頁(yè)面頂端的sample下載