Android抽屉式导航

版权声明：本作品采用知识共享署名-相同方式共享 4.0 国际许可协议进行许可。
转载或引用前请注明来自踏雪cc 侵权必究。

Android抽屉式导航，也就是侧滑菜单，大家对这种设计一定都不陌生了，现在很多应用使用了抽屉式导航，最常见的就是QQ。
本文通过一个示例来演示怎么使用Google支持库提供的DrawerLayout实现抽屉式导航。对什么时候该使用这种设计给出一些建议。

• 在谷歌推出DrawerLayout之前，经常使用的是SlidingMenu来实现侧滑。
• Google I/O 2013在Android Support Library添加了DrawerLayout，实现侧滑菜单效果，支持向下兼容
• API文档
  https://developer.android.google.cn/training/implementing-navigation/nav-drawer.html
• 设计指南
  https://material.google.com/patterns/navigation-drawer.html

示例

gradle配置：

dependencies {
    compile 'com.android.support:appcompat-v7:25.0.0'
}

布局

抽屉式导航栏，包含两部分视图，一部分用来显示屏幕主内容，一部分显示导航栏，导航栏可以是列表，也可以是其它的组件。
创建activity_drawer.xml，把DrawerLayout作为布局的根视图，content_frame为屏幕主内容（运行时以Fragment填充），left_drawer为左侧导航栏。

<?xml version="1.0" encoding="utf-8"?>
<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" >
    
    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
    
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="@dimen/drawer_menu_width"
        android:layout_height="match_parent"
        android:layout_gravity="left"
        android:choiceMode="singleChoice"
        android:background="@android:color/white"/>

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

注意：

1. content_frame必须是第一个子视图，因为xml会对布局按层叠顺序排序。
2. left_drawer必须指定layout_gravity，如果不指定会有异常。
3. left_drawer的宽度不应该超过320dp，这样用户始终可以看到屏幕主内容部分。

填充左侧导航栏

drawer_list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<TextView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/textview"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?android:attr/activatedBackgroundIndicator"
    android:padding="16dp"
    android:textColor="#333333"
    android:textSize="16sp"
    tools:text="测试"/>

在arrays.xml定义字符串数组

<string-array name="drawer_menu">
        <item>@string/movie</item>
        <item>@string/music</item>
        <item>@string/book</item>
</string-array>

Activity里获取字符串数组，并使用ArrayAdapter填充

private String[] mTitles;
mTitles = getResources().getStringArray(R.array.drawer_menu);
        mDrawerList.setAdapter(new ArrayAdapter<String>(this, R.layout.activity_main_list_item, mTitles));
        mDrawerList.setOnItemClickListener(this);

OnItemClick里面用Fragment填充主内容部分

@Override
public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
        selectItem(position);
    }

    private void selectItem(int position){
        Fragment fragment = new DrawerFragment();
        Bundle args = new Bundle();
        args.putInt(DrawerFragment.DRAWER_NUMBER, position);
        fragment.setArguments(args);
        getFragmentManager().beginTransaction()
                .replace(R.id.content_frame, fragment, DrawerFragment.TAG)
                .commit();
        mDrawerList.setItemChecked(position, true);//选中的导航高亮显示
        setTitle(mTitles[position]);//设置标题
        mDrawerLayout.closeDrawer(mDrawerList);//关闭左侧导航栏
    }

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

主内容部分

DrawerFragment接收DrawerActivity传递过来的数据，显示对应的标题

public class DrawerFragment
        extends Fragment {
    public final static String DRAWER_NUMBER = "number";
    public final static String TAG = "DrawerFragment";

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_drawer_content, container, false);
        int i = getArguments().getInt(DRAWER_NUMBER);
        String str = getResources().getStringArray(R.array.drawer_menu)[i];
        TextView textView = (TextView) view.findViewById(R.id.textview);
        textView.setText(str);
        return view;
    }
}

fragment_drawer_content.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/textview"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="@dimen/common_padding"
        android:textColor="@color/common_text_color"
        android:textSize="@dimen/common_text_size"
        tools:text="测试"/>

</LinearLayout>

这时候就已经实现了DrawerLayout的基本功能了，可以通过手势打开侧边栏，点击跳转到对应的内容页。

监听打开和关闭事件

要监听导航栏打开和关闭事件，需要在DrawerLayout上调用setDrawerListener()，并向其传递DrawerLayout.DrawerListener的实现。
如果使用了ActionBar，可以扩展ActionBarDrawerToggle类

private ActionBarDrawerToggle mDrawerToggle;
        
        mDrawerToggle=new ActionBarDrawerToggle(this,
                mDrawerLayout,
                R.drawable.ic_drawer,
                R.string.drawer_open,
                R.string.drawer_close){

            public void onDrawerClosed(View view){
                super.onDrawerClosed(view);
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu();
            }

            public void onDrawerOpened(View drawerView){
                super.onDrawerOpened(drawerView);
                getActionBar().setTitle(mTitle);
                invalidateOptionsMenu();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);

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

什么时候该用侧边栏？

虽然现在很多应用都使用了侧边栏的样式，但是并不是所有的场景都适合侧边栏局，需要根据具体场景来分析。用户体验设计师们：侧边抽屉式导航可能会降低你产品一半的用户参与度 这篇文章通过实际场景分析了什么情况该使用侧边栏，不想看的童鞋可以直接看下面的结论：

如果应用主要的功能和内容都在一个页面里面。只是一些用户设置和选项需要显示在其他页面里。处于让主页面看上去干净美观的目的可以把这些辅助功能放在侧边栏里。
而如果你的应用有不同的视图，且他们是平级的，需要用户同等地对待，侧边栏将会浪费掉大多数的用户对于侧边栏中入口的潜在参与度和交互程度。