Android Jetpack之AppCompat - Actionbar篇

今天我們來聊一聊有關AppCompat，作為Android Jetpack系列文章的開篇。說到Android Jetpack，我們先看一下這張圖：

從圖中我們可以看到，整個Android Jetpack分為了四大部分，而我們今天要講述的就是Foundation中的AppCompat小節，官方將該部分翻譯為“基礎”。
Google官方網站：
https://developer.android.com/jetpack
按照Google官方的描述，AppCompat就是指v7 appcompat庫。

“This library adds support for the Action Bar user interface design pattern. This library includes support for material design user interface implementations.”

意思是：此庫添加了對操作欄用戶界面設計模式的支持。這個庫包括對Material Design用戶界面實現的支持。也就是說，我們可以借助該庫，對Material Design有更便捷和兼容性更好的實現。
進入AppCompat章節后，我們發現它又被分為了4個部分，這4個部分被稱為“key class”，也就是重點類，它們分別是：

• ActionBar：提供Actionbar用戶界面模式的實現；
• AppCompatActivity：添加可用作使用支持庫操作欄實現的Activity的基類；
• AppCompatDialog：添加一個可用作AppCompat主題的Dialog的基類;
• ShareActionProvider：添加對可包含在ActionBar中的標准化共享操作（如電子郵件或發布到社交應用程序）的支持。

想要使用這些類，我們需要添加v7支持庫。
到現在為止，支持庫的最新版本是28，添加的庫名稱和版本如下：

com.android.support:appcompat-v7:28.0.0

今天我們就先來聊一聊ActionBar，也是這里面最為復雜的一個部分。
依稀記得，伴隨着Google I/O 2014的召開，早在Android 5.0的時代，Google 官方推出了ToolBar組件，在那之后，ToolBar就登上了歷史舞台，扮演着重要的角色。之前我在CSDN上面也發表過相關主題的文章，因為發布的時機剛好是ToolBar登場之際，所以獲得了很多的閱讀量。快5年過去了，回頭再看那幾篇連載，感覺文筆很是稚嫩。今天借着講述Jetpack，再次聊聊ToolBar那些事，相信你我都會有新的收獲。

首先解決疑問：

1. 問：既然有了ActionBar，為何還要用ToolBar？ 答：使用AppCompat Toolbar能兼容更廣泛的設備（ActionBar要求最低Android 3.0，ToolBar要求最低Android 2.1，但只有Android 5.0及以上才能在不使用AppCompat兼容包的前提下支持Material Design），以及各式各樣的自定義需求。

2. 問：ToolBar上面都應該包含哪些內容？ 答：根據Google的指導，應用欄區域應具備以下要素：1）一個專用區域，可以標識您的應用並指示用戶在應用中的位置；2）以可預測的方式訪問搜索等重要操作；3）支持導航和視圖切換（通過標簽頁或下拉列表）。

一、添加ToolBar
想要添加一個ToolBar，總共3步走：
1. 更改application主題樣式，操作對象：styles.xml。
對於新建的Android項目，AndroidManifest.xml中已經定義了所使用的theme，即：

android:theme="@style/AppTheme"

此時，我們修改styles.xml文件即可，將默認的繼承值改掉，如下所示：

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">

2. 在Activity布局中添加ToolBar，操作對象：layout布局文件

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

對高度掌握不好火候的同學，直接如上使用ActionBar的高度就可以了。
android:evevation指“仰角”，這部分知識請參考：
https://developer.android.com/training/material/shadows-clipping
這里就不再贅述了。
如果你的項目已經遷移到Android X，你的布局文件代碼片應該是：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/activity_main_tb"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    android:elevation="4dp"
    android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
    app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />

3. 在Activity類中找到ToolBar，並應用它，操作對象：Activity類
這一步並不復雜，參考普通的Android控件。類似地，我們通過findViewById()找到ToolBar，並做執行一些設定，即可完成該步驟，示例如下：

private Toolbar topTb;
topTb = findViewById(R.id.activity_main_tb);        
setSupportActionBar(topTb);

一旦我們setSupportActionBar()后，日后我們就可以通過getSupportActionBar()方法來獲取ToolBar實例，也可以使用兼容包提供的ActionBar的各種API方法了。
到此，我們就完成了ToolBar的添加，還算簡單吧？

二、ToolBar外觀的自定義
不出意外的話，我們運行的結果將會和下圖類似：

大綠底，大黑字，實在不怎么好看。
那么，如果我們想要自定義配色方案，該如何做呢？參考下圖：

這些值我們都可以在color.xml中定義，並在styles.xml中引用。下圖是一個重新定義配色方案后的截圖：

相關的代碼片：
color.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#002FA7</color>
    <color name="colorPrimaryDark">#001F67</color>
    <color name="colorAccent">#003FB7</color>
    <color name="textColorPrimary">#FFFFFF</color>
</resources>

styles.xml

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:textColorPrimary">@color/textColorPrimary</item>
</style>

細心的讀者會發現，后面的截圖中，右上角多了菜單項，這又是如何實現的呢？我們繼續往后看。

