MaterialDesign学习篇(二)，Toolbar、DrawerLayout的使用-原创手记-慕课网

什么是Toolbar

Toolbar是应用的内容的标准工具栏，可以说是Actionbar的升级版，两者不是独立关系，要使用Toolbar还是得跟ActionBar扯上关系的。相比Actionbar，Toolbar最明显的一点就是变得很自由，可随处放置，因为它是作为一个ViewGroup来定义使用的，所以单纯使用ActionBar已经稍显过时了，它的一些方法已被标注过时。

Toolbar提供了一些可定制化修改的属性，这些可定制修改的属性在API文档中都有详细介绍，如：

设置导航栏图标；
设置App的logo；
支持设置标题和子标题；
支持添加一个或多个的自定义控件；
支持Action Menu；

如何使用Toolbar

演示如下：

步骤

一、在res目录中国，创建menu目录，并简历对应的xml文件，可任意命名，此处命名为menu_tool_bar.xml。

menu_tool_bar.xml中的代码：

    <?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"
            android:title="@string/menu_search"
            app:showAsAction="ifRoom" />

        <!--右侧添加操作条目-->
        <item
            android:id="@+id/action_add"
            android:icon="@mipmap/ic_add"
            android:title="@string/menu_add"
            app:showAsAction="ifRoom" />

        <!--右侧设置条目，收起，不显示-->
        <item
            android:id="@+id/action_setting"
            android:icon="@mipmap/ic_add"
            android:title="@string/menu_setting"
            app:showAsAction="never" />

        <!--右侧设置帮助条目，收起，不显示-->
        <item
            android:id="@+id/action_help"
            android:icon="@mipmap/ic_add"
            android:title="@string/menu_help"
            app:showAsAction="never" />

    </menu>

这里配置的是toolbar右侧一些操作的条目，其中的showAsAction配置菜单项如何显示，有以下的值可选：

always：使菜单项一直显示在ToolBar上。
ifRoom：如果有足够的空间，这个值会使菜单项显示在ToolBar上。
never：使菜单项永远都不出现在ToolBar上,在竖立的三点水(更多)图标的子项中显示。
withText：使菜单项和它的图标，菜单文本一起显示。

我们设置了搜索和添加的菜单项showAsAction指定为ifRoom，在有足够的空间，它们是展示出来的，将设置和帮助的菜单项的showAsAction指定为never，所以它们就收起不显示，点击"更多"的图标的时候，它们才会显示。

二、布局文件中，使用Toolbar

在对应布局的xml文件中，配置toolbar：

    <?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/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            >

        </android.support.v7.widget.Toolbar>
    </LinearLayout>

由于Toolbar是在 Android 5.0才开始有的，我们需要在工程中引入 appcompat-v7的兼容包，由于AndroidStudio在创建项目的时候会默认添加v7包的依赖，所以比较省事，如果还再用Eclise开发的小伙伴，就需要自己添加v7包的依赖。

三、Activity中，对toolbar进行相关设置

1.调用Toolbar相关的API


    public class ToolBarActivity extends AppCompatActivity {

        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
            setContentView(R.layout.activity_tool_bar);

            Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

            toolbar.setBackgroundColor(getResources().getColor(R.color.toolbar_bg));//设置Toolbar的背景颜色

            toolbar.setNavigationIcon(R.mipmap.ic_menu);//设置导航的图标
            toolbar.setLogo(R.mipmap.ic_launcher);//设置logo

            toolbar.setTitle("title");//设置标题
            toolbar.setSubtitle("subtitle");//设置子标题

            toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));//设置标题的字体颜色
            toolbar.setSubtitleTextColor(getResources().getColor(android.R.color.white));//设置子标题的字体颜色

            setSupportActionBar(toolbar);
        }

    }

其中需要注意的是：

    supportRequestWindowFeature(Window.FEATURE_NO_TITLE);

这句代码是不是觉得很眼熟，你以前肯定用过

    requestWindowFeature(Window.FEATURE_NO_TITLE));

只是前面多了support，就和getFragmentManager()和getSupprotFragmentManager()差不多，由于ToolBarActivity继承AppCompatActivity，所以这里使用了supportRequestWindowFeature(Window.FEATURE_NO_TITLE)，如果是继承Activity,则使用requestWindowFeature(Window.FEATURE_NO_TITLE)),这行代码是为了隐藏掉系统原先的导航栏,因为我们将使用Toolbar来代替。

