簡介

Android3.0之後，Google引入了ActionBar，想要統一安卓應用的導航欄樣式。但ActionBar只能位於活動的頂部，不能實現一些Material Design的效果，官方不建議使用ActionBar了。自2014年Google I/O上Material Design橫空出世後，市場上的應用又逐步趨向了樣式的風格統一，support library中很快就出來了ToolBar控制元件，一個定製化的ViewGroup，來完善ActionBar的使用。所以可以說ToolBar是ActionBar的替代品。ToolBar強大之處在於它不僅繼承了ActionBar的所有功能，而且靈活性很高，可以配合其他控制元件來完成一些Material Design的效果。

使用ToolBar

新建的專案，預設是使用ActionBar的，檢視專案中ActionBar的位置：開啟AndroidManifest.xml，在這行程式碼android:theme="@style/AppTheme"

<application
    android:allowBackup="true"
    android:icon="@mipmap/ic_launcher"
    android:label="@string/app_name"
    android:supportsRtl="true"
    android:theme="@style/AppTheme">
    ...
</application>
 

開啟@style/AppTheme，在這行程式碼<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">

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

ToolBar換掉ActionBar

我們準備用ToolBar換掉ActionBar，所以需要一個不帶ActionBar的主題，通常有兩種主題可選：

• <style name="AppTheme" parent="Theme.AppCompat.NoActionBar"> 它表示深色主題，會把主題設定成深色，陪襯色設定為淡色
• <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"> 它表示淺色主題，會把主題顏色設定為淡色，陪襯色設定為深色

這裡，我們使用淡色主題

<resources>
    <!-- Base application theme. -->
    <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>

我們還可以用textColorPrimary、windowBackground和NavigationBarColor來控制更多位置的顏色

其中colorAccent不止是用來指定按鈕的顏色，而是更多表達了一個意思，比如一些控制元件你選中狀態也會使用colorAccent顏色

修改activity_main.xml

使用xmlns:app指定新的名稱空間（Material Design在Android5.0才出現，更多的Material屬性在5.0之前並不存在，為了能夠相容之前的老系統，我們就不能使用android:attribute，而是使用app:attribute）

定義Toolbar控制元件（因為在style.xml中我們指定的淡色主題，Toolbar會自動使用深色主題，但是效果會很難看）

為了使Toolbar單獨使用深色主題，使用android:theme屬性。如果Toolbar中有選單按鈕，彈出的選單會是深色主題，所以使用app:popupTheme屬性單獨將彈出的選單項指定成了淡色主題。（因為app:popupTheme是5.0系統新增的，使用app:popupTheme就可以相容5.0以下的系統了）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/activity_main"
    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" />
</RelativeLayout>

修改MainActivity

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    setSupportActionBar(toolbar);
}

執行，效果和使用ActionBar相同

Toolbar比較常用的功能

修改標題欄上顯示的文字內容，即AndroidManifest.xml裡給Activity新增android:label屬性，用於指定在Toolbar中顯示文字的內容，如果沒有指定的話，會預設使用應用中指定的lable名稱，即應用名稱。

<application
    ...
    <activity
        android:name=".MainActivity"
        android:label="Fruits">
        <intent-filter>
            <action android:name="android.intent.action.MAIN" />
            <category android:name="android.intent.category.LAUNCHER" />
        </intent-filter>
    </activity>
</application>

新增一些action按鈕

右擊res目錄==>new==>Dictory，建立一個menu資料夾，右擊menu==>new==>menu resource file，建立一個roolbar.xml檔案

使用app:showAsAction屬性來指定按鈕的顯示位置（這裡使用app名稱空間同樣是為了能夠相容低版本的系統），showAsAction主要有三種值：always表示永遠心實在Toolbar中，如果螢幕空間不夠則不顯示；ifRoom表示螢幕空間足夠的情況下顯示在Toolbar中，不夠的話就顯示在選單中；neve表示永遠顯示在選單中（toolbar中的action按鈕只顯示圖片，選單中的action按鈕只顯示文字）

<?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>

修改MainActivity

@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, "backup", Toast.LENGTH_SHORT).show();
            break;
        case R.id.delete:
            Toast.makeText(this, "delete", Toast.LENGTH_SHORT).show();
            break;
        case R.id.settings:
            Toast.makeText(this, "settings", Toast.LENGTH_SHORT).show();
            break;
    }
    return true;
}

執行，如圖：

點選按鈕，會彈出相應的toast。