Android控件<第十五篇>：Toolbar基本使用

（1）簡介

Toolbar 是 Android 5.0 推出的一個(gè) Material Design 風(fēng)格的導(dǎo)航控件 ,用來取代之前的 Actionbar 。與 Actionbar 相比，Toolbar 明顯要靈活的多。它不像 Actionbar 一樣，一定要固定在Activity的頂部，而是可以放到界面的任意位置。

（2）修改主題

當(dāng)我們新建一個(gè)工程時(shí)，我們發(fā)現(xiàn)默認(rèn)是有導(dǎo)航欄的， 如圖：

圖片.png

那是因?yàn)槟J(rèn)app主題自帶了導(dǎo)航欄

圖片.png

圖片.png

我們發(fā)現(xiàn)，系統(tǒng)自帶的是一個(gè)actionBar，那么我們就換一個(gè)主題

圖片.png

三種主題任意選擇一個(gè)即可。

現(xiàn)在開始添加一個(gè)ToolBar。

（3）Toolbar導(dǎo)包選擇
圖片.png

如圖所示，Toolbar有兩種導(dǎo)包，建議使用v7的那個(gè)，因?yàn)榈诙N只支持Android5.0以上的手機(jī)。

（4）Toolbar基本代碼
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:collapseIcon="@mipmap/ic_launcher"
    app:buttonGravity="bottom"
    app:navigationIcon="@mipmap/ic_launcher"
    app:popupTheme="@style/Animation.AppCompat.Dialog"
    app:logoDescription="asdasdasd"
    app:maxButtonHeight="50dp"
    app:navigationContentDescription="tttttt"
    app:title="Title"
    app:titleTextColor="#ffffff"
    android:background="@color/colorPrimaryDark"
    app:subtitle="SubTitle"
    app:subtitleTextColor="#ffffff"
    app:logo="@mipmap/ic_launcher">

</android.support.v7.widget.Toolbar>
（5）基本屬性
  • background 設(shè)置背景色
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark">

</android.support.v7.widget.Toolbar>
圖片.png

目前發(fā)現(xiàn)，設(shè)置toolbar背景色之后，狀態(tài)欄也會(huì)隨之變化。

  • navigationIcon 添加返回按鈕
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back">

</android.support.v7.widget.Toolbar>
圖片.png
  • logo 添加logo
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:logo="@mipmap/ic_launcher">

</android.support.v7.widget.Toolbar>
圖片.png
  • title和subtitle 添加標(biāo)題和子標(biāo)題
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:logo="@mipmap/ic_launcher"
    app:title="ToolBar標(biāo)題"
    app:subtitle="ToolBar子標(biāo)題">

</android.support.v7.widget.Toolbar>
圖片.png
  • titleTextColor和subtitleTextColor 修改標(biāo)題和子標(biāo)題的顏色
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:logo="@mipmap/ic_launcher"
    app:title="ToolBar標(biāo)題"
    app:subtitle="ToolBar子標(biāo)題"
    app:titleTextColor="#ffffff"
    app:subtitleTextColor="#ffffff">

</android.support.v7.widget.Toolbar>
圖片.png
  • collapseIcon 設(shè)置折疊視圖的圖標(biāo)
<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:logo="@mipmap/ic_launcher"
    app:title="ToolBar標(biāo)題"
    app:collapseIcon="@mipmap/back"
    app:subtitle="ToolBar子標(biāo)題"
    app:titleTextColor="#ffffff"
    app:subtitleTextColor="#ffffff">
圖片.png

這個(gè)后面有詳細(xì)介紹。

（6）添加菜單

通過inflateMenu可以添加toolbar的菜單

    toolbar_normal.inflateMenu(R.menu.toolbar_menu);

菜單布局是

<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/back"
        android:title="按鈕1"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_notification"
        android:icon="@mipmap/back"
        android:title="按鈕2"
        app:showAsAction="ifRoom" />

    <item
        android:id="@+id/action_item_one"
        android:title="按鈕3"
        app:showAsAction="never" />

    <item
        android:id="@+id/action_item_two"
        android:title="按鈕4"
        app:showAsAction="never" />
</menu>

效果如下：

圖片.png
圖片.png

每個(gè)菜單都可以設(shè)置特有的屬性

  • orderInCategory
    設(shè)置菜單項(xiàng)的排列順序，必須設(shè)置大于等于0的整數(shù)值。數(shù)值小的排列在前，如果值相等，則按照xml中的順序展現(xiàn)。
  • title
    菜單項(xiàng)的標(biāo)題。
  • icon
    菜單項(xiàng)的圖標(biāo)。
  • showAsAction
    該屬性有五個(gè)值，可以混合使用。

