Material Design 實戰 之第一彈——Toolbar詳解

摘要： 本模組共有六篇文章，參考郭神的《第一行程式碼》，對Material Design的學習做一個詳細的筆記，大家可以一起交流一下： Material Design 實戰 之第一彈——Toolbar（即本文） Material Design 實戰 之第二彈——滑動選單詳...

本模組共有六篇文章，參考郭神的《第一行程式碼》，對Material Design的學習做一個詳細的筆記，大家可以一起交流一下：

• ofollow,noindex">Material Design 實戰 之第一彈——Toolbar（即本文）
• Material Design 實戰 之第二彈——滑動選單詳解&實戰
• Material Design 實戰 之第三彈—— 懸浮按鈕和可互動提示（FloatingActionButton & Snackbar & CoordinatorLayout）
• Material Design 實戰 之第四彈 —— 卡片佈局以及靈動的標題欄（CardView & AppBarLayout）
• Material Design 實戰 之第五彈 —— 下拉重新整理（SwipeRefreshLayout）
• Material Design 實戰 之 第六彈 —— 可摺疊式標題欄(CollapsingToolbarLayout) & 系統差異型的功能實現（充分利用系統狀態列空間）

寫在文首，什麼是Material Design？這裡參考一下郭神的說法：

文章提要與總結

1. 關於android:theme的詳細理解（附圖）；

2. 在activity_main.xml中使用Toolbar代替ActionBar；
關於名稱空間：androidapp；
關於Toolbar控制元件的屬性；
尤其android:theme以及app:popupTheme的用法理解；

3. 關於activity.android：label；

4. 通過Menu resource file選單檔案式（同時為xml格式）來為Toolbar新增action按鈕；
檔案中：
<item>標籤來定義action按鈕，
android：id用於指定按鈕的id，
android:icon用於指定按鈕的圖示，
android：title用於指定按鈕的文字；
使用app：showAsAction來指定按鈕的顯示位置，再次使用了app名稱空間，同樣是為了能夠相容低版本的系統；
showAsAction的幾種選值：alwaysifRoomnever
注意，
Toolbar中的action按鈕只會顯示圖示，
選單中的action按鈕只會顯示文字；

5. onCreateOptionsMenu()載入描述Toolbar的action按鈕的Menu resource file；
onOptionsItemSelected()方法中處理各個按鈕的點選事件；

正文

關於Toolbar

Toolbar相關於ActionBar；

不過ActionBar由於其設計原因，被限定只能位於活動的頂部，從而不能實現一些Material Design的效果，因此官方現在已經 不建議 使用ActionBar了。

首先要知道，任何一個新建的專案預設都是會顯示ActionBar的。
ActionBar是根據專案中指定的主題來顯示，
開啟AndroidManifest.xml檔案：

可以看到這裡用android：theme指定了一個AppTheme的主題。
開啟res/values/styles.xml檔案可以檢視其定義出處：

這裡定義了一個叫AppTheme的主題並指定它的parent主題是Theme.AppCompat.Light.DarkActionBar。
DarkActionBar是一個深色的ActionBar主題，所有的新建專案中自帶的ActionBar就是因為指定了這個主題才出現的。

要使用TooIbar來替代ActionBar時需要指定一個不帶ActionBar的主題，
對應的通常有Theme.AppCompat.NoActionBar和Theme.AppCompat.Light.NoActionBar這兩種主題可選；
其中：

• Theme.AppCompat.NoActionBar表示深色主題，它會將介面的主體顏色設成深色，陪襯顏色設成淡色；
• Theme.AppCompat.Light.NoActionBar表示淡色主題，它會將介面的主體顏色設成淡色，陪襯顏色設成深色。

具體可以根據情況去設定，這裡主要選用淡色主題，如下所示：

觀察程式碼中AppTheme中的屬性重寫：
可見這裡重寫了colorPrimary、colorPrimaryDark和colorAccent這3個屬性的顏色。
屬性指定顏色名稱對應的位置，如圖：

可見除了上述3個屬性之外，我們還可以通過textColorPrimary、windowBackground和navigationBarCotor等屬性來控制更多位置的顏色。
不過colorAccent這個屬性比較特殊，它不只是用來指定這樣一個按鈕的顏色，而是更多表達了一個強調的意思，比如一些控制元件的選中狀態也會使用colorAccent的顏色。

至此已將ActionBar隱藏，接下來使用Toolbar來替代ActionBar。
修改activity_main.xml：

<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">

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

下面解析一下這段程式碼：

1. 首先看一下第2行，這裡使用xmlns:app指定了一個新的名稱空間。

   正是由於每個佈局檔案都會使用xmlns：android來指定一個名稱空間，因此我們才能一直使用android:id、android:layoutwidth等寫法，

   這裡指定了xmlns:app，現在便可以使用app：attribute這樣的寫法了。

但是為什麼這裡要指定一個xmlns：app的名稱空間呢？
這是由於MaterialDesign是在Android5.0系統中才出現的，而很多的Material屬性在5.0之前的系統中並不存在，那麼為了能夠相容之前的老系統，我們就不能使用android：attribute這樣的寫法了， 而是應該使用app：attribute

