[学习笔记]用户界面优化之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