最詳細的 Android Toolbar 開發實踐總結

轉自 http://www.jianshu.com/users/ec95b5891948/latest_articles

初識 Toolbar

Toolbar是在 Android 5.0 開始推出的一個 Material Design 風格的導航控件，Google 非常推薦大家使用 Toolbar 來作爲Android客戶端的導航欄，以此來取代之前的 Actionbar 。與 Actionbar 相比， Toolbar 明顯要靈活的多。它不像 Actionbar 一樣，一定要固定在Activity的頂部，而是可以放到界面的任意位置。除此之外，在設計Toolbar 的時候，Google也留給了開發者很多可定製修改的餘地，這些可定製修改的屬性在API文檔中都有詳細介紹，如：

設置導航欄圖標；
設置App的logo；
支持設置標題和子標題；
支持添加一個或多個的自定義控件；
支持Action Menu；

Toolbar支持的特性

總之，與 Actionbar 相比， Toolbar 讓我感受到Google滿滿的誠意。怎樣？是否已經對Toolbar 有大概的瞭解，躍躍欲試的感覺出來了有木有？接下來，我們就一步一步的來看如何使用Toolbar （其實是我使用Toolbar 踩坑填坑的血淚史，你們接下去看，我先擦個眼淚…. ）。

開始使用 Toolbar

前面提到 Toolbar 是在 Android 5.0 纔開始加上的，Google 爲了將這一設計向下兼容，自然也少不了要推出兼容版的Toolbar 。爲此，我們需要在工程中引入appcompat-v7 的兼容包，使用android.support.v7.widget.Toolbar 進行開發。下面看一下代碼結構，同樣把重點部分已經紅圈圈出：

關鍵部分代碼

ToolbarActivity 包含了 Toolbar 的一些基本使用， ZhiHuActivity 是在熟悉了 Toolbar 後對知乎主頁面的一個高仿實現。
layout和menu文件夾分別是上面提到的兩個Activity的佈局文件和 actionmenu 菜單文件。
values、values-v19、values-v21 中包含了一些自定義的 theme，後面用到的時候會順帶講解。

我們先來看一下 ToolbarActivity 的運行效果

ToolbarActivity效果圖

按照效果圖，從左到右分別是我們前面提及到的 導航欄圖標 、 App的logo 、 標題和子標題 、 自定義控件 、以及 ActionMenu 。接着，我們來看下佈局文件和代碼實現。

首先，在佈局文件 activity_tool_bar.xml 中添加進我們需要的 Toolbar 控件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_0176da">

        <!--自定義控件-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Clock" />
    </android.support.v7.widget.Toolbar>
</LinearLayout>

接着在 base_toolbar_menu.xml 中添加 action 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/action_search"
        android:icon="@mipmap/ic_search"
        android:title="@string/menu_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@id/action_notification"
        android:icon="@mipmap/ic_notifications"
        android:title="@string/menu_notifications"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_item1"
        android:title="@string/item_01"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_item2"
        android:title="@string/item_02"
        app:showAsAction="never" />
</menu>

最後到 ToolbarActivity 中調用代碼拿到這 Toolbar 控件，並在代碼中做各種setXXX操作。

/**
 * Toolbar的基本使用
 */
public class ToolBarActivity extends BaseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tool_bar);

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

        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);//設置導航欄圖標
        toolbar.setLogo(R.mipmap.ic_launcher);//設置app logo
        toolbar.setTitle("Title");//設置主標題
        toolbar.setSubtitle("Subtitle");//設置子標題

        toolbar.inflateMenu(R.menu.base_toolbar_menu);//設置右上角的填充菜單
        toolbar.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
            @Override
            public boolean onMenuItemClick(MenuItem item) {
                int menuItemId = item.getItemId();
                if (menuItemId == R.id.action_search) {
                    Toast.makeText(ToolBarActivity.this , R.string.menu_search , Toast.LENGTH_SHORT).show();

                } else if (menuItemId == R.id.action_notification) {
                    Toast.makeText(ToolBarActivity.this , R.string.menu_notifications , Toast.LENGTH_SHORT).show();

                } else if (menuItemId == R.id.action_item1) {
                    Toast.makeText(ToolBarActivity.this , R.string.item_01 , Toast.LENGTH_SHORT).show();

                } else if (menuItemId == R.id.action_item2) {
                    Toast.makeText(ToolBarActivity.this , R.string.item_02 , Toast.LENGTH_SHORT).show();

                }
                return true;
            }
        });

    }

}

代碼到此已經完成了 Toolbar 的基本使用，注意，是基本使用而已！！！！！下面有幾個代碼裏面需要注意的地方：