隐藏导航栏的方法有两种：

在调用Activity的setContentView()方法之前，如果是继承AppCompatActivity，则调用supportRequestWindowFeature(Window.FEATURE_NO_TITLE)，如果是继承Activity，则调用requestWindowFeature(Window.FEATURE_NO_TITLE))来隐藏导航栏。
为Activity设置一个NoActionBar的Theme,如Theme.AppCompat.Light.NoActionBar

以上代码运行后，效果如下：

是不是发现少了些什么，没错，少了右侧的搜索、添加菜单项。

此时，我们需要在Activity中，重写onCreateOptionsMenu()方法

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_tool_bar, menu);
        return true;
    }

getMenuInflater().inflate(R.menu.menu_tool_bar, menu);获取菜单填充器，将我们自定义的menu_tool_bar.xml文件填充。

2.设置菜单项的点击监听

要为菜单项设置点击监听，需要重写onOptionsItemSelected()方法,代码如下：

     @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        String tip = "";
        switch (id){
            case android.R.id.home://对应navigationIcon的点击
                tip = "菜单";
                break;
            case R.id.action_search:
                tip = "搜索";
                break;
            case R.id.action_add:
                tip = "添加";
                break;
            case R.id.action_setting:
                tip = "设置";
                break;
            case R.id.action_help:
               tip = "帮助";
                break;
        }
        Toast.makeText(this, tip, Toast.LENGTH_SHORT).show();
        return super.onOptionsItemSelected(item);
    }

在该方法中，我们需要对id进行判断，在menu_tool_bar.xml文件中，对应的菜单项我们都有给予对应的id,如果想对navigationIcon做点击的处理，则当id为android.R.id.home的时候，做相关操作。

显示菜单项和设置点击监听的另一方法

上面提到如果想显示右侧的菜单项，则重写onCreateOptionsMenu()方法将对应的xml文件填充，需要设置点击监听，则重写onOptionsItemSelected()方法，根据id进行判断，做相关处理。还有另外一种方法实现上述的两个功能，不需要重写这两个方法，代码如下：

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_tool_bar);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

        toolbar.setBackgroundColor(getResources().getColor(R.color.toolbar_bg));//设置Toolbar的背景颜色

        toolbar.setNavigationIcon(R.mipmap.ic_menu);//设置导航的图标
        toolbar.setLogo(R.mipmap.ic_launcher);//设置logo

        toolbar.setTitle("title");//设置标题
        toolbar.setSubtitle("subtitle");//设置子标题

        toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));//设置标题的字体颜色
        toolbar.setSubtitleTextColor(getResources().getColor(android.R.color.white));//设置子标题的字体颜色

        //设置右上角的填充菜单
        toolbar.inflateMenu(R.menu.menu_tool_bar);
        //设置导航图标的点击事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(ToolBarActivity.this, "菜单", Toast.LENGTH_SHORT).show();
            }
        });
        //设置右侧菜单项的点击事件
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                int id = item.getItemId();
                String tip = "";
                switch (id) {
                    case R.id.action_search:
                        tip = "搜索";
                        break;
                    case R.id.action_add:
                        tip = "添加";
                        break;
                    case R.id.action_setting:
                        tip = "设置";
                        break;
                    case R.id.action_help:
                        tip = "帮助";
                        break;
                }
                Toast.makeText(ToolBarActivity.this, tip, Toast.LENGTH_SHORT).show();
                return false;
            }
        });;
    }

当调用Toolbar的inflateMenu()方法加载menu布局时，无需再调用setSupportActionBar(),否则加载的是onCreateOptionsMenu()中的布局,点击时不会回调onOptionsItemSelected()方法，需要调用Toolbar的setOnMenuItemClickListener()方法，设置点击的监听，根据对应的id进行判断和处理，与onOptionsItemSelected()中处理不同的是，对应navigationIcon的点击事件，是在Toolbar的setNavigationOnClickListener()方法中进行处理。

Toolbar中添加自定义view

一开始我们提到Toolbar可以进行定制化修改，除了navigationIcon、logo、标题、子标题、菜单项外，还可以添加一些自定义控件(系统原有或自己写的控件)，使用的方法很简单,布局文件中：

    <?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/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            >

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="custom"
                android:textColor="@android:color/white"
                android:textSize="16sp"
                />

        </android.support.v7.widget.Toolbar>
    </LinearLayout>

