為什么要使用ToolBar

在ToolBar還沒出現(xiàn)之前，因?yàn)锳ctionBar并不是那么好用一直都沒用用過醇王，現(xiàn)在ActionBar已經(jīng)過時(shí)了，Material Desgin 風(fēng)格的ToolBar 在視覺動(dòng)畫處理上很完美的和其他一些布局設(shè)計(jì)相融合敛熬，很方便的實(shí)現(xiàn)了ToolBar下滑隱藏上滑顯示的功能黑低，動(dòng)畫效果非常流暢，還能通過設(shè)置可以點(diǎn)擊打開Sliding Drawer挽拔，符合app設(shè)計(jì)原則和用戶操作習(xí)慣持钉。下面我們開始一步步學(xué)習(xí)ToolBar的基本實(shí)現(xiàn)和一些細(xì)節(jié)設(shè)置。

添加一個(gè)帶有選項(xiàng)菜單的ToolBar

(1) 新建一個(gè)空項(xiàng)目

新建一個(gè)項(xiàng)目名稱為MaterialTest的新項(xiàng)目篱昔，在/app/src/main/res/values/style.xml文件中定義Material風(fēng)格的主題樣式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屬性設(shè)置成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中去掉根節(jié)點(diǎn)中默認(rèn)設(shè)置的padding值和里面默認(rèn)的顯示“Hello World!”的TextView控件

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

在<android.support.v7.widget.Toolbar/>外層需要用<android.support.design.widget.AppBarLayout/>包裹才會(huì)有Material 投影的效果州刽，添加這個(gè)需要在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>

這里來介紹一個(gè)小的知識(shí)點(diǎn)：

從上面的代碼中可以看到在設(shè)置height和background屬性的時(shí)候用到了?attr/actionBarSize和?attr/colorPrimary而不是平常用到的@dimen/ 和 @color/空执。這樣做的結(jié)果是，設(shè)置的高度和顏色是和設(shè)置的theme保持一致穗椅，隨設(shè)置的theme變化而變化辨绊，前提是theme中定義了相對(duì)應(yīng)的屬性
Ctrl+Click 點(diǎn)擊可以看到在values.xml文件里面有這樣格式的定義：

<declare-styleable>

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

</declare-styleable>

我們也可以自己聲明一個(gè)屬性實(shí)現(xiàn)這樣的效果，在一個(gè)attrs.xml/values.xml/style.xml任意一個(gè)文件的根目錄下定義如下：

<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的顏色就隨著主題樣式里設(shè)置的顏色改變了(即上面紅色代碼處指定的顏色匹表。

好了门坷，回歸ToolBar的使用

最后在MainActivity添加如下代碼:

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

到現(xiàn)在ToolBar就添加好了，現(xiàn)在這個(gè)ToolBar只有一個(gè)標(biāo)題如下圖所示：

(3) 給ToolBar添加選項(xiàng)菜單

在/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有三個(gè)選擇值：

• always 總是顯示在ToolBar上

• ifRoom 屏幕有足夠空間時(shí)顯示出來

• never 總是隱藏在右側(cè)三個(gè)小圓點(diǎn)中

icon和title的設(shè)置袍镀，如果顯示在ToolBar上則只顯示icon不顯示title,如果隱藏在小圓點(diǎn)的按鈕中則只顯示title不顯示

在MainActivity中重寫 onCreateOptionsMenu()方法默蚌，創(chuàng)建菜單

@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;
}

完成后的效果如下所示

由于系統(tǒng)用的是淺色主題苇羡，ToolBar也將默認(rèn)使用系統(tǒng)的所使用的主題绸吸，再添加了菜單選項(xiàng)后，Toolbar上的默認(rèn)圖標(biāo)和副標(biāo)題是深色（灰色）设江，Title是深色（黑色）

可以通過設(shè)置將Toolbar上默認(rèn)圖標(biāo)的顏色設(shè)置為深色（黑色）

這里我們?cè)O(shè)置Toolbar控件的屬性android:theme="@style/ThemeOverlay.AppCompat.ActionBar" 是將Toolbar設(shè)置為淺色主題锦茁，可以看到系統(tǒng)的三個(gè)小圓點(diǎn)變成深色（黑色）

若設(shè)置屬性android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"則是將ToolBar設(shè)置為深色主題，Toolbar上的文字圖標(biāo)都將變成淺色（白色）

為了突出對(duì)比我們將Toolbar控件設(shè)置app:popupTheme="@style/ThemeOverlay.AppCompat.Dark" 將Toolbar上彈出的popupWindow的主題設(shè)為深色叉存，其上面文字將顯示為淺色

如果有特殊需求码俩，Title、subTitle的顏色也可以自己通過相應(yīng)屬性設(shè)置歼捏。