always：總是顯示在Toolbar上。
ifRoom：如果Toolbar上還有空間，則顯示，否則會(huì)隱藏在溢出列表中。
never：永遠(yuǎn)不會(huì)顯示在Toolbar上，只會(huì)在溢出列表中出現(xiàn)。
withText：文字和圖標(biāo)一起顯示。
collapseActionView：聲明了這個(gè)操作視窗應(yīng)該被折疊到一個(gè)按鈕中，當(dāng)用戶選擇這個(gè)按鈕時(shí)，這個(gè)操作視窗展開。一般要配合ifRoom一起使用才會(huì)有效。

這里重點(diǎn)介紹一下collapseActionView屬性，利用collapseActionView屬性實(shí)現(xiàn)“點(diǎn)擊按鈕展開成搜索框”

第一步：設(shè)置折疊視圖圖標(biāo)


圖片.png

第二步：修改菜單屬性

圖片.png

這樣的話就可以實(shí)現(xiàn)下圖的效果

42.gif
（7）setOnMenuItemClickListener

設(shè)置Item的點(diǎn)擊事件

    toolbar_normal.setOnMenuItemClickListener(new Toolbar.OnMenuItemClickListener() {
        @Override
        public boolean onMenuItemClick(MenuItem menuItem) {
            switch (menuItem.getItemId()){
                case R.id.action_item_one:
                    break;
                case R.id.action_item_two:
                    break;
                case R.id.action_notification:
                    break;
                case R.id.action_search:
                    break;
            }
            return true;
        }
    });
（8）setNavigationOnClickListener

設(shè)置返回鍵點(diǎn)擊事件

    toolbar_normal.setNavigationOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {

        }
    });
（9）SearchView

有關(guān)SearchView，前面已經(jīng)介紹過怎么展示了，下面介紹怎么去設(shè)置監(jiān)聽

    SearchView searchView = (SearchView) menuItem.getActionView();
    searchView.setQueryHint("搜索");
    
    //((ImageView)searchView.findViewById(R.id.search_button)).setImageResource(R.mipmap.shennvguo2);

    searchView.setOnSearchClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            //當(dāng)點(diǎn)擊搜索編輯框的時(shí)候執(zhí)行，剛進(jìn)入時(shí)默認(rèn)點(diǎn)擊搜索編輯框
        }
    });

    searchView.setOnQueryTextListener(new SearchView.OnQueryTextListener() {
        @Override
        public boolean onQueryTextSubmit(String s) {
            //點(diǎn)擊軟鍵盤搜索的時(shí)候執(zhí)行
            return false;
        }

        @Override
        public boolean onQueryTextChange(String s) {
            //搜索框文本發(fā)生改變的時(shí)候執(zhí)行
            return false;
        }
    });
    searchView.setOnQueryTextFocusChangeListener(new View.OnFocusChangeListener() {
        @Override
        public void onFocusChange(View v, boolean hasFocus) {
            //當(dāng)?shù)玫浇裹c(diǎn)和失去焦點(diǎn)的時(shí)候執(zhí)行
        }
    });

    menuItem.setOnActionExpandListener(new MenuItem.OnActionExpandListener() {
        @Override
        public boolean onMenuItemActionExpand(MenuItem item) {
            //展開時(shí)回調(diào)
            return true;
        }

        @Override
        public boolean onMenuItemActionCollapse(MenuItem item) {
            //收起來時(shí)回調(diào)
            return true;
        }
    });
（10）Overflow

修改overflow的圖標(biāo)

    //設(shè)置overflow圖標(biāo)
   toolbar_normal.setOverflowIcon(ContextCompat.getDrawable(this,R.mipmap.overflow));
圖片.png
（11）overflow popup主題
圖片.png

溢出菜單就不介紹了，目前沒有什么好辦法可以自定義布局。

圖片.png
（12）添加子布局
圖片.png

Toolbar的父類是ViewGroup，我們常用的線性布局和相對(duì)布局的父類也是ViewGroup，所以Toolbar也同樣可以添加子布局，看以下代碼

<android.support.v7.widget.Toolbar
    android:id="@+id/toolbar_normal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimaryDark"
    app:navigationIcon="@mipmap/back"
    app:popupTheme="@style/OverflowMenuStyle"
    app:collapseIcon="@mipmap/back">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorAccent"
        android:text="標(biāo)題"
        android:layout_gravity="center"
        android:textSize="20sp"/>


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

我們添加一個(gè)標(biāo)題，使它居中

圖片.png

[本章完...]

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

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

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