前言

在 2014 年 Google IO 大會(huì)上，Google 推出了一套全新的設(shè)計(jì)規(guī)范 Material Design，這也為廣大的 Android 開發(fā)者帶來了福音，不用像以前一樣照著 IOS 視覺稿來開發(fā) Android APP，Material Design 的視覺風(fēng)格本身就比較炫酷。

而 Google 也為我們提供符合 Material Design 風(fēng)格的一系列組件，這大大的提高了我們的開發(fā)效率。由于 APP 改版在做 Material Design 化，所以后面會(huì)結(jié)合項(xiàng)目中的使用情況寫幾篇關(guān)于 Material Design 組件的文章，第一篇就從 Toolbar 開始吧。

一、ToolBar 介紹

Toolbar 是 Android5.0 中新引入的一個(gè)控件，其出現(xiàn)的目的就是為了取代 ActionBar。

而 Actionbar 在顯示上應(yīng)該算是應(yīng)用 UI 的一部分，但是開發(fā)者又不能對(duì)其進(jìn)行完全控制，因?yàn)樗吘故怯上到y(tǒng)創(chuàng)建并對(duì)其進(jìn)行相關(guān)參數(shù)的初始化。所以在實(shí)際開發(fā)中，很多開發(fā)者都是用布局生成一個(gè)模擬的 Actionbar 來代替系統(tǒng)的 Actionbar，基于這一點(diǎn)，Android 在 5.0 后推出一個(gè)新的控件 Toolbar 來取代 ActionBar。

image

二、ToolBar 屬性

整理 Toolbar 比較常用的屬性

1、toolbar:navigationIcon 設(shè)置 navigation button

2、toolbar:logo 設(shè)置 logo 圖標(biāo)

3、toolbar:title 設(shè)置標(biāo)題

4、toolbar:titleTextColor 設(shè)置標(biāo)題文字顏色

5、toolbar:subtitle 設(shè)置副標(biāo)題

6、toolbar:subtitleTextColor 設(shè)置副標(biāo)題文字顏色

7、toolbar:titleTextAppearance 設(shè)置 title text 相關(guān)屬性，如：字體,顏色，大小等等

8、toolbar:subtitleTextAppearance 設(shè)置 subtitle text 相關(guān)屬性，如：字體,顏色，大小等等

9、toolbar:logoDescription logo 描述

10、android:background Toolbar 背景

11、android:theme 主題

三、ToolBar 使用

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

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

• 在應(yīng)用清單中，將 application 元素設(shè)置為使用 appcompat 的其中一個(gè) NoActionBar 主題。使用這些主題中的一個(gè)可以防止應(yīng)用使用原生 ActionBar 類提供應(yīng)用欄。

  <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 相關(guān)屬性

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

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

      // 設(shè)置Menu監(jiān)聽
    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 的基礎(chǔ)設(shè)置，這里附上 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 文件中我們?cè)O(shè)置了 3 個(gè) item，但是根據(jù)上面圖片看到，彈出氣泡只顯示 2 個(gè)，收藏按鈕是以圖片形式展示的。

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

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

四、ToolBar 案例

根據(jù)以上學(xué)習(xí)，我們實(shí)現(xiàn)一個(gè)開發(fā)中常見的效果：

image

      <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="請(qǐng)輸入搜索關(guān)鍵字"
    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);

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

<pre data-tool="mdnice編輯器" style="margin: 10px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; border-radius: 5px; box-shadow: rgba(0, 0, 0, 0.54902) 0px 2px 10px;">app:contentInsetStartWithNavigation="0dp" </pre>

五、總結(jié)

Material Design 風(fēng)格的控件，本人特別喜歡，感覺 android UI 界面現(xiàn)在越來越漂亮，很多朋友項(xiàng)目都已經(jīng)重構(gòu)，選擇 Material Design 風(fēng)格控件，希望本文對(duì) android 初學(xué)者有所幫助，一起共勉！