Android官方終於支援 Navigation Drawer(隱藏式瀏覽選單)模式

標籤：

在2013 google IO當天，Android團的更新了Support庫，新版本（V13）的Support庫中新加入了幾個比較重要的功能。

    添加 DrawerLayout 控制項，支援建立  Navigation Drawer模式。可以設定從左邊划出菜單或者右邊，也可以左右菜單同時存在。
    添加 SlidingPaneLayout 控制項來支援各種螢幕上的摘要、詳情介面模式。比如 Gmail郵件清單和單個郵件詳情介面。當在手機上顯示的時候，郵件清單和詳情介面分別為兩個介面；當在平板上顯示的時候，則為一個介面。
    添加 ActionBarDrawerToggle 工具類，方便把 DrawerLayout 和 ActionBar 功能結合起來。

下面來介紹下如何使用 DrawerLayout 控制項來實現抽屜菜單
建立Drawer Layout

在需要抽屜菜單的介面，用DrawerLayout 作為介面根控制項。在DrawerLayout裡面第一個View為當前介面主內容；第二個和第三個View為抽屜菜單內容。如果當前介面只需要一個抽屜菜單，則第三個View可以省略。

下面的例子中DrawerLayout裡麵包含兩個View，第一個FrameLayout中是當前介面主要內容顯示地區；第二個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>

上面的代碼中有如下幾點需要注意：

    顯示介面主要內容的View (上面的 FrameLayout ) 必須為DrawerLayout的第一個子View， 原因在於 XML 布局檔案中的View順序為Android系統中的 z-ordering順序，而抽屜必須出現在內容之上。
    顯示介面內容的View寬度和高度設定為和父View一樣，原因在於當抽屜菜單不可見的時候，介面內容代表整個介面UI。
    抽屜菜單 (上面的 ListView) 必須使用android:layout_gravity屬性設定水平的 gravity值 .如果要支援 right-to-left (RTL，從右向左閱讀)語言 用 "start" 代替 "left" (當在 RTL語言運行時候，菜單出現在右側)。
    抽屜菜單的寬度為 dp 單位而高度和父View一樣。抽屜菜單的寬度應該不超過320dp，這樣使用者可以在菜單開啟的時候看到部分內容介面。

初始化抽屜菜單

在您的Activity中需要先初始化抽屜菜單內容，根據您的應用需要抽屜菜單的內容可能不是ListView。

在上面的樣本中，我們需要給菜單的ListView設定一個Adapter來提供資料。如下所示：

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

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

        mPlanetTitles = getResources().getStringArray(R.array.planets_array);
        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());

        ...
    }
}

上面的代碼調用了 setOnItemClickListener() 函數來接受菜單條目點擊事件。下面會介紹如何更加點擊菜單來顯示主介面內容。
處理菜單點擊事件

當使用者選擇菜單List中的條目時，系統會調用  OnItemClickListener的 onItemClick()函數。

根據您的應用需要onItemClick函數的實現方式可能不同。下面的樣本中，選擇菜單條目會在程式主介面中插入不同的 Fragment 。

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

/** Swaps fragments in the main content view */
private void selectItem(int position) {
    // Create a new fragment and specify the planet to show based on position
    Fragment fragment = new PlanetFragment();
    Bundle args = new Bundle();
    args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
    fragment.setArguments(args);

    // Insert the fragment by replacing any existing fragment
    FragmentManager fragmentManager = getFragmentManager();
    fragmentManager.beginTransaction()
                   .replace(R.id.content_frame, fragment)
                   .commit();

    // Highlight the selected item, update the title, and close the drawer
    mDrawer.setItemChecked(position, true);
    setTitle(mPlanetTitles[position]);
    mDrawerLayout.closeDrawer(mDrawer);
}

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

監聽菜單開啟關閉事件

如果需要監聽菜單開啟關閉事件，則需要調用 DrawerLayout類的 setDrawerListener() 函數，參數為 DrawerLayout.DrawerListener介面的實現。該介面提供了菜單開啟關閉等事件的回呼函數，例如 onDrawerOpened() 和onDrawerClosed().

如果您的Activity使用了 action bar，則您可以使用Support庫提供的 ActionBarDrawerToggle 類，該類實現了 DrawerLayout.DrawerListener介面，並且您還可以根據需要重寫相關的函數。該類實現了菜單和Action bar相關的操作。

根據在 Navigation Drawer 設計指南中的介紹，當菜單顯示的時候您應該根據情況隱藏ActionBar上的功能菜單並且修改ActionBar的標題。下面的代碼示範了如何重寫 ActionBarDrawerToggle 類的相關函數來實現該功能。

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

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
                invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }

    /* Called whenever we call invalidateOptionsMenu() */
    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        // If the nav drawer is open, hide action items related to the content view
        boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
        menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }
}

最後來介紹下  ActionBarDrawerToggle 類的功能。
應用表徵圖指示抽屜開關

使用者可以從螢幕邊緣滑動來開啟抽屜菜單，如果您使用了 action bar，應該讓使用者通過點擊應用表徵圖也可以開啟抽屜菜單。並且應用表徵圖也應該使用一個特殊的表徵圖來指示抽屜菜單。您可以使用 ActionBarDrawerToggle 類來實現這些功能。

要使用 ActionBarDrawerToggle ，先通過其建構函式來建立該對象，建構函式需要如下參數：

    顯示抽屜的 Activity 對象
     DrawerLayout 對象
    一個用來指示抽屜的 drawable資源
    一個用來描述開啟抽屜的文本 (用於支援可訪問性)。
    一個用來描述關閉抽屜的文本(用於支援可訪問性).

無論你是否繼承 ActionBarDrawerToggle 來實現抽屜監聽器，您都需要在Activity的生命週期函數中調用ActionBarDrawerToggle 的一些函數。

如下所示：

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, mDrawerLayout,
                R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {

            /** Called when a drawer has settled in a completely closed state. */
            public void onDrawerClosed(View view) {
                getActionBar().setTitle(mTitle);
            }

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                getActionBar().setTitle(mDrawerTitle);
            }
        };

        // Set the drawer toggle as the DrawerListener
        mDrawerLayout.setDrawerListener(mDrawerToggle);

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

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mDrawerToggle.syncState();
    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Pass the event to ActionBarDrawerToggle, if it returns
        // true, then it has handled the app icon touch event
        if (mDrawerToggle.onOptionsItemSelected(item)) {
 return true;
 }
        // Handle your other action bar items...

        return super.onOptionsItemSelected(item);
    }

    ...
}

猛擊我下載樣本項目代碼。

 

本文出自 雲在千峰，轉載時請註明出處及相應連結。

本文永久連結: http://blog.chengyunfeng.com/?p=493

Read more: http://blog.chengyunfeng.com/?p=493#ixzz3TTOWzcdO

Android官方終於支援 Navigation Drawer(隱藏式瀏覽選單)模式