Material Design 之 Toolbar 開發(fā)實踐總結(jié)

在2014年Google IO 大會上，Google 推出了一套全新的設(shè)計規(guī)范Material Design,這也為廣大的Android 開發(fā)者帶來了福音，不用像以前一樣照著IOS 視覺稿來開發(fā)Android APP，Material Design 的視覺風(fēng)格本身就比較炫酷。請看Material Design 中文版，而Google 也為我們提供符合Material Design 風(fēng)格的一系列組件，這大大的提高了我們的開發(fā)效率。由于APP改版在做Material Design 化，所以后面會結(jié)合項目中的使用情況寫幾篇關(guān)于Material Design 組件的文章。第一篇就從 Toolbar開始吧。

一、 認(rèn)識Toolbar

官方原話：A Toolbar is a generalization of action bars
for use within application layouts. 意思就是 Toolbar 是應(yīng)用內(nèi)的action bars 的一個歸納。好像有點(diǎn)難懂，看不懂這句話沒關(guān)系，我們只要知道，Toolbar 使用來替代原來的ActionBar 的就行了。我們來看一下Toolbar的類繼承關(guān)系，如下圖：

toolbar_class.png

從繼承關(guān)系可以看出，繼承的是ViewGroup,也就是說Toolbar 是一個ViewGroup 容器，知道了這一點(diǎn)對于后面的理解就比較容易了。那么接下來我們看一下這個容器里面有些什么東西，還是看一下官方文檔：


toolbar.png

文檔說得很清楚，一個Toolbar 從左到右包括了 一個navigation button、一個logo、一個title和subtitle、一個或多個自定義的View和一個 action menu 這5部分。也就是這個ViewGroup 容器里面包含了這五部分內(nèi)容，對應(yīng)著一個界面看一下：

toolbar_5.1.png
toolbar_5.png

上面的圖就是一個Toolbar 容器從左到右的五部分內(nèi)容，當(dāng)然了，我們要為它設(shè)置相應(yīng)的內(nèi)容才行（比如：設(shè)置了nacigation button才會顯示，不設(shè)置是不會顯示出來的），否則它就只是一個空的ViewGroup，好了，到此我們就了解了一個Toolbar 是什么樣子的。那么下面我們看一下該怎么使用Toolbar。

二、Toolbar 的使用

首先看一下Toolbar 有哪些比較常用和重要的方法
XML中的常用屬性(注意開頭是自定義命名空間 xmlns:toolbar="http://schemas.android.com/apk/res-auto", 而不是 android,如果使用android:navigationIcon這種事無效的，必須使用 toolbar:navigationIcon)：

  • toolbar:navigationIcon 設(shè)置navigation button

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

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

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

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

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

  • toolbar:popupTheme Reference to a theme that should be used to inflate popups shown by widgets in the toolbar.

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

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

  • toolbar:logoDescription logo 描述

  • android:background Toolbar 背景

  • android:theme 主題

以上就是Toolbar比較常用的 XML 中的屬性，這些屬性也可以在代碼中設(shè)置，代碼如下：

        //設(shè)置NavigationIcon
        toolbar.setNavigationIcon(R.drawable.ic_book_list);
        // 設(shè)置navigation button 點(diǎn)擊事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        // 設(shè)置 toolbar 背景色
        toolbar.setBackgroundColor(getResources().getColor(R.color.colorPrimary));
        // 設(shè)置 Title
        toolbar.setTitle(R.string.toolbar_title);
        //  設(shè)置Toolbar title文字顏色
        toolbar.setTitleTextColor(getResources().getColor(R.color.white));
        // 設(shè)置Toolbar subTitle
        toolbar.setSubtitle(R.string.sub_title);

        toolbar.setSubtitleTextColor(getResources().getColor(R.color.white));
        // 設(shè)置logo
        toolbar.setLogo(R.mipmap.ic_launcher);
        // 設(shè)置 NavigationIcon 點(diǎn)擊事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        //設(shè)置 Toolbar menu
        toolbar.inflateMenu(R.menu.setting_menu);
        // 設(shè)置溢出菜單的圖標(biāo)
        toolbar.setOverflowIcon(getResources().getDrawable(R.drawable.abc_ic_menu_moreoverflow_mtrl_alpha));
        // 設(shè)置menu item 點(diǎn)擊事件
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()){
                    case R.id.item_setting:
                        //點(diǎn)擊設(shè)置
                        break;
                }
                return false;
            }
        });

** 以下步驟說明如何為一個Activity 添加 Toolbar**
1, 在gradle 中添加 v7 appcompat 支持庫

compile 'com.android.support:appcompat-v7:24.2.1'

2,確保你的Activity 是繼承的AppCompatActivity

public class ToolbarActivity extends AppCompatActivity{
 //...
}

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

<application    android:theme="@style/Theme.AppCompat.Light.NoActionBar"    />

