Android ToolBar 使用完全解析

lvxiangan發表於2018-08-14

在API21之前我們使用標題欄基本都是在ActionBarActivity的Activity中處理的，而API21之後，谷歌遺棄了ActionBarActivity，推薦使用AppCompatActivity。

一、ToolBar簡介

ToolBar是Android 5.0推出的一個新的導航控制元件用於取代之前的ActionBar，由於其高度的可定製性、靈活性、具有Material Design風格等優點，越來越多的應用也用上了ToolBar，比如常用的知乎軟體其頂部導航欄正是使用ToolBar。官方考慮到仍有一部分使用者的手機版本號低於5.0，所以，ToolBar也放進了support v7包內，使得低版本的系統也能使用上ToolBar。本文將使用support v7支援包的ToolBar來進行講解，包括其基本用法、樣式定製等知識點。

ToolBar的基本使用

引入support v7支援包

在你專案的build.gradle內輸入如下程式碼，即能引入支援包，該支援包內有能向下相容的ToolBar:

dependencies {    
      compile fileTree(dir: 'libs', include: ['*.jar'])    
      compile 'com.android.support:appcompat-v7:23.1.1'
}

更改主題

為了能夠正常使用ToolBar，我們需要隱藏原來的ActionBar，這個可以在主題中修改，在values/styles.xml中做出如下修改：

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

繼承了Theme.Appcompat.Light.NoActionBar主題，這裡提一下，這個Theme.AppCompat是支援包內的主題，對應著5.0版本的Theme.Material主題。然後在manifest檔案中引用這個主題。

在佈局檔案中建立這個控制元件，activity_main.xml檔案中，程式碼如下所示：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="標題"
            android:textSize="20sp"/>
    </android.support.v7.widget.Toolbar>
</FrameLayout>

在上面，建立了android.support.v7.widget.Toolbar，同時我們在內部放了一個TextView，這是與ActionBar最大的不同，因為ToolBar實際上是一個ViewGroup，支援在其內部放入子View。ok，我們執行程式，得到如下結果：

結果1.png

可以看出ToolBar正常顯示，當然了，這只是最簡單的用法，接下來我們逐步新增內容、樣式，使它看起開更加美，功能更加完善。

ToolBar的完善

一、首先我們考慮，改變ToolBar的顏色

要想改變toolbar的顏色很簡單，直接在佈局檔案中新增一個backgroud屬性指定顏色就可以了，但是為了全域性考慮，我們可以這樣：在values/styles.xml檔案中做出如下修改：

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">#2e8abb</item> <!--淺藍色-->
        <item name="colorPrimaryDark">#3A5FCD</item> <!--深藍色-->
    </style>
</resources>

然後在佈局檔案中，新增如下屬性：

android:background="?attr/colorPrimary"

這樣，就能方便對每一個toolbar引用同樣的顏色了，我們先看看現在的效果是怎樣的：

結果2.png

可以看到，顏色已經改變，同時我們注意到，頂部狀態列的顏色也變成了深藍色，這是因為新增了"colorPrimaryDark"的屬性，使得頂部狀態列隨之改變，利用這一特性，我們可以輕鬆實現“狀態列沉浸”的效果了。當然，這隻適用於Android 5.0以上，如果在低版本則這個屬性無效。這裡再附上一張圖（圖片來自http://blog.csdn.net/bbld_/article/details/41439715）：

樣式說明

根據圖中的說明，我們可以輕鬆地在styles.xml檔案中定製我們的樣式，如果想要改變toolbar的title、subtitle以及menu中文字的顏色，可以利用“textColorPrimary”屬性等。

二、新增title、subtitle、logo、導航欄圖示

在MainActivity檔案先獲取控制元件的例項，接著通過一系列的set方法即可設定，程式碼如下：

public class MainActivity extends AppCompatActivity {

    private Toolbar toolbar;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("Title");
        toolbar.setSubtitle("SubTitle");
        toolbar.setLogo(R.mipmap.ic_launcher);
        
        //設定導航圖示要在setSupportActionBar方法之後
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
    }

}

結果如下：

結果3.png

如果你想修改標題和子標題的字型大小、顏色等，可以呼叫 setTitleTextColor 、 setTitleTextAppearance 、 setSubtitleTextColor 、 setSubtitleTextAppearance 這些API。當然，這些設定都是支援在xml佈局中直接新增的，但是用的不是android:名稱空間，而是自定義名稱空間，如下所示：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
    ...>
    <android.support.v7.widget.Toolbar
        ...
        toolbar:logo="@mipmap/ic_launcher"
        toolbar:title="Title"
        toolbar:subtitle="Sub Title"
        toolbar:titleTextColor="#ffffff">
    </android.support.v7.widget.Toolbar>
