ToolBar簡介

ToolBar是Android 5.0推出的一個(gè)新的導(dǎo)航控件用于取代之前的ActionBar，由于其高度的可定制性劫恒、靈活性疙渣、具有Material Design風(fēng)格等優(yōu)點(diǎn)苫亦，越來越多的應(yīng)用也用上了ToolBar，比如常用的知乎軟件其頂部導(dǎo)航欄正是使用ToolBar梨水。官方考慮到仍有一部分用戶的手機(jī)版本號(hào)低于5.0，所以茵臭，ToolBar也放進(jìn)了support v7包內(nèi)疫诽，使得低版本的系統(tǒng)也能使用上ToolBar。本文將使用support v7支持包的ToolBar來進(jìn)行講解旦委，包括其基本用法奇徒、樣式定制等知識(shí)點(diǎn)。

ToolBar的基本使用

引入support v7支持包

在你項(xiàng)目的build.gradle內(nèi)輸入如下代碼缨硝，即能引入支持包摩钙，該支持包內(nèi)有能向下兼容的ToolBar:

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

更改主題

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

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

繼承了Theme.Appcompat.Light.NoActionBar主題，這里提一下宜岛，這個(gè)Theme.AppCompat是支持包內(nèi)的主題长踊，對(duì)應(yīng)著5.0版本的Theme.Material主題。然后在manifest文件中引用這個(gè)主題萍倡。

在布局文件中創(chuàng)建這個(gè)控件身弊，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="標(biāo)題"
            android:textSize="20sp"/>
    </android.support.v7.widget.Toolbar>
</FrameLayout>

在上面，創(chuàng)建了android.support.v7.widget.Toolbar佑刷，同時(shí)我們?cè)趦?nèi)部放了一個(gè)TextView莉擒，這是與ActionBar最大的不同，因?yàn)門oolBar實(shí)際上是一個(gè)ViewGroup瘫絮，支持在其內(nèi)部放入子View涨冀。ok，我們運(yùn)行程序麦萤，得到如下結(jié)果：

結(jié)果1.png

可以看出ToolBar正常顯示鹿鳖，當(dāng)然了，這只是最簡單的用法壮莹，接下來我們逐步添加內(nèi)容翅帜、樣式，使它看起開更加美命满，功能更加完善涝滴。

ToolBar的完善

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

要想改變toolbar的顏色很簡單歼疮，直接在布局文件中添加一個(gè)backgroud屬性指定顏色就可以了，但是為了全局考慮诈唬，我們可以這樣：在values/styles.xml文件中做出如下修改：

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

然后在布局文件中韩脏，添加如下屬性：

android:background="?attr/colorPrimary"

這樣，就能方便對(duì)每一個(gè)toolbar引用同樣的顏色了铸磅，我們先看看現(xiàn)在的效果是怎樣的：

結(jié)果2.png

樣式說明

二、添加title、subtitle幅疼、logo米奸、導(dǎo)航欄圖標(biāo)

在MainActivity文件先獲取控件的實(shí)例，接著通過一系列的set方法即可設(shè)置爽篷，代碼如下：

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);
        
        //設(shè)置導(dǎo)航圖標(biāo)要在setSupportActionBar方法之后
        setSupportActionBar(toolbar);
        toolbar.setNavigationIcon(R.mipmap.ic_drawer_home);
    }

}

結(jié)果如下：

結(jié)果3.png

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

三、添加菜單選項(xiàng)圖標(biāo)及點(diǎn)擊事件

1.添加菜單選項(xiàng)圖標(biāo)

一般導(dǎo)航條蚓再，在其右側(cè)都會(huì)有菜單選項(xiàng)滑肉，當(dāng)然ToolBar也是支持自定義菜單的，首先我們?cè)诓藛挝募卸酝荆薷娜缦拢簉es/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>

這里用了這樣一個(gè)熟悉：app:showAsAction="ifRoom"/"never"赦邻，app是自定義的命名空間髓棋，因?yàn)槲覀兊腶ctivity繼承的是AppCompatActivity实檀，是support v7包的，并不是原生sdk內(nèi)部的按声，因此不能使用android:showAsAction膳犹，否則會(huì)報(bào)錯(cuò)。然后ifRoom表示有空間則顯示签则，never表示從不顯示须床，而是會(huì)通過overflowwindow顯示。
接著我們?cè)贏ctivity中渐裂，要重寫onCreateOptionsMenu()方法豺旬，把這個(gè)菜單加載進(jìn)去：

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

2.添加點(diǎn)擊事件

菜單有了，我們要為菜單添加點(diǎn)擊事件柒凉，這樣菜單才會(huì)有實(shí)際用途,添加點(diǎn)擊事件也很方便族阅，可以這樣操作：

//設(shè)置導(dǎo)航圖標(biāo)、添加菜單點(diǎn)擊事件要在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;
            }
        });

結(jié)果如下：

結(jié)果5.png

可以看到膝捞，菜單選項(xiàng)圖標(biāo)正常顯示坦刀，以及點(diǎn)擊事件都正常觸發(fā)，但是還有一點(diǎn)瑕疵的地方，那就是右上角的三個(gè)圓點(diǎn)鲤遥，是黑色的沐寺，與圖標(biāo)格格不入，有沒有什么辦法改變它呢盖奈？答案是有的混坞，可以通過添加樣式改變，如下所示：

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

"android:textColorSecondary"屬性對(duì)應(yīng)的就是右上角三個(gè)圓點(diǎn)的顏色了钢坦。改變之后將會(huì)變成你要的顏色拔第。

四、其他樣式修改

修改Toolbar popup menu樣式

我們先點(diǎn)擊右上角的三個(gè)點(diǎn)场钉，會(huì)彈出一個(gè)popup menu蚊俺，如下所示：

結(jié)果6.png

可以看到右上角的popup menu是白底黑字，那么有沒有什么辦法改變它的背景顏色逛万，使菜單顯示為黑底白字呢呢泳猬？答案是有的，我們可以這樣設(shè)置：
首先在styles.xml文件中宇植，新建一個(gè)主題：

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

可以看到這個(gè)主題的parent是直接繼承自ThemeOverlay.AppCompat.Dark得封，是支持包的一個(gè)主題，并且我們?cè)趦?nèi)部聲明了“android:colorBackground”這個(gè)屬性指郁，我們只要更改這個(gè)屬性就能變更菜單的背景顏色了忙上。接下來我們?cè)诓季治募幸脒@個(gè)主題，這也很簡單闲坎，為toolbar添加額外的屬性如下：

toolbar:popupTheme="@style/ToolbarPopupTheme"

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

結(jié)果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> <!--新增一個(gè)item慷彤，用于控制menu-->
</style>
<style name="OverflowMenuStyle" parent="Widget.AppCompat.Light.PopupMenu.Overflow">   
     <item name="overlapAnchor">false</item>  <!--把該屬性改為false即可使menu位置位于toolbar之下-->
</style>

效果如下圖：

結(jié)果8.png

那么到目前為止，對(duì)于toolbar的相關(guān)使用意見講述完畢怖喻，可以看出toolbar的靈活性很高底哗，能自定義很多樣式，我們平常開發(fā)也會(huì)遇到各種不同的樣式锚沸，因此toolbar用于取代actionbar是非常合適的跋选。以后如果還有遇到別的樣式，我也會(huì)分享出來咒吐，謝謝野建。