2. 接下來 定義了一個Toolbar控制元件 ，這個控制元件是由appcompat-v7庫提供的。
   這裡我們給Toolbar指定了一個id，將它的
   寬度設定為matchparent，
   高度設定為actionBar的高度，
   背景色設定為colorPrimary。

3. 接下來，關於主題：

   由於我們剛才 在styles.xml中將程式的主題指定成了淡色主題 ，因此 Toolbar現在也是淡色主題 (“白底（黑字）”），而 TooIbar上面的各種元素就會自動使用深色主題 （“（白底）黑字”），這是為了和主體顏色區別開（具體可以看文章開頭對於深色淺色主題的解釋）。

   

   在styles.xml中將程式的主題指定成了淡色主題，Toolbar現在也是淡色主題，TooIbar上面的各種元素就會自動使用深色主題

4. 但是這個效果看起來就會很差 ， 之前 使用ActionBar時文字都是 白色 的，現在變成 黑色 的 會很難看 。那麼 為了能讓Toolbar單獨（全域性是用由APPTheme制定的淺色主題的，故相對而言這裡用“單獨”）使用深色主題 ，這裡我們使用 android:theme 屬性，將Toolbar的主題指定成了 ThemeOverlay.AppCompat.Dark.ActionBar。

5. 但是這樣指定完了之後又會出現新的問題，如果Toolbar中有選單按鈕，那麼彈出的選單項也會變成深色主題，這樣就 再次變得十分難看 ，於是這裡使用了 app:popupTheme屬性單獨將彈出的選單項指定成了淡色主題。

6. 之所以使用app：popupTheme，是因為popupTheme這個屬性是在Android5.0系統中新增的，我們使用app:popupTheme的話就可以相容Android5.0以下的系統了。

接下來修改MainActivity：

protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

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

這裡，
首先用findViewByid()得到Toolbar的例項，
然後呼叫setSupportActionBar()方法同時傳入Toolbar的例項，
至此便實現了既使用Toolbar，又讓它的外觀與功能都同ActionBar一致。

現在執行一下程式，效果如圖：

這個標題欄雖然看上去和之前的沒什麼兩樣，但其實它已經是Toolbar而不是ActionBar了，它現在也具備了實現MaterialDesign效果的能力。

這裡給activity增加了一個android：label屬性，用於指定在Toolbar中顯示的文字內容，
如果沒有指定的話，會預設使用application中指定的label內容，也就是我們的應用名稱。

接下來再新增一些action按鈕來豐富Toolbar：
先準備了幾張圖片來作為按鈕的圖示，將它們放在了drawable-xxhdpi目錄下；
右擊res目錄→New→Directory，建立一個menu資料夾；
右擊menu資料夾→New→Menuresourcefile，建立一個toolbar.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/backup"
android:icon="@drawable/ic_backup"
android:title="Backup"
app:showAsAction="always"/>
<item
android:id="@+id/delete"
android:icon="@drawable/ic_delete"
android:title="Delete"
app:showAsAction="ifRoom"/>
<item
android:id="@+id/settings"
android:icon="@drawable/ic_settings"
android:title="Settings"
app:showAsAction="never"/>
</menu>

• 可以看到，我們通過
  <item>標籤來定義action按鈕，
  android：id用於指定按鈕的id，
  android:icon用於指定按鈕的圖示，
  android：title用於指定按鈕的文字。

• 接著使用app：showAsAction來指定按鈕的顯示位置，

  之所以這裡再次使用了app名稱空間，同樣是為了能夠相容低版本的系統。

• showAsAction主要有以下幾種值可選：
  always表示永遠顯示在Toolbar中，如果螢幕空間不夠則不顯示；
  ifRoom表示螢幕空間足夠的情況下顯示在Toolbar中，不夠的話就顯示在選單當中；
  never則表示永遠顯示在選單當中。

• 注意，

  Toolbar中的action按鈕只會顯示圖示，

  選單中的action按鈕只會顯示文字。

接下來就是建立選單的套路了，修改MainActivity中的程式碼，如下所示：

package com.example.materialtest;

import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

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

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

@Override
public boolean onOptionsItemSelected(MenuItem item) {
switch (item.getItemId()){
case R.id.backup:
Toast.makeText(this,"You clicked Backup" , Toast.LENGTH_SHORT).show();
break;
case R.id.delete:
Toast.makeText(this,"You clicked Delete" , Toast.LENGTH_SHORT).show();
break;
case R.id.settings:
Toast.makeText(this,"You clicked Settings" , Toast.LENGTH_SHORT).show();
break;
default:
}
return true;
}

}

上述程式碼：
在onCreate0ptionsMenu()中載入toolbar.xml這個選單檔案，
在onOptionsItemSelected()中處理各個按鈕的點選事件。
重新執行一下程式，效果如圖：

可見Toolbar上面現在顯示了兩個action按鈕，這是因為
Backup按鈕指定的顯示位置是alway，
Delete按鈕指定的顯示位置是ifRoom，而現在螢幕空間充足。因此兩個按鈕都會顯示在Toolbar中。
Settings按鈕則由於指定的顯示位置是never，所以顯示在選單中（點選最右邊的三個小點即知）。

同時注意這些action按鈕都是可以響應點選事件的！