</FrameLayout>

三、新增選單選項圖示及點選事件

1.新增選單選項圖示

一般導航條，在其右側都會有選單選項，當然ToolBar也是支援自定義選單的，首先我們在選單檔案中，修改如下：res/menu/menu_main.xml:

<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools" tools:context=".MainActivity">
    <item android:id="@+id/action_search"
        android:title="Search"
        android:icon="@mipmap/ic_search"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/action_notifications"
        android:title="notifications"
        android:icon="@mipmap/ic_notifications"
        app:showAsAction="ifRoom"/>
    <item android:id="@+id/action_settings"
        android:title="@string/action_settings"
        android:orderInCategory="100"
        android:icon="@mipmap/ic_launcher"
        app:showAsAction="never"/>
</menu>

這裡用了這樣一個熟悉：app:showAsAction="ifRoom"/"never"，app是自定義的名稱空間，因為我們的activity繼承的是AppCompatActivity，是support v7包的，並不是原生sdk內部的，因此不能使用android:showAsAction，否則會報錯。然後ifRoom表示有空間則顯示，never表示從不顯示，而是會通過overflowwindow顯示。
接著我們在Activity中，要重寫onCreateOptionsMenu()方法，把這個選單載入進去：

@Overridepublic boolean onCreateOptionsMenu(Menu menu) { 
       getMenuInflater().inflate(R.menu.menu_main, menu);   
       return true;
}

2.新增點選事件

選單有了，我們要為選單新增點選事件，這樣選單才會有實際用途,新增點選事件也很方便，可以這樣操作：

//設定導航圖示、新增選單點選事件要在setSupportActionBar方法之後
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);

        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                switch (item.getItemId()) {
                    case R.id.action_search:
                        Toast.makeText(MainActivity.this, "Search !", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_notifications:
                        Toast.makeText(MainActivity.this, "Notificationa !", Toast.LENGTH_SHORT).show();
                        break;
                    case R.id.action_settings:
                        Toast.makeText(MainActivity.this, "Settings !", Toast.LENGTH_SHORT).show();
                        break;
                }
                return true;
            }
        });

結果如下：

結果5.png

可以看到，選單選項圖示正常顯示，以及點選事件都正常觸發，但是還有一點瑕疵的地方，那就是右上角的三個圓點，是黑色的，與圖示格格不入，有沒有什麼辦法改變它呢？答案是有的，可以通過新增樣式改變，如下所示：

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        ...
        <item name="android:textColorSecondary">#ffffff</item>
    </style>
</resources>

"android:textColorSecondary"屬性對應的就是右上角三個圓點的顏色了。改變之後將會變成你要的顏色。

四、其他樣式修改

修改Toolbar popup menu樣式

我們先點選右上角的三個點，會彈出一個popup menu，如下所示：

結果6.png

可以看到右上角的popup menu是白底黑字，那麼有沒有什麼辦法改變它的背景顏色，使選單顯示為黑底白字呢呢？答案是有的，我們可以這樣設定：
首先在styles.xml檔案中，新建一個主題：

<!-- toolbar彈出選單樣式 -->
<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">   
     <item name="android:colorBackground">#000000</item>
</style>

可以看到這個主題的parent是直接繼承自ThemeOverlay.AppCompat.Dark，是支援包的一個主題，並且我們在內部宣告瞭“android:colorBackground”這個屬性，我們只要更改這個屬性就能變更選單的背景顏色了。接下來我們在佈局檔案中引入這個主題，這也很簡單，為toolbar新增額外的屬性如下：

toolbar:popupTheme="@style/ToolbarPopupTheme"

這樣，改幾行程式碼即可修改popup menu的背景顏色了，如下面所示：

結果7.png

修改Toolbar popup menu 彈出位置

我們可以看到，popup menu的位置是過於偏上的，我們還可以修改它的位置，使它處於Toolbar之下，這樣看起來可能更美觀：
修改styles.xml檔案如下：

<style name="ToolbarPopupTheme" parent="@style/ThemeOverlay.AppCompat.Dark">    
    <item name="android:colorBackground">#000000</item>    
    <item name="actionOverflowMenuStyle">@style/OverflowMenuStyle</item> <!--新增一個item，用於控制menu-->
</style>
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">   
     <item name="overlapAnchor">false</item>  <!--把該屬性改為false即可使menu位置位於toolbar之下-->
