[学习笔记]用户界面优化之Android侧滑菜单（DrawerLayout使用）

在DrawerLayout之前，是用SlidingMenu来实现的，
https://github.com/jfeinstein10/SlidingMenu
DrawerLayout是谷歌2013年官方发布的，包含在support.v4包下，可替代SlidingMenu实现侧滑菜单的功能。
查看开发者文档

一、创建抽屉布局
在AS上创建Project，
1）重写activity_main.xml
①layout_gravity为start时意为导航（抽屉菜单）从左向右滑出菜单，end为从右向左滑出菜单，不推荐使用left和right。
②choiceMode为单选模式
③dividerHeight可设置项与项之间的分隔条
④抽屉视图的宽度以dp为单位，尽量不要超过320dp，这是为了总能看到一些主内容视图

<android.support.v4.widget.DrawerLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/drawer_layout">

    <!--主要内容的视图The main content view-->
    <FrameLayout
        android:id="@+id/content_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </FrameLayout>

    <!--左侧导航(抽屉菜单）视图The navigation view-->
    <ListView
        android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="#66ffcc"
        android:choiceMode="singleChoice"
        android:dividerHeight="0dp">
    </ListView>

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

二、初始化导航列表
1）呈现菜单内容

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private DrawerLayout mDrawerLayout;
    private ListView mListView;
    private ArrayList<String> menuLists;//为ListView添加内容
    private ArrayAdapter<String> adapter;

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

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mListView = (ListView) findViewById(R.id.left_drawer);
        menuLists = new ArrayList<String>();//初始化
        for (int i=0; i<5; i++) {
            menuLists.add("王者荣耀" + i);
        }

        adapter = new ArrayAdapter<String>(this, R.layout.support_simple_spinner_dropdown_item, menuLists);//初始化
        mListView.setAdapter(adapter);
    }
}

2）给菜单内容设置监听事件
①MainActivity 实现接口OnItemClickListener
②动态插入一个Fragment到FragmentLayout当中。创建ContentFragment类和fragment_content.xml。
ContentFragment.java

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;


public class ContentFragment extends Fragment{
    private TextView textView;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_content, container, false);
        textView = (TextView) view.findViewById(R.id.textView);

        String text = getArguments().getString("text");
        textView.setText(text);

        return view;
    }
}

fragment_content.xml

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="25sp"/>

</LinearLayout>

修改后的MainActivity.java

import android.app.Fragment;
import android.app.FragmentManager;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener{
    private DrawerLayout mDrawerLayout;
    private ListView mListView;
    private ArrayList<String> menuLists;//为ListView添加内容
    private ArrayAdapter<String> adapter;

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

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mListView = (ListView) findViewById(R.id.left_drawer);
        menuLists = new ArrayList<String>();//初始化
        for (int i=0; i<5; i++) {
            menuLists.add("王者荣耀" + i);
        }

        adapter = new ArrayAdapter<String>(this, R.layout.support_simple_spinner_dropdown_item, menuLists);//初始化
        mListView.setAdapter(adapter);

        //设置监听事件
        mListView.setOnItemClickListener(this);
    }

    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
        //动态插入一个Fragment到FragmentLayout当中
        Fragment contentFragment = new ContentFragment();
        Bundle args = new Bundle();
        args.putString("text", menuLists.get(position));
        contentFragment.setArguments(args);

        FragmentManager fm = getFragmentManager();
        fm.beginTransaction().replace(R.id.content_layout, contentFragment).commit();

        mDrawerLayout.closeDrawer(mListView);
    }
}

三、监听抽屉的打开关闭事件
修改后的MainActivity.java

import android.app.Fragment;
import android.app.FragmentManager;
import android.content.Intent;
import android.content.res.Configuration;
import android.net.Uri;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity implements AdapterView.OnItemClickListener{
    private DrawerLayout mDrawerLayout;
    private ListView mListView;
    private ArrayList<String> menuLists;//为ListView添加内容
    private ArrayAdapter<String> adapter;
    private ActionBarDrawerToggle mDrawerToggle;
    private String sTitle = "请选择";
    private String mTitle;

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

        mTitle = (String) getTitle();

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        mListView = (ListView) findViewById(R.id.left_drawer);
        menuLists = new ArrayList<String>();//初始化
        for (int i=0; i<5; i++) {
            menuLists.add("王者荣耀" + i);
        }

        adapter = new ArrayAdapter<String>(this, R.layout.support_simple_spinner_dropdown_item, menuLists);//初始化
        mListView.setAdapter(adapter);

        //设置监听事件
        mListView.setOnItemClickListener(this);

        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
                R.string.drawer_open, R.string.drawer_close) {
            @Override
            public void onDrawerOpened(View drawerView) {
                super.onDrawerOpened(drawerView);
                getActionBar().setTitle(sTitle);//出现空指针
                invalidateOptionsMenu();
            }
            @Override
            public void onDrawerClosed(View drawerView) {
                super.onDrawerClosed(drawerView);
                getActionBar().setTitle(mTitle);//出现空指针
                invalidateOptionsMenu();
            }
        };
        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }

    @Override
    public boolean onPrepareOptionsMenu(Menu menu) {
        boolean isDrawerOpen = mDrawerLayout.isDrawerOpen(mListView);
        menu.findItem(R.id.action_webSearch).setVisible(!isDrawerOpen);
        return super.onPrepareOptionsMenu(menu);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        //将ActionBar上的图标与Drawer结合起来
        if (mDrawerToggle.onOptionsItemSelected(item)){
            return true;
        }
        switch (item.getItemId()) {
            case R.id.action_webSearch:
                Intent intent = new Intent();
                intent.setAction("android.intent.action.VIEW");
                Uri uri = Uri.parse("https://www.baidu.com");
                intent.setData(uri);
                startActivity(intent);
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        //需要将ActionDrawerToggle与DrawerLayout的状态同步
        //将ActionBarDrawerToggle中的drawer图标，设置为ActionBar中的Home-Button的Icon
        mDrawerToggle.syncState();
    }

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

    @Override
    public void onItemClick(AdapterView<?> adapterView, View view, int position, long l) {
        //动态插入一个Fragment到FragmentLayout当中
        Fragment contentFragment = new ContentFragment();
        Bundle args = new Bundle();
        args.putString("text", menuLists.get(position));
        contentFragment.setArguments(args);

        FragmentManager fm = getFragmentManager();
        fm.beginTransaction().replace(R.id.content_layout, contentFragment).commit();

        mDrawerLayout.closeDrawer(mListView);
    }
}

res/menu/main.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/action_webSearch"
        android:icon="@drawable/action_search"
        android:showAsAction="ifRoom|withText"
        android:title="webSearch" />

</menu>

res/values/strings.xml

<resources>
    <string name="app_name">DrawerLayoutUsing</string>
    <string name="drawer_open">Drawer Open</string>
    <string name="drawer_close">Drawer Close</string>
</resources>

出现空指针错误
应该是android.support.v4.app.ActionBarDrawerToggle与android.support.v7.app.ActionBarDrawerToggle的兼容性错误，本人尚未解决

四、点击图标开闭抽屉
代码再上方修改后的MainActivity.java