Toolbar不能實現你的需求？

QiuJay發表於2019-03-04

Toolbar 是 Google 在安卓 5.0(LOLLIPOP) 推出的一個控制元件，在安卓 3.0 時代 Google 推出了 ActionBar，而 Toolbar 完全是用來替代 ActionBar 的。既然叫 Toolbar，怎麼會不能實現某些需求？

使用

系統版本 >= 5.0

主題要繼承 @android:style/Theme.Material，這樣我們的 Activity 的標題欄預設都是 android.widget.Toolbar，如果需要在佈局中使用 Toolbar，那麼主題需要設定成 NoActionBar 樣式，並且程式碼中呼叫方法 setActionBar(android.widget.Toolbar)，如：

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_layout)
    Toolbar toolbar = findViewById(R.id.toolbar)
    setActionBar(toolbar)
}
複製程式碼

系統版本 < 5.0

前面說到過，Toolbar 是 5.0 才推出的一個控制元件，5.0 以下系統是無法使用的，而 Google 推出了向下相容庫v7-compat，使用android.support.v7.widget.Toolbar，使用步驟如下：

  1. 專案中引入 com.android.support:appcompat-v7:version-code
  2. 主題要繼承 Theme.AppCompat
  3. Activity 繼承 AppCompatActivity

這樣我們的 Activity 的標題欄預設都是 android.support.v7.widget.Toolbar，如果需要在佈局中使用 Toolbar，那麼主題需要設定成 NoActionBar 樣式，並且程式碼中呼叫方法 setSupportActionBar(android.support.v7.widget.Toolbar)，如：

protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_layout)
    Toolbar toolbar = findViewById(R.id.toolbar)
    setSupportActionBar(toolbar)
}
複製程式碼

下面列舉不同需求場景的實現方式

標題居中

獲取 Toolbar 中的第一個子 View，重置 LayoutParams，示例：

protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    Toolbar toolbar = findViewById(R.id.toolbar);
    View titleView = toolbar.getChildAt(0);

    Toolbar.LayoutParams layoutParams = new Toolbar.LayoutParams
    (Toolbar.LayoutParams.WRAP_CONTENT,
                    Toolbar.LayoutParams.WRAP_CONTENT, Gravity.CENTER);
    titleView.setLayoutParams(layoutParams);
}
複製程式碼

上面程式碼是將 Toolbar 元件內嵌顯示標題的 TextView 重置 LayoutParams，當然也可直接呼叫 Toolbar.addView(View) 方法，新增自己建立的控制元件來顯示標題。如果是在佈局中使用了 Toolbar，也可以直接在佈局中為 Toolbar 標籤中新增一個顯示標題控制元件，然後實現居中。

友情提醒：假如不用 Toolbar 元件內嵌顯示標題的 TextView 時，一定要呼叫 ActionBar.setDisplayShowTitleEnabled(false) 方法禁止顯示標題。

更改標題字型大小和顏色

此需求主要是會對使用 Toolbar 元件預設顯示標題的方式時解決辦法

程式碼設定

// 更改顏色
Toolbar.setTitleTextColor(@ColorInt int color)
// 更改顏色和大小
Toolbar.setTitleTextAppearance(Context context, @StyleRes int resId)
複製程式碼

主題設定

  • 系統版本 >= 6.0，主題採用 Theme.Material

    直接設定屬性android:titleTextColor，大小設定參考 系統版本 >= 5.0

  • 系統版本 >= 5.0，主題採用 Theme.Material

    直接設定屬性android:textColorPrimary可更改顏色，大小設定參考下面兩種情況

    主題採用非 NoActionBar 樣式

    設定屬性android:actionBarStyle，然後在定義的 actionBarStyle 樣式中定義屬性 android:titleTextStyle，此屬性為 TextAppearance，可定義字型大小與顏色

    主題採用 NoActionBar 樣式（佈局中使用 Toolbar ）

    設定屬性 android:toolbarStyle，，然後在字義的 toolbarStyle 樣式中定義屬性 android:titleTextAppearance，可定義字型大小與顏色

  • 系統版本 < 5.0，主題採用 Theme.AppCompat

    目前開發需要兼顧低版本，所以實際開發中，上面說的兩種情況基本不會用到，所以採用此方式可以相容上面提到的方案

    主題採用非 NoActionBar 樣式

    設定屬性actionBarStyle，然後在定義的 actionBarStyle 樣式中定義屬性 titleTextStyle，此屬性為 TextAppearance，可定義字型大小與顏色

    主題採用 NoActionBar 樣式（佈局中使用 Toolbar ）

    設定屬性 toolbarStyle，，然後在定義的 toolbarStyle 樣式中定義屬性 titleTextAppearance，可定義字型大小與顏色

新增其它 View 並居中

請參考文章開頭提到的 標題居中 處理方案

返回按鈕

顯示返回圖示

程式碼呼叫方法 ActionBar.setDisplayHomeAsUpEnabled(true)

ActionBar.setDisplayHomeAsUpEnabled(true);
複製程式碼

更改返回圖示

呼叫ActionBar.setDisplayHomeAsUpEnabled(true)方法後預設顯示的圖示如下圖撥所示：

Toolbar不能實現你的需求？

程式碼呼叫Toolbar.setNavigationIcon()方法自定義 icon，主題中設定屬性homeAsUpIndicator

監聽返回按鈕點選事件

直接上程式碼：

toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        // onBackPress()
    }
});
複製程式碼

或者

//重寫 Activity 方法
@Override
public boolean onOptionsItemSelected(MenuItem item) {
    if (item.getItemId() == android.R.id.home) {
        // onBackPress()
        return true;
    }
    return super.onOptionsItemSelected(item);
}
複製程式碼

佈局中使用，設定屬性navigationIcon

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        app:navigationIcon="@drawable/ic_close_black_24dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
複製程式碼

右上角新增操作按鈕

此場景依然可以參考場景 標題居中 中新增自定義 View 的方式，只是將方向改為 right 即可，這裡不重點講解，下面主要講解一種優雅的方式

不管是圖示按鈕還是文字按鈕，都可以通過給 Activity 設定 menu 實現，這裡就不講解 menu 的使用，這裡主要講解當按鈕是純文字時的樣式修改（圖示按鈕能用）

主題中設定屬性actionButtonStyle即可定製外觀樣式，如果只是想修改文字顏色，設定屬性actionMenuTextColor即可，如果還要設定文字大小，找屬性actionMenuTextAppearance進行設定。

修改 OverflowButton 樣式

首先普及下 OverflowButton 是啥玩意，當我們使用 action menu 時，點選展開更多選項的那個按鈕，如下圖 icon :

Toolbar不能實現你的需求？

見到這熟悉的三個黑點，是不是瞬間知道是什麼東西了。那麼怎麼更改這個圖示了？依然設定主題，設定屬性actionOverflowButtonStyle就可以更換你們設計師所設計的圖示了。

高度

相應大家都發現 Toolbar 預設的高度(56dp)並不是我們們設計師所設計的尺寸(88px)，老規矩，設定主題樣式，屬性actionBarSize

結語

至此，雖然此文章並非把所有有關 Toolbar 的樣式設定都有講到，但基本列舉出了開發中一些常用的需求場景，如果你還有其它設計需求不知道怎麼實現或沒找到實現方式，歡迎大家留言一起探討。最後奉上一張圖：

Toolbar不能實現你的需求？

相關文章