Material Design (二) ToolBar的使用

为什么要使用ToolBar

在ToolBar还没出现之前，因为ActionBar并不是那么好用一直都没用用过，现在ActionBar已经过时了，Material Desgin 风格的ToolBar 在视觉动画处理上很完美的和其他一些布局设计相融合，很方便的实现了ToolBar下滑隐藏上滑显示的功能，动画效果非常流畅，还能通过设置可以点击打开Sliding Drawer，符合app设计原则和用户操作习惯。下面我们开始一步步学习ToolBar的基本实现和一些细节设置。

添加一个带有选项菜单的ToolBar

(1) 新建一个空项目

新建一个项目名称为MaterialTest的新项目，在/app/src/main/res/values/style.xml文件中定义Material风格的主题样式AppTheme（如果没有的话）。并且让AppTheme继承 Theme.AppCompat.Light.NoActionBar：

<resources>
    <!-- Base application theme.
    parent="Theme.AppCompat.Light.NoActionBar"-->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
</resources>

在AndroidManifest.xml文件的<application/>中的theme属性设置成AppTheme

android:theme="@style/AppTheme"

定制配色，这里我重新定制了自己想要的主题颜色

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#F9F9F9</color>
    <color name="colorPrimaryDark">#999999</color>
    <color name="colorAccent">#FF4081</color>
</resources>

(2) 添加ToolBar控件

在activity_main.xml中去掉根节点中默认设置的padding值和里面默认的显示“Hello World!”的TextView控件

然后在里面添加<android.support.v7.widget.Toolbar/>控件

在<android.support.v7.widget.Toolbar/>外层需要用<android.support.design.widget.AppBarLayout/>包裹才会有Material 投影的效果，添加这个需要在app的build.gradle中加入如下依赖包：
compile 'com.android.support:design:25.1.0'

activity_main.xml中的完整代码如下所示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.enid.myapplication.MainActivity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary" />

    </android.support.design.widget.AppBarLayout>
</RelativeLayout>

这里来介绍一个小的知识点：

从上面的代码中可以看到在设置height和background属性的时候用到了?attr/actionBarSize和?attr/colorPrimary而不是平常用到的@dimen/ 和 @color/。这样做的结果是，设置的高度和颜色是和设置的theme保持一致，随设置的theme变化而变化，前提是theme中定义了相对应的属性
Ctrl+Click 点击可以看到在values.xml文件里面有这样格式的定义：

<declare-styleable>

<attr format= "" name = ""/>

</declare-styleable>

我们也可以自己声明一个属性实现这样的效果，在一个attrs.xml/values.xml/style.xml任意一个文件的根目录下定义如下：

<declare-styleable name="ColorAttr" format="reference">
     <attr name="attrTestColor" format="reference"/>
</declare-styleable>

在主题样式中添加该属性

   <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
       <!-- Customize your theme here. -->
       <item name="colorPrimary">@color/colorPrimary</item>
       <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
       <item name="colorAccent">@color/colorAccent</item>
       **<item name="attrTestColor">@color/colorPrimaryDark</item>**
   </style>

在需要的地方添加属性
android:background=**"?attr/attrTestColor" **
这样arrtTestColor的颜色就随着主题样式里设置的颜色改变了(即上面红色代码处指定的颜色。

好了，回归ToolBar的使用

最后在MainActivity添加如下代码:

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

到现在ToolBar就添加好了，现在这个ToolBar只有一个标题如下图所示：

(3) 给ToolBar添加选项菜单

在/app/src/main/res/menu/ 下新建main_menu.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/add_item"
        android:icon="@drawable/toolbar_add"
        android:title="Add"
        app:showAsAction="always" />
    <item
        android:id="@+id/remove_item"
        android:icon="@drawable/toolbar_delete"
        android:title="Remove"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/filter_item"
        android:icon="@drawable/toolbar_filter"
        android:title="Update"
        app:showAsAction="never" />
</menu>

app:showAsAction有三个选择值：

• always 总是显示在ToolBar上

• ifRoom 屏幕有足够空间时显示出来

• never 总是隐藏在右侧三个小圆点中

icon和title的设置，如果显示在ToolBar上则只显示icon不显示title,如果隐藏在小圆点的按钮中则只显示title不显示

在MainActivity中重写 onCreateOptionsMenu()方法，创建菜单

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

重写onOptionsItemSelected()方法，处理菜单选中事件

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.add_item:
            toastMsg("click item Add");
            break;
        case R.id.remove_item:
            toastMsg("click item Remove");
            break;
        case R.id.filter_item:
            toastMsg("click item filter");
            break;
        default:
            break;
    }
    return true;
}

完成后的效果如下所示

由于系统用的是浅色主题，ToolBar也将默认使用系统的所使用的主题，再添加了菜单选项后，Toolbar上的默认图标和副标题是深色（灰色），Title是深色（黑色）

可以通过设置将Toolbar上默认图标的颜色设置为深色（黑色）

这里我们设置Toolbar控件的属性android:theme="@style/ThemeOverlay.AppCompat.ActionBar" 是将Toolbar设置为浅色主题，可以看到系统的三个小圆点变成深色（黑色）

若设置属性android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"则是将ToolBar设置为深色主题，Toolbar上的文字图标都将变成浅色（白色）

为了突出对比我们将Toolbar控件设置app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" 将Toolbar上弹出的popupWindow的主题设为深色，其上面文字将显示为浅色

