Navigation Drawer简记

一段时间没有接触Android开发,发现多了不少东西。比如这里的navigation drawer,现在已经有官方support library支持了。

现在来了解下怎么开发。

Drawer Layout

要想添加一个navigation drawer,需要在UI布局中将根视图声明为drawer layout。

<!-- A DrawerLayout is intended to be used as the top-level content view using match_parent for both width and height to consume the full space available. -->
<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="nerd_is.in.number_converter.MainActivity">

    <!-- As the main content view, the view below consumes the entire
         space available using match_parent in both dimensions. -->
    <FrameLayout
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- android:layout_gravity="start" tells DrawerLayout to treat
         this as a sliding drawer on the left side for left-to-right
         languages and on the right side for right-to-left languages.
         If you're not building against API 17 or higher, use
         android:layout_gravity="left" instead. -->
    <!-- The drawer is given a fixed width in dp and extends the full height of
         the container. -->
    <fragment android:id="@+id/navigation_drawer"
        android:layout_width="@dimen/navigation_drawer_width"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:name="nerd_is.in.number_converter.NavigationDrawerFragment" />

</android.support.v4.widget.DrawerLayout>

在drawer layout中,有两个子视图。

其中,这个Activity的主视图需要出现在drawer视图的上方。因为XML布局中视图的出现顺序与视图在z轴上的顺序有关(也就是说如果是drawer在XML布局文件上方的话,会没法遮挡住主视图)。

Drawer的view需要指定layout_gravity的值为"start"。这是为了照顾一些从从右往左阅读的语言。

Drawer view的宽度不能超过320dp,以免滑出drawer后在主视图完全消失不见。

初始化Drawer View

因为这里的例子是将一个fragment作为Drawer,所以只需要在fragment中对drawer进行需要的设置就行了。

在fragment的onCreateView()中加载view,设置事件响应等。

public View onCreateView(LayoutInflater inflater, ViewGroup container,
        Bundle savedInstanceState) {
    mDrawerListView = (ListView) inflater.inflate(
            R.layout.fragment_navigation_drawer, container, false);
    mDrawerListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
        @Override
        public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
            selectItem(position);
        }
    });
    mDrawerListView.setAdapter(new ArrayAdapter<String>(
            getActionBar().getThemedContext(),
            android.R.layout.simple_list_item_1,
            android.R.id.text1,
            new String[]{
                    getString(R.string.title_section1),
                    getString(R.string.title_section2),
                    getString(R.string.title_section3),
            }));
    mDrawerListView.setItemChecked(mCurrentSelectedPosition, true);
    return mDrawerListView;
}

监听Drawer的开闭事件

与其他的事件监听一致,只需要在DrawerLayout上setDrawerListener()就可以。

这个事件可以用来重新设置菜单,因为有时候drawer打开和关闭情况下可用的菜单项是不一样的。

@Override
public void onDrawerClosed(View drawerView) {
    super.onDrawerClosed(drawerView);
    if (!isAdded()) {
        return;
    }

    getActivity().supportInvalidateOptionsMenu(); // calls onPrepareOptionsMenu()
}

当Activity中有action bar时, setDrawerListener()中可以使用ActionBarDrawerToggle类来代替DrawerListener。这样一来action bar上的图标会对drawer的状态进行正确的响应。

03-05 16:58