我們在使用 Toolbar 時候需要先隱藏掉系統原先的導航欄，網上很多人都說給Activity設置一個NoActionBar的Theme。但個人覺得有點小題大做了，所以這裏我直接在BaseActivity中調用 supportRequestWindowFeature(Window.FEATURE_NO_TITLE) 去掉了默認的導航欄（注意，我的BaseActivity是繼承了AppCompatActivity的，如果是繼承Activity就應該調用requestWindowFeature(Window.FEATURE_NO_TITLE) ）；
如果你想修改標題和子標題的字體大小、顏色等，可以調用 setTitleTextColor 、 setTitleTextAppearance 、setSubtitleTextColor 、setSubtitleTextAppearance 這些API；
自定義的View位於 title 、 subtitle 和 actionmenu 之間，這意味着，如果title 和subtitle 都在，且actionmenu選項 太多的時候，留給自定義View的空間就越小；
導航圖標和 app logo 的區別在哪？如果你只設置 導航圖標 （ or app logo ）和 title 、 subtitle ，會發現 app logo 和 title 、 subtitle 的間距比較小，看起來不如導航圖標 與它們兩搭配美觀；
Toolbar和其他控件一樣，很多屬性設置方法既支持代碼設置，也支持在xml中設置（這裏也是最最最最最坑爹的地方，如何坑爹法，請接着往下看）；

Toolbar 踩坑填坑

坑一：xml佈局文件中，Toolbar屬性設置無效

剛開始使用Toolbar的時候，我的佈局文件中是這樣寫的

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_0176da"
        android:logo="@mipmap/ic_launcher"
        android:navigationIcon="@mipmap/ic_drawer_home"
        android:subtitle="456"
        android:title="123">

        <!--自定義控件-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Clock" />
    </android.support.v7.widget.Toolbar>
</LinearLayout>

在真機跑起來之後，看到的結果是下面這樣的。

Toolbar 屬性設置無效

此時心中真是萬千匹草泥馬在奔騰，除了設置背景色和TextView有效外，說好的 logo 、 navigationIcon 、subtitle 、title 都跑哪去了？在編譯器沒報錯又不見效果的情況下，參考了其他開發者的用法後找到了以下的解決方案，就是在根佈局中加入自定義屬性的命名空間

xmlns:toolbar="http://schemas.android.com/apk/res-auto"(這裏的toolbar可以換成你想要其他命名，做過自定義控件的童鞋相比很熟悉此用法了)

然後把所有用 android:xxx 設置無效的，都用 toolbar：xxx 設置即可生效。最終的佈局代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:toolbar="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_0176da"
        toolbar:navigationIcon="@mipmap/ic_drawer_home"
        toolbar:logo="@mipmap/ic_launcher"
        toolbar:subtitle="456"
        toolbar:title="123">

        <!--自定義控件-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Clock" />
    </android.support.v7.widget.Toolbar>
</LinearLayout>

到此即可解決 xml 中屬性設置失效的問題，爲什麼會出現這種問題呢？我猜測是因爲這個控件是兼容版的控件，用 android:xxx 設置無效是的這些屬性是在兼容包中，不在默認的Android SDK中，所以我們需要額外的引入。至於爲什麼IDE不報錯，估計就是bug了吧！

坑二：Action Menu Item 的文字顏色設置無效

系統默設置了ActionMenu每個Item的文字顏色和大小，像ToolbarActivity在Google原生5.1系統下默認效果就是下面這樣的

Android 5.1 默認的ActionMenu Item的風格

此時，如果我有需求要改變一下item文字顏色，應該怎麼破？我按照網上比較普遍的解決方案，做了如下兩步的修改操作：

在styles.xml中自定義一個Theme，並設置 actionMenuTextColor 屬性（注意：不是 android:actionMenuTextColor ）

<style name="Theme.ToolBar.Base" parent="Theme.AppCompat.Light.NoActionBar">
    <item name="actionMenuTextColor">@color/color_red</item>
</style>

在佈局文件的Toolbar中設置popupTheme（注意：是toolbar:xxx，不是android:xxx）

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_0176da"
        toolbar:popupTheme="@style/Theme.ToolBar.Base">

        <!--自定義控件-->
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Clock" />
</android.support.v7.widget.Toolbar>

運行之後，文字的顏色的並沒有發生任何改變。說好的改變顏色呢…..找來找去，最後再 StackOverflow 找到一個還不錯的解決方案，就是把上面的的 actionMenuTextColor 屬性換成 android:textColorPrimary 即可解決，最終得到下面的運行效果。

成功修改 actionmenu item 文字的顏色

