DrawerLayout的学习（与ToolBar结合）

什么是DrawerLayout

官方文档是这样说的
The navigation drawer is a panel that displays the app’s main navigation options on the left edge of the screen. It is hidden most of the time, but is revealed when the user swipes a finger from the left edge of the screen or, while at the top level of the app, the user touches the app icon in the action bar.

他是在屏幕的左侧显示应用的主要导航选项的一个面板。在大多数情况下它是隐藏的，但是当用户用户从屏幕左边滑动时或者当用户点击用用顶部的ActionBar的图标时，它就显示出来了。（翻译略烂）

添加DrawerLayout

To add a navigation drawer, declare your user interface with a DrawerLayout object as the root view of your layout. Inside the DrawerLayout, add one view that contains the main content for the screen (your primary layout when the drawer is hidden) and another view that contains the contents of the navigation drawer.

为了添加一个导航抽屉，应该在你的布局文件的根部声明一个DrawerLayout，在这个DrawerLayout里面，添加两个View，一个View包含了当抽屉隐藏的时候屏幕显示的主要内容。另一个View包含了导航抽屉的主要内容。

For example, the following layout uses a DrawerLayout with two child views: a FrameLayout to contain the main content (populated by a Fragment at runtime), and a ListView for the navigation drawer.

例如，下面这个布局DrawerLayout是根布局，下面包含两个子View，一个FrameLayout包含主要内容（运行时被Fragment填充），一个ListView是显示导航抽屉的列表。

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

注意事项

1、This layout demonstrates some important layout characteristics:

2、The main content view (the FrameLayout above) must be the first child in the DrawerLayout because the XML order implies z-ordering and the drawer must be on top of the content.

3、The main content view is set to match the parent view’s width and height, because it represents the entire UI when the navigation drawer is hidden.

4、The drawer view (the ListView) must specify its horizontal gravity with the android:layout_gravity attribute. To support right-to-left (RTL) languages, specify the value with “start” instead of “left” (so the drawer appears on the right when the layout is RTL).

5、The drawer view specifies its width in dp units and the height matches the parent view. The drawer width should be no more than 320dp so the user can always see a portion of the main content.

1、主要内容的布局（这里是FrameLayout）必须是DrawerLayout的第一个子布局
2、主要内容的布局宽度和高度都必须设置为march_parent，这是因为当抽屉隐藏时，它显示的是整个UI。
3、抽屉布局必须包含layout_gravity属性，当属性值为start时，表示从左向右划出，属性值为end时，表示从右向左滑出。
4、抽屉布局应该指定宽度使用dp单位，高度设为match_parent，宽度不应该超过320dp，这样的话即时抽屉显示出来了，用户也能看见一部分主要界面的内容。

到这里就可以创建一个DrawerLayout了。

使用实例（与ToolBar结合）

主界面布局

<?xml version="1.0" encoding="utf-8"?><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"    ><LinearLayout    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.v7.widget.Toolbar        android:id="@+id/zhihu_toolBar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/color_512da8">    </android.support.v7.widget.Toolbar>    <FrameLayout        android:id="@+id/ly_content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@android:color/darker_gray"        >    </FrameLayout></LinearLayout>    <ListView        android:id="@+id/drawer_showLisView"        android:layout_width="240dp"        android:layout_height="match_parent"        android:layout_gravity="start"        android:background="#FFFFFF"        android:choiceMode="singleChoice"        android:divider="@android:color/holo_red_dark"        android:dividerHeight="1dp"        ></ListView></android.support.v4.widget.DrawerLayout>

可以看到根布局是DrawerLayout，下面一个LinearLayout（一个ToolBar与一个FrameLayout）和一个ListView。

如果你不知道怎么使用ToolBar,我的上一篇博客有介绍，而且这里面的ToolBar的东西都是用的上一篇的仿知乎日报的ToolBar
http://blog.csdn.net/freshxu/article/details/51701584

用在ToolBar上的Menu

<?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto">    <item        android:id="@+id/action_search"        android:icon="@mipmap/ic_search"        app:showAsAction="ifRoom"        android:title="@string/menu_search"        ></item>    <item        android:id="@+id/action_notification"        android:icon="@mipmap/ic_notifications"        android:title="@string/menu_notifications"        app:showAsAction="ifRoom"        ></item>    <item        android:id="@+id/action_setting"        android:title="设置"        app:showAsAction="never"        ></item>    <item        android:id="@+id/action_about"        android:title="关于"        app:showAsAction="never"        ></item></menu>

这里的Star是为了填充导航抽屉的导航列表。

Star实体

public class Star {    public String name;    public int iconId;    public Star(String name,int iconId) {        this.name = name;        this.iconId=iconId;    }}

StarAdapter

public class StarAdapter extends ArrayAdapter<Star> {    private int mResourceId;    public StarAdapter(Context context, int resource, List<Star> objects){        super(context, resource, objects);        mResourceId=resource;    }    @Override    public View getView(int position, View convertView, ViewGroup parent) {        Star star=getItem(position);        View view;        ViewHolder viewHolder;        if(convertView==null){            viewHolder=new ViewHolder();            view= LayoutInflater.from(getContext()).inflate(mResourceId,null);            viewHolder.mImageView=(ImageView) view.findViewById(R.id.star_icon);            viewHolder.mNameTextView=(TextView) view.findViewById(R.id.star_name);            view.setTag(viewHolder);        }else {            view=convertView;            viewHolder=(ViewHolder) view.getTag();        }        viewHolder.mImageView.setImageResource(star.iconId);        viewHolder.mNameTextView.setText(star.name);        return view;    }}class ViewHolder{    ImageView mImageView;    TextView mNameTextView;}