當(dāng)然了，也可以不在application 節(jié)點(diǎn)，也可以在<activity> 節(jié)點(diǎn)設(shè)置主題，如果每個activity 都是一樣的主題，可以設(shè)置在application。主題選擇任意一個 appCompat NoActionBar 主題或則他們的子主題（比如自定義的主題，parent為appCompat 的 NoActionBar）

4，在 Activity 的布局文件中添加toolbar

 <android.support.v7.widget.Toolbar
      android:id="@+id/tool_bar_2"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      toolbar:navigationIcon="@drawable/ic_book_list"
      toolbar:title="@string/toolbar_title"
      toolbar:titleTextColor="@color/white"
      toolbar:theme="@style/ToolbarTheme"
      toolbar:popupTheme="@style/ThemeOverlay.AppCompat.Light"
      >
  </android.support.v7.widget.Toolbar>

5,在Activity 中對 Toolbar 做一些相關(guān)的操作，如：設(shè)置標(biāo)題，設(shè)置navigation button 點(diǎn)擊事件，添加溢出菜單

 private void initToolbar(){
       Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar_2);
       toolbar.setNavigationOnClickListener(new View.OnClickListener() {
           @Override
           public void onClick(View v) {
               finish();
           }
       });
       //添加溢出菜單
       toolbar.inflateMenu(R.menu.setting_menu);
       // 添加菜單點(diǎn)擊事件
       toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
           @Override
           public boolean onMenuItemClick(MenuItem item) {
               switch (item.getItemId()){
                   case R.id.item_setting:
                       //點(diǎn)擊設(shè)置菜單
                       break;
               }
               return false;
           }
       }); 

    }

6，溢出菜單文件如下：

<?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/item_collect"
           android:icon="@drawable/ic_favorite_more"
           android:title="收藏"
           app:showAsAction="ifRoom"
        />

   <item android:id="@+id/item_setting"
         android:title="設(shè)置選項"
         app:showAsAction="never"
         />
    <item android:id="@+id/item_model"
          android:title="夜間模式"
          app:showAsAction="never"
        />
</menu>

注意 app:showAsAction ，這個屬性是設(shè)置菜單該怎么顯示，取值有5種，主要應(yīng)用的有ifRoom、never、always 這三種， ifRoom 表示 如果Toolbar 上有顯示空間就顯示在Toolbar 上，如果沒有空間就展示在溢出菜單里，never 表是總是顯示在溢出菜單里，always 表示總是顯示在Toolbar 上。效果如下：

toolbar_menu1.png

點(diǎn)擊溢出菜單如下：


toolbar_menu2.png

** 以上就是 Toolbar 的基本使用**

三、項目中對Toolbar 的一些特殊需求

上面講了Toolbar 的基本使用方法，但是在實際的項目中可能這些還不夠，比如設(shè)計師覺得默認(rèn)菜單文字顏色不好，要換菜單文字的顏色。或者溢出菜單文字的大小不好，要換文字的大小?；蛘咝枰赥oolbar 上添加自定義View等等。下面就講一下項目中遇到的幾個特殊需求。PS：我個人覺得Google 默認(rèn)的文字字的顏色大小等等都是比較合適的，一般情況下不要去更改。但是有時候身不由己，產(chǎn)品、設(shè)計說了算。我們也就只有改了（無奈臉...)。

1，更改溢出菜單文字的顏色和文字的大小
默認(rèn)情況下，彈出的溢出菜單的文字的顏色是黑色的，如下：

toolbar_menu2.png

要更改溢出菜單文字的顏色，我們只需要為Toolbar 添加一個主題,在styles.xml 文件中添加一個主題：

 <style name="ToolbarTheme" parent="Theme.AppCompat.Light">
        <!-- 設(shè)置 toolbar 溢出菜單的文字的顏色 -->
      <item name="android:textColor">@android:color/holo_red_dark</item> 
    </style>

效果如下：

overmenu1.png

看到其他的一些技術(shù)文章說的改變溢出菜單的文字顏色添加actionMenuTextColor 屬性，其實不是的，這個屬性是控制顯示在Toolbar 上的菜單的文字顏色，后面會說到。
改變溢出菜單文字的大小,在style 中添加如下代碼：

  <!-- 設(shè)置toolbar 溢出菜單的字體大小-->
  <item name="android:textSize">25sp</item>

效果如下：

overmenu2.png

2，** 更改顯示在Toolbar 上的菜單文字顏色**
更改顯示在Toolbar 上菜單文字的顏色才是用上提到的那個屬性actionMenuTextColor，注意，不要搞混淆了。顯示在Toobar上的菜單默認(rèn)文字是黑色的，如下圖：

toolbar_menu12.png

如上圖所示：顯示在Toolbar 上的 發(fā)布 菜單，默認(rèn)顯示是黑色，設(shè)計師肯定不干了，要你更改顏色。在 style 中添加如下代碼：

 <!-- 設(shè)置 顯示在toobar上菜單文字的顏色 -->
 <item name="actionMenuTextColor">@android:color/white</item>