效果如下：

什么是DrawerLayout

DrawerLayout是Support Library包中实现了侧滑菜单效果的控件，可以说DrawerLayout是因为第三方控件如MenuDrawer等的出现之后，Google借鉴而出现的产物。DrawerLayout分为侧边菜单和主内容区两部分，侧边菜单可以根据手势展开与隐藏（DrawerLayout自身特性），主内容区的内容可以随着菜单的点击而变化（这需要使用者自己实现）。

结合DrawerLayout效果如下：

Toolbar + DrawerLayout 在日常开发中经常使用到，一般是那种侧滑菜单栏的App。

使用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">

            ... //此处省略toolbar

            <android.support.v4.widget.DrawerLayout
                android:id="@+id/drawlayout"
                android:layout_width="match_parent"
                android:layout_height="match_parent">

                <!--content-->
                <FrameLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="@string/content_text"
                        android:gravity="center"
                        android:layout_gravity="center"
                        android:textSize="16sp"
                        />

                </FrameLayout>

                <!--menu-->
                <FrameLayout
                    android:layout_width="180dp"
                    android:layout_height="match_parent"
                    android:layout_gravity="left"
                    android:background="@android:color/white"
                    >

                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textColor="@android:color/black"
                        android:textSize="16sp"
                        android:text="@string/menu_text"
                        android:gravity="center"
                        android:layout_gravity="center"
                        />

                </FrameLayout>

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

使用DrawerLayout，需要添加v4包的依赖，AS创建项目的时候自带v4包的依赖，所以可以直接引用到。DrawerLayout中包括两个childView，一个为内容区域的根布局，另一个为侧边栏的根布局，如果是侧边栏的布局，需要指定其android:layout_gravity="left"或者android:layout_gravity="start"。需要注意的是，作为侧边栏的布局需要放置在内容区域下面,否则其子条目的点击事件将无法响应。

二、Activity中，将Toolbar和DrawerLayout结合

     private void initDrawerLayout() {
        mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,mToolbar, R.string.open, R.string.close);

        mDrawerToggle.syncState();;///将ActionDrawerToggle与DrawerLayout的状态同步

        mDrawerLayout.setDrawerListener(mDrawerToggle);
    }

使用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">

        ... //此处省略toolbar

        <android.support.v4.widget.DrawerLayout
            android:id="@+id/drawlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <!--content-->
            <FrameLayout
                android:id="@+id/fl_content"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                >

            </FrameLayout>

            <!--menu-->
            <ListView
                android:id="@+id/lv_list"
                android:layout_width="180dp"
                android:layout_height="match_parent"
                android:layout_gravity="left"
                android:background="@android:color/white"
                />

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

二、Activity中：

     @Override
    protected void onCreate(Bundle savedInstanceState) {
         ...

        initView();
        initToolBar();
        initMenuTitles();
        initFragments();
        initDrawerLayout();
    }

其中，为侧边栏的listView添加adapter,并设置条目的点击事件

        /**
         * 设置左侧菜单条目的标题
         */
         private void initMenuTitles() {
            mMenuTitles = getResources().getStringArray(R.array.menuTitles);
            ArrayAdapter<String> arrayAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, mMenuTitles);
            mLvList.setAdapter(arrayAdapter);
            mLvList.setOnItemClickListener(new AdapterView.OnItemClickListener() {
                @Override
                public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                    switchFragment(position);//切换fragment
                    mDrawerLayout.closeDrawers();//收起DrawerLayout
                }
            });
        }

       /**
         * 切换fragment
         * @param index 下标
         */
        private void switchFragment(int index) {
            ContentFragment contentFragment = mFragments.get(index);
            FragmentManager fragmentManager = getSupportFragmentManager();
            FragmentTransaction transaction = fragmentManager.beginTransaction();
            transaction.replace(R.id.fl_content,contentFragment);
            transaction.setTransition(FragmentTransaction.TRANSIT_FRAGMENT_OPEN);
            transaction.commit();
        }

好了，到此为止，ToolBar和DrawerLayout的使用，相信已经基本掌握了。需要源码的可以查看：

https://github.com/chaychan/MaterialDesignExercise