為什麼要使用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只有一個標題如圖2_1所示：

圖 2_1

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

完成後效果如下圖2_2:

圖 2_2

由於系統用的是淺色主題，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所示：

圖 2_3

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>

完成後效果如圖3_1所示：

圖 3_1

簡單介紹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();
     }
});

完成後效果如圖 4_1所示：
圖 4_1

總結

在上篇文章中，我們初步學習理解了什麼是Material Desing 和Material Design 能帶給我們的作用效果，這篇文章主要學習了ToolBar的使用，瞭解了android:background="?attr/attrTestColor"  和 android:background="@color//attrTestColor"  的區別，以及SwipeRefreshLayout、FloatingActionButton、SnackBar的基礎用法，這些簡單的控制元件能給我們帶來十分美觀、友好的視覺體驗，下一篇文章中會進一步學習Navigation Drawer的使用。