官方侧滑菜单

创建侧滑菜单（navigation drawer）

navigation drawer是显示在屏幕左边的一种导航选项菜单，大多数时间它是隐藏的，使用的时候从屏幕的边缘划出。

这篇文章主要介绍怎么用support library中的DrawerLayout来实现一个侧滑菜单。

创建一个Drawer Layout

添加一个侧滑菜单，使用DrawerLayout作为layout的root view，在DrawerLayout内，添加两个view，一个是主界面显示的内容，一个是侧滑菜单中显示的内容。

如下布局：

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

上面的布局实例向我们展示了重要的布局属性：

• 主界面布局（上面Fragment）必须是DrawerLayout第一个子布局，因为xml规则暗示了其有z轴，并且侧滑菜单必须在主界面的上层。
• 主界面被设置为宽和高match父view，因为当侧滑菜单隐藏的时候，它要呈现整个界面的UI。
• 侧滑layout必须定义android:layout_gravity属性，属性值“start”定义了侧滑从右到左来展示。
• 侧滑菜单定义了他的宽为xxxdp,高match父view，宽要定的合理，保证用户能看到主界面的一部分。

初始化侧滑菜单中的列表（list）

怎样去定义list取决于app的内容，但是侧滑菜单中时常包含一个listview，所以list很多情况下被Adapter来填充（如ArrayAdapter或者SimpleCursorAdapter）.

如下代码所示：

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

        ...
    }
}

以上代码调用了setOnItemClickListener() 去接受点击事件，接下来我们来讲解怎么通过用户点击不同的item来改变content。

处理导航点击事件

当用户点击侧滑菜单中的一个item时，系统会调用OnItemClickListener中的onItemClick()方法。

至于应该在onItemClick()中做什么，应该视自己的app而定，例如，接下来的这个例子，当用户点击item的时候，就向主界面插入一个Fragment(FrameLayout的id为R.id.content_frame):

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
    mDrawerList.setItemChecked(position, true);
    setTitle(mPlanetTitles[position]);
    mDrawerLayout.closeDrawer(mDrawerList);
}

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

监听打开和关闭事件

监听侧滑菜单的打开和关闭事件，调用DrawerLayout的setDrawerListener()方法，并且传给他一个DrawerLayout.DrawerListener的实现类，这个接口提供了如onDrawerOpend()和onDrawerClosed()方法。

然而，除了实现DrawerLayout.DrawerListener接口之外，如果你的activity包含有actionbar，你也可以继承ActionBarDrawerToggle类，ActionBarDrawerToggle实现了DrawerLayout.DrawerListener，因此你仍然可以覆盖其中的回调方法，它的优点是能是action bar的icon和侧滑菜单更好的联系起来。

在actionbar和侧滑菜单都存在的时候，要注意更好的设计是，当侧滑菜单显示的时候，应该改变actionbar的内容，例如，去改变actionbar的title和移除action item来和main content联系起来，如以下代码：

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) {
                super.onDrawerClosed(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) {
                super.onDrawerOpened(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的构造参数并且使侧滑菜单和actionbar icon进行沟通。

用app icon打开和关闭侧滑菜单

用户可以用滑动的方式从一边划出侧滑菜单，但是如果activity中有actionbar的时候，也应该允许用户通过触摸action icon来打开或者关闭侧滑菜单，并且app bar也应该通过特殊的icon来表示侧滑菜单，实际上，你可以实现通过ActionBarDrawerToggle
来实现所有的功能。

让ActionBarDrawerToggle正常工作，需要用它的构造方法创建一个实例，构造方法中需要以下参数：

• 包含侧滑菜单的activity。
• DrawerLayout
• 一个表示侧滑菜单的图片。
• 一个描述打开动作的字符串。
• 一个描述关闭动作的字符串。

代码示例：

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,                  /* host Activity */
                mDrawerLayout,         /* DrawerLayout object */
                R.drawable.ic_drawer,  /* nav drawer icon to replace 'Up' caret */
                R.string.drawer_open,  /* "open drawer" description */
                R.string.drawer_close  /* "close drawer" description */
                ) {

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

            /** Called when a drawer has settled in a completely open state. */
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(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);
    }

    ...
}

原文地址和代码下载

翻译自android官方文档