特別注意，前面是沒有android: 前綴的 ，有android: 前綴是沒有效果的。最后，更改顏色后如下圖：

toolbar_menu13.png

** 順便提一下，改變顯示在Toolbar 上的菜單的文字大小和改變溢出菜單文字大小的方法一樣，都是android:textSize 這個屬性。**

最后，貼出Toolbar 主題的全部代碼：

 <style name="ToolbarTheme" parent="Theme.AppCompat.Light">
        <!-- 更換Toolbar OVerFlow menu icon -->
      <item name="actionOverflowButtonStyle">@style/OverFlowIcon</item>
        <!-- 設(shè)置 toolbar 溢出菜單的文字的顏色 -->
      <item name="android:textColor">@android:color/holo_red_dark</item>
        <!-- 設(shè)置 顯示在toobar上菜單文字的顏色 -->
      <item name="actionMenuTextColor">@android:color/white</item>
        <!-- 設(shè)置toolbar 彈出菜單的字體大小和溢出菜單文字大小-->
      <item name="android:textSize">15sp</item>
    </style>

    <style name="OverFlowIcon" parent="Widget.AppCompat.ActionButton.Overflow">
        <item name="android:src">@drawable/abc_ic_menu_moreoverflow_mtrl_alpha</item>
    </style>

最后，別忘了在Toolbar 的xml 文件中應(yīng)用主題：

 <android.support.v7.widget.Toolbar
      android:id="@+id/tool_bar"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      toolbar:navigationIcon="@mipmap/navigation_back_white"
      toolbar:title="@string/toolbar_title"
      toolbar:titleTextColor="@color/white"
      android:theme="@style/ToolbarTheme"
      >

  </android.support.v7.widget.Toolbar>

3,** 在Toolbar 上添加 自定義View **
這種需求很常見，如：很多 APP 里都有搜索功能，在Toolbar 上添加一個搜索框，如網(wǎng)易云音樂的搜索界面：

toolbar_search.png

像上面的搜索 Toolbar 也很簡單，前文已經(jīng)提到過，在Toolbar 中添加View就可以了，代碼如下：

<android.support.v7.widget.Toolbar
      android:id="@+id/tool_bar_4"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:background="@color/colorPrimary"
      android:visibility="gone"
      toolbar:navigationIcon="@mipmap/navigation_back_white"
      toolbar:theme="@style/ToolbarTheme"
      >
      <!-- ToolBar 中添加一個 編輯框 -->
      <EditText
          android:id="@+id/edit_search"
          android:layout_width="match_parent"
          android:layout_height="match_parent"/>
  </android.support.v7.widget.Toolbar>

然后，在代碼中得到這個編輯框的內(nèi)容：

  private void initToolbar(){
        mToolbar3 = (Toolbar) findViewById(R.id.tool_bar_4);
        mToolbar3.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                finish();
            }
        });
        mToolbar3.inflateMenu(R.menu.menu_search);
        
        mToolbar3.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                if(item.getItemId() == R.id.item_search){
                    // do search 
                }
                return false;
            }
        });
        // 獲取ToolBar 上的編輯框
        EditText searchEdit = (EditText) mToolbar3.findViewById(R.id.edit_search);
        // 獲取內(nèi)容
        String content = searchEdit.getText().toString();
    }

效果如下：

toolbar_search2.png

很容易就可以做出一個搜索界面，以上只是舉例，Toolbar 中添加自定義View的場景還是很多的，只要知道是在Toolbar 里面添加View ，不管什么樣的需求都沒什么困難的。

** Demo 源碼請看GithubMaterialDesignSamples**

** 好了，以上就是 Toolbar 在項目中的使用和總結(jié)，水平有限，難免會有錯誤，如有什么問題，歡迎留言大家一起探討。**

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,716評論 25贊 709
  • 一、Toolbar 出現(xiàn)的背景 Toolbar 是 Android5.0 中新引入的一個控件，其出現(xiàn)的目的就是為了...
    秀花123閱讀 2,313評論 2贊 16
  • 內(nèi)容抽屜菜單ListViewWebViewSwitchButton按鈕點(diǎn)贊按鈕進(jìn)度條TabLayout圖標(biāo)下拉刷新...
    皇小弟閱讀 47,133評論 22贊 665
  • ￥開啟￥ 【iAPP實現(xiàn)進(jìn)入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程，因...
    小菜c閱讀 7,294評論 0贊 17
  • 倆閨蜜聊天， 姐說和老公生氣，妹說為啥??？ 因為我花錢，妹說你不對人家掙錢多不容易，不能隨便花，知道嗎？ 姐說，我...
    遇見Qin閱讀 298評論 0贊 0

友情鏈接更多精彩內(nèi)容