這種方法也有一個小缺點，如果我把自定義控件換成Button，你會發現Button默認的文字顏色也變成了紅色。所以，此處如果有朋友有更好的解決方案，請留言賜教。

如果你想要修改 ActionMenu Item 的文字大小，也可以在theme中設置加上如下設置

<item name="android:textSize">20sp</item>

以上就是目前使用 Toolbar 一些比較折騰的坑，感覺 Google 對 Toolbar 這些坑，還可以進一步優化優化，不然就坑苦了開發者們了。

仿知乎主頁面

爲了加深一下 Toolbar 的開發體驗，我們使用 Toolbar 來實現知乎主頁的效果！先來看下知乎主頁的效果

Android 5.1上知乎主頁效果圖

如果前面的內容你看明白，想擼出這個界面無非是幾分鐘的事情，下面就直接上代碼，不做贅述了。

ZhiHuActivity界面代碼

public class ZhiHuActivity extends BaseActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_zhi_hu);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.inflateMenu(R.menu.zhihu_toolbar_menu);

        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);

        toolbar.setTitle(R.string.home_page);
        toolbar.setTitleTextColor(getResources().getColor(android.R.color.white));
    }
}

zhihu_toolbar_menu.xml 菜單

<?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/action_search"
        android:icon="@mipmap/ic_search"
        android:title="@string/menu_search"
        app:showAsAction="ifRoom" />

    <item
        android:id="@id/action_notification"
        android:icon="@mipmap/ic_notifications"
        android:title="@string/menu_notifications"
        app:showAsAction="ifRoom" />

    <item
        android:id="@id/action_settings"
        android:orderInCategory="100"
        android:title="@string/menu_settings"
        app:showAsAction="never" />

    <item
        android:id="@id/action_about"
        android:orderInCategory="101"
        android:title="@string/menu_about_us"
        app:showAsAction="never" />
</menu>

activity_zhi_hu.xml 佈局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/color_0176da"
        android:theme="@style/Theme.ToolBar.ZhiHu">

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

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white">

        <ImageView
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_centerInParent="true"
            android:background="@mipmap/ic_zhihu_logo" />
    </RelativeLayout>

</LinearLayout>

styles.xml 中的 Theme.ToolBar.ZhiHu，給 Toolbar 設置android:theme用的

<resources>

    ...
    ...

    <style name="Theme.ToolBar.ZhiHu" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="actionOverflowButtonStyle">@style/ActionButton.Overflow.ZhiHu</item>
    </style>

    <style name="ActionButton.Overflow.ZhiHu" parent="android:style/Widget.Holo.Light.ActionButton.Overflow">
        <item name="android:src">@mipmap/ic_menu_more_overflow</item>
    </style>

</resources>

最終得到下面這樣的效果

Android5.1上仿知乎主頁面效果

這裏在 Toolbar 設置 android:theme=”@style/Theme.ToolBar.ZhiHu” 主要是爲了替換系統右上角三個點的圖標，如果不設置，則會成系統默認主題的樣子。

不設置Theme的效果

最後，再給知乎的主頁面做個小小的優化，它在 Android 4.4 上運行還是能夠看到一條黑乎乎的通知欄，爲此我把 Toolbar 和Translucent System Bar 的特性結合起來，最終改進成下面的效果（附上 Android4.4 和 5.1 上的運行效果）。

Android4.4上改進版的知乎主頁

Android5.1上改進版的知乎主頁

如果你還不知道 Translucent System Bar 的特性怎麼使用，請查看我的上一篇文章： Translucent System Bar 的最佳實踐

總結

關於 Toolbar 的使用就介紹到此，本來是懷着很簡單就可以上手的心態來使用，結果發現還是有很多坑需要填。果然還是驗證了一句老話

紙上得來終覺淺，絕知此事要躬行

對於想要更深的瞭解 Toolbar 設計的童鞋，也可以看看這篇官網文檔（自備梯子）。

同樣，分享即美德，需要源代碼的童鞋，請戳： https://github.com/D-clock/AndroidSystemUiTraining

XuZhenhao0609

發佈了29 篇原創文章 · 獲贊 21 · 訪問量 2萬+

私信關注

最詳細的 Android Toolbar 開發實踐總結

轉自 http://www.jianshu.com/users/ec95b5891948/latest_articles

初識 Toolbar

開始使用 Toolbar

Toolbar 踩坑填坑

仿知乎主頁面

總結

python gdal 安裝使用（Windows， python 3.6.8）

Tomcat使用過程中遇到的一些問題

Adapter的notifyDataSetChange無效的問題

最詳細的 Android Toolbar 開發實踐總結

自定義expendableListView實現與QQ聯繫人一樣效果的通訊錄

java synchronized詳解

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結