</style>

效果如下圖：

結果8.png

那麼到目前為止，對於toolbar的相關使用意見講述完畢，可以看出toolbar的靈活性很高，能自定義很多樣式，我們平常開發也會遇到各種不同的樣式，因此toolbar用於取代actionbar是非常合適的。以後如果還有遇到別的樣式，我也會分享出來，謝謝。

第二篇、給Toolbar的menu新增圖示

今天要實現產品設計的新介面，要使用帶Toolbar控制元件，於是手起刀落，麻溜的一下就寫好了：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="@color/colorAccent"
    android:layout_height="?attr/actionBarSize"/>

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);

//返回按鈕監聽
toolbar.setNavigationOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {        
    }
});

//menu item點選事件監聽
toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
    @Override
    public boolean onMenuItemClick(MenuItem item) {
        switch (item.getItemId()){
            case R.id.test_menu1:

                break;
        }
        return false;
    }
});
setSupportActionBar(toolbar);

在Activity中使用：Activity 需要 extends AppCompatActivity 重寫onCreateOptionsMenu方法載入menu佈局

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.test_menu,menu);//載入menu佈局
    return true;
}

預設情況下Title 和 menu 字型顏色和更多menu圖示的顏色都是黑色的。而且menu覆蓋了Toolbar，這樣menu應該在目前的APP裡面沒有哪一個是這樣的。因為確實體驗不好。要怎麼去改呢。一般的APP都這樣：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="@color/colorAccent"
    app:popupTheme="@style/ToolbarPopupTheme"  -->新增style
    android:layout_height="?attr/actionBarSize"/>

menu 樣式，設定背景色和不讓menu覆蓋Toolbar:

<style name="ToolbarPopupTheme" parent="Widget.AppCompat.Light.PopupMenu.Overflow">
    <item name="android:colorBackground">#90000000</item>  <!-- 設定背景顏色-->
    <item name="overlapAnchor">false</item>  <!--設定不覆蓋錨點-->
</style>

已經修改了背景色和覆蓋問題。但是Toolbar字型顏色和圖示顏色，和menu字型顏色太醜了，繼續修改：在ToolbarPopupTheme新增2行程式碼就可以搞定了：

<!-- 新增這一句， 即可改變toolbar menu 圖示的顏色-->
<item name="android:textColorSecondary">#ffffff</item>
<!--toolbar標題文字顏色-->
<item name="android:textColorPrimary">@android:color/white</item>

但menu上的圖示無法顯示，解決方法：

@Override
protected boolean onPrepareOptionsPanel(View view, Menu menu) {
    if (menu != null) {
        if (menu.getClass() == MenuBuilder.class) {
            try {
                Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                m.setAccessible(true);
                m.invoke(menu, true);
            } catch (Exception e) {
                
            }
        }
    }
    return super.onPrepareOptionsPanel(view, menu);
}

但字型是白色需要改成藍色：

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:background="@color/colorAccent"
    app:popupTheme="@style/ToolbarPopupTheme"
    app:theme="@style/ToolbarTheme"   -->修改主題
    android:layout_height="?attr/actionBarSize"/>

<!-- toolbar選單樣式 -->
<style name="ToolbarTheme" parent="@style/ThemeOverlay.AppCompat.ActionBar">
    <!-- 修改字型大小 -->
    <item name="android:textSize">15sp</item>
    <!-- 修改字型顏色 -->
    <item name="android:textColor">@color/color_14b8f4</item>
</style>

用同樣方法在一個fragment介面裡面寫了一個Toolbar，Fragment 裡面居然沒有 setSupportActionBar(oolbar toolbar)這個方法。

((AppCompatActivity) getActivity()).setSupportActionBar(toolbar);

setHasOptionsMenu(true);

Fragment的menu出來了。。。但沒有圖示，onPrepareOptionsPanel(View view, Menu menu)

經過發現 onCreateOptionsMenu(Menu menu, MenuInflater inflater)這裡面不是和 onPrepareOptionsPanel(View view, Menu menu) 一樣都有一個menu嗎？？？？

@Override
public void onCreateOptionsMenu(Menu menu, MenuInflater inflater) {
    super.onCreateOptionsMenu(menu, inflater);
    inflater.inflate(R.menu.test_menu,menu);
    if (menu != null) {
        if (menu.getClass() == MenuBuilder.class) {
            try {
                Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                m.setAccessible(true);
                m.invoke(menu, true);
            } catch (Exception e) {
            }
        }
    }
}