設(shè)置主題屬性后的效果：

圖2-3.gif

(4)修改ToolBar標(biāo)題

ToolBar的標(biāo)題默認(rèn)是AndroidManifest文件中<Application/>標(biāo)簽下屬性label設(shè)置的值稿存」话可以通過toolbar.setTitle("Fruit");需要注意的是要在onCreate()方法完成以后設(shè)置否則還是會(huì)使用默認(rèn)標(biāo)題。我們可以重寫onPostCreate()方法設(shè)置標(biāo)題：

@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隱藏挠铲、顯示動(dòng)畫的實(shí)現(xiàn)

有很多應(yīng)用都實(shí)現(xiàn)了這種效果：在界面顯示內(nèi)容超出屏幕往下滑動(dòng)時(shí)冕屯，頂部工具欄（菜單欄）自動(dòng)隱藏，往上滑動(dòng)時(shí)又顯示出來的效果拂苹。

(1) 使用RecyclerView和CardView填充界面內(nèi)容

我們的項(xiàng)目中是在MainActivity中放置一個(gè)ViewPager安聘，用Fragment填充ViewPager，在Fragment中使用RecyclerView + CardView 填充內(nèi)容使內(nèi)容超出屏幕大小瓢棒，這里用到ViewPager是因?yàn)楹竺鏁?huì)講到TabLayout和ViewPager的結(jié)合使用效果浴韭。

在項(xiàng)目中用到了兩個(gè)依賴包：

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

因?yàn)檫@篇文章主要講ToolBar的應(yīng)用，所以這里不詳細(xì)列出RecyclerView和CardView的實(shí)現(xiàn)過程脯宿，這里說一點(diǎn)CardView需要注意的地方念颈。

fruit_item.xml中<android.support.v7.widget.CardView/>標(biāo)簽設(shè)置屬性app:cardUseCompatPadding="true"，否則在有些手機(jī)中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>

之前在看郭林的《第一行代碼》第二版中學(xué)習(xí)Material Design時(shí)自己在網(wǎng)上找了一些水果圖片使用到項(xiàng)目中连霉。

(2) 給ToolBar添加隱藏榴芳、顯示動(dòng)畫

把根布局換成<android.support.design.widget.CoordinatorLayout/>標(biāo)簽

在<android.support.v7.widget.Toolbar/>標(biāo)簽中加入屬性app:layout_scrollFlags="scroll|enterAlways|snap"

在<android.support.v4.view.ViewPager/>標(biāo)簽中加入屬性 app:layout_behavior="@string/appbar_scrolling_view_behavior"

app:layout_scrollFlags屬性是控制ToolBar的動(dòng)畫，app:layout_behavior屬性是控制在滑動(dòng)時(shí)ViewPager的滑動(dòng)與ToolBar動(dòng)畫的一致性

完整代碼如下：

<?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的使用

在項(xiàng)目中常常要用的<android.support.v4.widget.SwipeRefreshLayout/>和<android.support.design.widget.FloatingActionButton/>這兩個(gè)控件。

• 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控件里面柿祈，一些關(guān)鍵的屬性設(shè)置如下：

android:layout_gravity="bottom|end"http://設(shè)置FloatingActionButton的位置
android:layout_margin="16dp" //FloatingActionButton 距離邊界的距離
android:src="@drawable/icon_share" //FloatingActionButton上顯示的圖標(biāo)
app:elevation="8dp"  //FloatingActionButton的高度位置，與投影的大小有關(guān)

在代碼中設(shè)置點(diǎn)擊點(diǎn)擊監(jiān)聽給出一個(gè)提示哩至，這里我們可以用Snackbar代替以前的Toast躏嚎，Snackbar的使用方法和Toast差不多，顯示效果是一個(gè)長條菩貌，還可以多添加一個(gè)用戶操作處理

//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"); //在提示顯示時(shí)卢佣，用戶點(diǎn)擊事件處理
              }
         })
         .show();
     }
});

完成后效果如下所示：

總結(jié)

在上篇文章中，我們初步學(xué)習(xí)理解了什么是Material Desing 和Material Design 能帶給我們的作用效果菜谣，這篇文章主要學(xué)習(xí)了ToolBar的使用珠漂，了解了android:background="?attr/attrTestColor" 和 android:background="@color//attrTestColor" 的區(qū)別晚缩，以及SwipeRefreshLayout尾膊、FloatingActionButton、SnackBar的基礎(chǔ)用法荞彼，這些簡單的控件能給我們帶來十分美觀冈敛、友好的視覺體驗(yàn)，下一篇文章中會(huì)進(jìn)一步學(xué)習(xí)Navigation Drawer的使用鸣皂。