Android Material Design 系列之 Toolbar 使用詳解

前言

在 2014 年 Google IO 大會上，Google 推出了一套全新的設計規範 Material Design,這也爲廣大的 Android 開發者帶來了福音，不用像以前一樣照着 IOS 視覺稿來開發 Android APP，Material Design 的視覺風格本身就比較炫酷。

而 Google 也爲我們提供符合 Material Design 風格的一系列組件，這大大的提高了我們的開發效率。由於 APP 改版在做 Material Design 化，所以後面會結合項目中的使用情況寫幾篇關於 Material Design 組件的文章，第一篇就從 Toolbar 開始吧。

一、ToolBar 介紹

Toolbar 是 Android5.0 中新引入的一個控件，其出現的目的就是爲了取代 ActionBar。

而 Actionbar 在顯示上應該算是應用 UI 的一部分，但是開發者又不能對其進行完全控制，因爲它畢竟是由系統創建並對其進行相關參數的初始化。所以在實際開發中，很多開發者都是用佈局生成一個模擬的 Actionbar 來代替系統的 Actionbar，基於這一點，Android 在 5.0 後推出一個新的控件 Toolbar 來取代 ActionBar。

二、ToolBar 屬性

整理 Toolbar 比較常用的屬性

1、toolbar:navigationIcon 設置 navigation button

2、toolbar:logo 設置 logo 圖標

3、toolbar:title 設置標題

4、toolbar:titleTextColor 設置標題文字顏色

5、toolbar:subtitle 設置副標題

6、toolbar:subtitleTextColor 設置副標題文字顏色

7、toolbar:titleTextAppearance 設置 title text 相關屬性，如：字體,顏色，大小等等

8、toolbar:subtitleTextAppearance 設置 subtitle text 相關屬性，如：字體,顏色，大小等等

9、toolbar:logoDescription logo 描述

10、android:background Toolbar 背景

11、android:theme 主題

三、ToolBar 使用

本文是以最新的 androidx 環境下講解，其實使用一模一樣，就是包名有所變化。

• 使用 ToolBar 確保 Activity 繼承的是 AppCompatActivity，

• 在應用清單中，將 application 元素設置爲使用 appcompat 的其中一個 NoActionBar 主題。使用這些主題中的一個可以防止應用使用原生 ActionBar 類提供應用欄。

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

xml 佈局文件中添加 Toolbar 控件

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:layout_scrollFlags="scroll|enterAlways"
    app:subtitleTextColor="#FFF"
    app:titleTextColor="#FFF"
    tools:ignore="MissingConstraints" />

Activity 中初始化 Toolbar 相關屬性

// 設置ToolBar標題
toolbar.setTitle("ToolBar");
// 設置ToolBar副標題
toolbar.setSubtitle("this is toolbar");
// 設置navigation button
toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_baseline_arrow_back_24,null));
// 設置Logo圖標
toolbar.setLogo(getResources().getDrawable(R.drawable.ic_baseline_group_24,null));
// 設置溢出菜單的圖標
toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.ic_baseline_more_vert_24,null));
// 設置Menu
toolbar.inflateMenu(R.menu.toolbar_menu);

// 設置Navigation Button監聽
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        finish();
    }
});

// 設置Menu監聽
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {

        switch (item.getItemId()) {
            case R.id.collect:
                Toast.makeText(ToolBarActivity.this, "收藏", Toast.LENGTH_SHORT).show();
                break;
            case R.id.outLogin:
                Toast.makeText(ToolBarActivity.this, "退出登錄", Toast.LENGTH_SHORT).show();
                break;
            case R.id.appModel:
                Toast.makeText(ToolBarActivity.this, "夜間模式", Toast.LENGTH_SHORT).show();
                break;
        }
        return false;
    }
});

以上代碼都是 Toolbar 的基礎設置，這裏附上 Menu 的佈局文件

<?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/outLogin"
        android:title="退出登錄" />
    <item
        android:id="@+id/appModel"
        android:title="夜間模式" />

    <item
        android:id="@+id/collect"
        android:icon="@drawable/ic_baseline_stars_24"
        android:title="收藏"
        app:showAsAction="ifRoom" />
</menu>

menu 文件中我們設置了 3 個 item，但是根據上面圖片看到，彈出氣泡只顯示 2 個，收藏按鈕是以圖片形式展示的。

所以需要注意的是：app:showAsAction 屬性 ，這個屬性是設置菜單該顯示方式，取值有 5 種，主要應用的有 ifRoom、never、always 這三種，

• ifRoom 表示 如果 Toolbar 上有顯示空間就顯示在 Toolbar 上，如果沒有空間就展示在溢出菜單裏；
• never 表是總是顯示在溢出菜單裏；
• always 表示總是顯示在 Toolbar 上；

四、ToolBar 案例

根據以上學習，我們實現一個開發中常見的效果：

<androidx.appcompat.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="?attr/actionBarSize"
    android:background="?attr/colorPrimary"
    app:contentInsetStartWithNavigation="0dp"
    app:subtitleTextColor="#FFF"
    app:titleTextColor="#FFF"
    tools:ignore="MissingConstraints">

    <EditText
        android:textSize="14dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/shape_toolbar"
        android:hint="請輸入搜索關鍵字"
        android:padding="5dp" />
</androidx.appcompat.widget.Toolbar>

toolbar.setNavigationIcon(getResources().getDrawable(R.drawable.ic_baseline_arrow_back_24, null));
toolbar.inflateMenu(R.menu.toolbar_case_menu);

注意：默認 NavigationIcon 和 Title 之間有一定間距，要想清除這個間距，很簡單，只需要在 Toolbar 屬性里加上一行：

app:contentInsetStartWithNavigation="0dp"

五、總結

Material Design 風格的控件，本人特別喜歡，感覺 android UI 界面現在越來越漂亮，很多朋友項目都已經重構，選擇 Material Design 風格控件，希望本文對 android 初學者有所幫助，一起共勉！

歡迎點評，誠邀Android程序員加入微信交流羣，加我微信備註拉你入羣：Jaynm888