如果有特殊需求，Title、subTitle的颜色也可以自己通过相应属性设置。

设置主题属性后的效果：

图2-3.gif

(4)修改ToolBar标题

ToolBar的标题默认是AndroidManifest文件中<Application/>标签下属性label设置的值。可以通过toolbar.setTitle("Fruit");需要注意的是要在onCreate()方法完成以后设置否则还是会使用默认标题。我们可以重写onPostCreate()方法设置标题：

@Override
protected void onPostCreate(@Nullable Bundle savedInstanceState) {
    super.onPostCreate(savedInstanceState);
    //set tool bar title
    toolbar.setTitle("Fruit");
    //set sub title
    toolbar.setSubtitle("are favorite fruit");
}

TooBar隐藏、显示动画的实现

有很多应用都实现了这种效果：在界面显示内容超出屏幕往下滑动时，顶部工具栏（菜单栏）自动隐藏，往上滑动时又显示出来的效果。

(1) 使用RecyclerView和CardView填充界面内容

我们的项目中是在MainActivity中放置一个ViewPager，用Fragment填充ViewPager，在Fragment中使用RecyclerView + CardView 填充内容使内容超出屏幕大小，这里用到ViewPager是因为后面会讲到TabLayout和ViewPager的结合使用效果。

在项目中用到了两个依赖包：

compile 'com.android.support:cardview-v7:25.1.0'
compile 'com.github.bumptech.glide:glide:3.7.0'

因为这篇文章主要讲ToolBar的应用，所以这里不详细列出RecyclerView和CardView的实现过程，这里说一点CardView需要注意的地方。

fruit_item.xml中<android.support.v7.widget.CardView/>标签设置属性app:cardUseCompatPadding="true"，否则在有些手机中CardView之间没有间隔：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/card_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#00000000"
    app:cardUseCompatPadding="true"
    app:cardCornerRadius="8dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/fruit_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/fruit_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dp" />
    </LinearLayout>
</android.support.v7.widget.CardView>

之前在看郭林的《第一行代码》第二版中学习Material Design时自己在网上找了一些水果图片使用到项目中。

(2) 给ToolBar添加隐藏、显示动画

把根布局换成<android.support.design.widget.CoordinatorLayout/>标签

在<android.support.v7.widget.Toolbar/>标签中加入属性app:layout_scrollFlags="scroll|enterAlways|snap"

在<android.support.v4.view.ViewPager/>标签中加入属性 app:layout_behavior="@string/appbar_scrolling_view_behavior"

app:layout_scrollFlags属性是控制ToolBar的动画，app:layout_behavior属性是控制在滑动时ViewPager的滑动与ToolBar动画的一致性

完整代码如下：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:background="?attr/attrTestColor"
    android:layout_height="match_parent"
    tools:context="com.enid.materialtest.MainActivity">

        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="?attr/colorPrimary"
                app:theme="@style/ThemeOverlay.AppCompat.ActionBar"
                app:layout_scrollFlags="scroll|enterAlways|snap"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" />

        </android.support.design.widget.AppBarLayout>

        <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>
</android.support.design.widget.CoordinatorLayout>

完成后效果如下所示所示：

简单介绍SwipeRefreshLayout、 FloagtingActionButton、 Snackbar的使用

在项目中常常要用的<android.support.v4.widget.SwipeRefreshLayout/>和<android.support.design.widget.FloatingActionButton/>这两个控件。

• SwipeRefreshLayout的使用：

在frag_fruit.xml文件中用SwipeRefreshLayout将RecyclerView包裹起来，在MainActivity中通过findViewId方法获取到控件

        swipeRefreshLayout = (SwipeRefreshLayout) view.findViewById(R.id.swipe_refresh);
        swipeRefreshLayout.setColorSchemeResources(R.color.cardview_dark_background);
        swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshFruits();
            }
        });

• FloatingActionButton的使用：

将FloatingActionButton放在CoordinatorLayout控件里面，一些关键的属性设置如下：

android:layout_gravity="bottom|end"//设置FloatingActionButton的位置
android:layout_margin="16dp" //FloatingActionButton 距离边界的距离
android:src="@drawable/icon_share" //FloatingActionButton上显示的图标
app:elevation="8dp"  //FloatingActionButton的高度位置，与投影的大小有关

在代码中设置点击点击监听给出一个提示，这里我们可以用Snackbar代替以前的Toast，Snackbar的使用方法和Toast差不多，显示效果是一个长条，还可以多添加一个用户操作处理

//FloatingActionButton & Snack bar
findViewById(R.id.fab).setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        Snackbar.make(view, "share data to someone", Snackbar.LENGTH_SHORT)
        .setAction("Undo", new View.OnClickListener() {
              @Override
              public void onClick(View view) {
                  toastMsg("share canceled"); //在提示显示时，用户点击事件处理
              }
         })
         .show();
     }
});

完成后效果如下所示：

总结

在上篇文章中，我们初步学习理解了什么是Material Desing 和Material Design 能带给我们的作用效果，这篇文章主要学习了ToolBar的使用，了解了android:background="?attr/attrTestColor" 和 android:background="@color//attrTestColor" 的区别，以及SwipeRefreshLayout、FloatingActionButton、SnackBar的基础用法，这些简单的控件能给我们带来十分美观、友好的视觉体验，下一篇文章中会进一步学习Navigation Drawer的使用。