Activity

public class DrawerActivity extends FragmentActivity{    private DrawerLayout mDrawerlayout;    private ListView mShowListView;    private ArrayList<Star> mStars;    private StarAdapter mAdapter;    private Toolbar mToolbar;    private ActionBarDrawerToggle mDrawerToggle;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.activity_drawer);        mDrawerlayout=(DrawerLayout) findViewById(R.id.drawer_layout);        mShowListView=(ListView) findViewById(R.id.drawer_showLisView);        mToolbar=(Toolbar) findViewById(R.id.zhihu_toolBar);        //设置填充菜单        mToolbar.inflateMenu(R.menu.zhihu_menu);        //设置标题        mToolbar.setTitle(R.string.home_page);        //设置导航图标        mToolbar.setNavigationIcon(R.mipmap.ic_drawer_home);        mToolbar.setTitleTextColor(getResources().getColor(android.R.color.white));        initStar();        mAdapter=new StarAdapter(this,R.layout.star_item,mStars);        mShowListView.setAdapter(mAdapter);        mShowListView.setOnItemClickListener(new AdapterView.OnItemClickListener() {            @Override            public void onItemClick(AdapterView<?> parent, View view, int position, long id) {                ContentFragment fragment=new ContentFragment();                Bundle args=new Bundle();                args.putString("text",mStars.get(position).name);                fragment.setArguments(args);                FragmentManager fragmentManager=getSupportFragmentManager();                fragmentManager.beginTransaction().replace(R.id.ly_content,fragment).commit();                mDrawerlayout.closeDrawer(mShowListView);            }        });        mDrawerToggle=new ActionBarDrawerToggle(DrawerActivity.this,mDrawerlayout,mToolbar,R.string.open,R.string.close);        mDrawerToggle.syncState();        mDrawerlayout.setDrawerListener(mDrawerToggle);        mToolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {            @Override            public boolean onMenuItemClick(MenuItem item) {                int id=item.getItemId();                switch (id){                    case R.id.action_search:                        Toast.makeText(DrawerActivity.this,R.string.menu_search,Toast.LENGTH_LONG).show();                        break;                    case R.id.action_notification:                        Toast.makeText(DrawerActivity.this,R.string.menu_notifications,Toast.LENGTH_LONG).show();                        break;                    case R.id.action_setting:                        Toast.makeText(DrawerActivity.this,R.string.menu_settings,Toast.LENGTH_LONG).show();                        break;                    case R.id.action_about:                        Toast.makeText(DrawerActivity.this,R.string.menu_about_us,Toast.LENGTH_LONG).show();                        break;                }                return true;            }        });    }    public void initStar(){        mStars=new ArrayList<Star>();        Star star1=new Star("Kobe",R.mipmap.ic_launcher);        Star star2=new Star("James",R.mipmap.ic_launcher);        Star star3=new Star("Curry",R.mipmap.ic_launcher);        Star star4=new Star("Durant",R.mipmap.ic_launcher);        mStars.add(star1);        mStars.add(star2);        mStars.add(star3);        mStars.add(star4);    }}

上面这段activity代码主要实现的是，初始化ToolBar，为ToolBar的Menu的Item设置点击事件。为导航列表设置点击事件（点击后主界面分别显示对应的Fragment）。

 mDrawerToggle=new ActionBarDrawerToggle(DrawerActivity.this,mDrawerlayout,mToolbar,R.string.open,R.string.close);        mDrawerToggle.syncState();        mDrawerlayout.setDrawerListener(mDrawerToggle);

注意这段代码，这段代码实现的功能是点击ToolBar的Novigation图标同样会出现侧滑菜单。

运行效果截图

向右滑出侧滑菜单

点击导航栏Kobe

这里的侧滑菜单出来后是覆盖住ToolBar的，如果不想让它覆盖，只需要将ToolBar写在DrawerLayout的外面就好了。修改布局

<?xml version="1.0" encoding="utf-8"?><LinearLayout    xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <android.support.v7.widget.Toolbar        android:id="@+id/zhihu_toolBar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@color/color_512da8">    </android.support.v7.widget.Toolbar><android.support.v4.widget.DrawerLayout    android:id="@+id/drawer_layout"    android:layout_width="match_parent"    android:layout_height="match_parent"    >    <FrameLayout        android:id="@+id/ly_content"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@android:color/darker_gray"        >    </FrameLayout>    <ListView        android:id="@+id/drawer_showLisView"        android:layout_width="240dp"        android:layout_height="match_parent"        android:layout_gravity="start"        android:background="#FFFFFF"        android:choiceMode="singleChoice"        android:divider="@android:color/holo_red_dark"        android:dividerHeight="1dp"        ></ListView></android.support.v4.widget.DrawerLayout></LinearLayout>

再次运行