三、給ToolBar增加動作
首先我們來看看如何給ToolBar增加菜單，我們依然分為3步完成。
1. 編寫菜單xml文件，操作對象：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/menu_main_info"
        android:title="@string/menu_main_activity_info"
        app:showAsAction="never" />

    <item
        android:id="@+id/menu_main_search"
        android:title="@string/menu_main_activity_search"
        app:actionViewClass="android.support.v7.widget.SearchView"
        app:showAsAction="always" />
</menu>

如上，我們可以看到有兩個item，分別對應Info和搜索，我們使用"app:showAsAction"的值來控制這個菜單是否顯示，常見的值有always，ifRoom，never。從字面上也很好理解，這里就不多解釋了。

2. 接下來是Java代碼片段：

private SearchView tbSearchSv;

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_activity_menu, menu);
    MenuItem searchItem = menu.findItem(R.id.menu_main_search);
    tbSearchSv = (SearchView) searchItem.getActionView();
    return super.onCreateOptionsMenu(menu);
}

細心的朋友會發現有這一行：

app:actionViewClass="android.support.v7.widget.SearchView"

它是做什么的呢？

對了！它就是搜索欄，是原生的搜索欄。所以某些情況下，這個搜索欄是不用自己去實現的，系統已經給我們提供了SearchView！
典型的APP：網易雲音樂、知乎上方的搜索都是這樣的。

3. 為菜單設置監聽器，我們先來看最普通的Info按鈕，我們只需在Java代碼中Override指定的方法就可以了，如下所示：

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case R.id.menu_main_info:
            Toast.makeText(MainActivity.this, R.string.menu_main_activity_info, Toast.LENGTH_LONG).show();
            break;
    }
    return super.onOptionsItemSelected(item);
}

對於搜索欄，首先我們想到的是，如何獲取用戶輸入的內容呢？
其實很簡單，玄機在於SearchView，只需對SearchView添加監聽器就可以了。

tbSearchSv.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
    @Override
    public boolean onQueryTextSubmit(String s) {
        
        return false;
    }

    @Override
    public boolean onQueryTextChange(String s) {
        
        return false;
    }
});

這里要注意，設置監聽器前，要確保SearchView（這里的tbSearchSv）已經被實例化，否則，會出現空指針異常崩潰。
關於SearchView，還有一寫額外的設置，比如：

// 設置提交按鈕是否可見（默認不可見）
tbSearchSv.setSubmitButtonEnabled(true);

// 設置左側是否顯示搜索圖標（默認不可見）
tbSearchSv.setIconifiedByDefault(false);

更多可使用的API請參考官方文檔：
https://developer.android.google.cn/reference/android/widget/SearchView

不過，我們這里還需要做最后一點善后。如果你是一路下來照着本篇文章敲代碼的話，在搜索框打開的情況下按一下返回鍵，你期待的是什么？是不是取消搜索操作，停留在當前界面？然而實際上是……退出了APP。
所以我們這里要對返回鍵的默認動作做一個“攔截”，具體可參考如下代碼片：

@Override
public boolean onKeyUp(int keyCode, KeyEvent event) {
    switch (keyCode) {
        case KeyEvent.KEYCODE_BACK:
            if (!tbSearchSv.isIconified()) {
                tbSearchSv.setIconified(true);
                return true;
            }
            break;
    }
    return super.onKeyUp(keyCode, event);
}

這里SearchView的isIconfied()方法可以返回當前的SearchView展開狀態。

四、返回上一層

ToolBar還有一個比較常見的功能就是左上角的返回按鈕，提供返回上一層操作，很多的APP開發者都習慣於自定義一個ImageButton或類似的空間，然后使用美工提供的圖像素材，設置監聽器，寫Selector……一套下來，費時費力。
其實Google已經為開發者提供了現成的非常易用的返回邏輯處理。要實現這些處理，兩步就搞定了。

1. 在ToolBar對象上啟用返回鈕

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

這里注意，雖然之前將ToolBar通過setSupportActionBar()方式當做參數被set了一次，但是ToolBar類本身並不提供setDisplayHomeAsUpEnabled()方法，因此，我們還需要getSupportActionBar()，先獲取ActionBar對象，然后使用該對象，而不是直接使用ToolBar對象。

2. 在AndroidManifest.xml中定義要跳轉的Activity
如題，我們在AndroidManifest.xml中，對子Activity做處理，這里不要忘記兼容低版本的系統。

<activity
    android:name=".MainActivity"
    android:parentActivityName=".SecondActivity">
    <!-- 兼容 Android4.0 及以下版本-->
    <meta-data
        android:name="android.support.PARENT_ACTIVITY"
        android:value=".SecondActivity" />
</activity>

將SecondActivity改為入口Activity，然后重新運行程序，將實現如下效果：

到此，關於ToolBar常見用法的梳理告一段落。源碼請自取：
https://github.com/wh1990xiao2005/JetpackDemo

我會在接下來的文章中，和大家分享關於ToolBar的剩余內容，以及AppCompat兼容包中的其他知識，希望對你我都有幫助。
共勉！