Toolbar的詳細介紹和自定義Toolbar

時間 2019-11-07

標籤 toolbar 詳細介紹自定義简体版

原文原文鏈接

在此總結一下，Android Toolbar 控件的使用方法，爭取總結的系統全面些。以前也只是停留在一些基本簡單的用法，並且也不繫統。但願愛學習的你能經過這篇文章，有所收穫！java

Toolbar 的基本用法

經常使用的方法

xml中的設置：android

<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:navigationIcon="@drawable/ic_back_white_24dp"
        app:title="標題"
        app:titleTextColor="@color/white">
 </android.support.v7.widget.Toolbar>

若是你不在xml中設置參數的話，代碼中的設置:api

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("標題");
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.setNavigationIcon(R.drawable.ic_back_white_24dp);

        //點擊左邊返回按鈕監聽事件
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });

因爲比較簡單，效果圖這裏也不在貼出啦。app

全面但包括不太經常使用的用法

<!--   navigationIcon  左邊返回箭頭圖標
       navigationContentDescription 目前還不知道其做用
       titleMarginStart  標題距離(開始)左邊的距離
       -->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:logo="@mipmap/ic_launcher"
        app:navigationContentDescription=""
        app:navigationIcon="@drawable/ic_back_white_24dp"
        app:subtitle="子標題"
        app:subtitleTextColor="@color/white"
        app:title="標題"
        app:titleMarginStart="90dp"
        app:titleTextColor="@color/white">

一樣若是不在xml中設置參數的話，代碼中的設置:
這裏就不在貼出代碼啦，設置的時候，先敲打出xml配置中的關鍵單詞或首字母，就會自動提示的。大部分在xml有的屬性，代碼中均可以設置ide

效果圖：
佈局

注意事項：
1：若是你添加了這行代碼 setSupportActionBar(toolbar); 那麼 toolbar.setNavigationOnClickListener監聽方法，要放到其後面，不然點擊事件，監聽不到的。若是你用不到ActionBar的一些特性的話，建議setSupportActionBar(toolbar); 這行代碼不用添加了。學習

若是你想修改主標題和子標題的文字大小，你可經過以下方式：
首先定義一個style：測試

<!--主標題-->
<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
       <item name="android:textColor">#f0f0</item>
        <item name="android:textSize">15sp</item>
    </style>

 <!--子標題-->
<style name="ToolbarSubtitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Subtitle">
        <item name="android:textColor">#f0f0</item>
        <item name="android:textSize">10sp</item>
    </style>

而後：字體

<!-- app:titleTextAppearance="@style/ToolbarTitle"-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="@color/colorAccent"
        app:logo="@mipmap/ic_launcher"
        app:navigationContentDescription=""
        app:navigationIcon="@drawable/ic_back_white_24dp"
        app:subtitle="子標題"
        app:subtitleTextColor="@color/white"
        app:title="標題"
        app:titleMarginStart="90dp"
        app:titleTextAppearance="@style/ToolbarTitle"
        app:titleTextColor="@color/white">

效果圖這裏不在貼出了，經過app:titleTextAppearance=」@style/ToolbarTitle」方法的設置，就能修改標題字體的大小，固然文字顏色也能夠修改。ui

到這裏，你可能要問了，若是，我想要標題居中，怎麼辦呢？查看api，toolbar沒有使其居中的方法，也就提供了使其距左右，上下邊距大小的方法。不過不用擔憂，這裏仍是有辦法的。看以下代碼：

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

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="標題"
            android:textColor="@color/white"
            android:textSize="22sp" />

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

效果圖：

注意： 此時 TextView 控件的寬和高都是自適應大小，java 代碼中此行代碼setSupportActionBar(toolbar);就不要添加了，不然就會顯示不正常。若是你非要添加setSupportActionBar(toolbar);這行代碼的話，TextView 控件的寬要用match_parent屬性。這裏再次建議setSupportActionBar(toolbar);這行代碼就不要點添加了。
至於它的做用，在此作一下簡單的說明吧：
1）在Toolbar這個控件出現以前，其實咱們也能夠經過 ActionBar actionBar = getSupportActionBar(); 方法獲取到acitonbar，（前提你的activity主題theme，是採用的帶actionbar的主題，若是你採用這樣的主題android:theme="@style/Theme.AppCompat.Light.NoActionBar">拿到的actionBar也是 null,顯然是不行的）以後你就能夠採用諸以下面的方面來操做actionbar啦。

ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setDisplayShowTitleEnabled(true);
            actionBar.setTitle("主標題");
               ......
        } else {
            Log.i(TAG, "onCreate: actionBar is null");
        }

可是，原生自帶的ActionBar設置的靈活性，仍是有限，所以Toolbar 這個控件，也就應運而生啦！此時，有的小夥伴說了，我雖然使用了Toolbar來代替ActionBar，可是我還想使用ActionBar的一些特性怎麼辦呢？這個時候 setSupportActionBar(toolbar);就發揮其做用啦。添加這行代碼，你的toolbar能夠說也就具備了ActionBar的相關屬性了。好啦，到此setSupportActionBar(toolbar) 的做用也講完了。若是你還不太明白的話，能夠參考一下篇文章：
ActionBar和Toolbar的基礎使用

結合menu配置文件的用法。

這裏先看一下效果圖：

首先在menu文件夾中，建立名爲 menu.xml 文件（文件名隨意的）：

<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="@drawable/ic_search"
        android:title="Search"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_notifications"
        android:icon="@drawable/ic_delete_white_24dp"
        android:title="notifications"
        app:showAsAction="ifRoom" />
    <item
        android:id="@+id/action_settings"
        android:icon="@mipmap/ic_launcher"
        android:orderInCategory="100"
        android:title="@string/action_settings"
        app:showAsAction="never" />
</menu>

而後在代碼中這樣加載該menu文件便可：

toolbar.inflateMenu(R.menu.menu);

最後運行代碼，就是上圖的效果。

在這裏，app:showAsAction 屬性仍是頗有必要介紹一下滴。
app:showAsAction 有如下三個屬性：

ifRoom 表示在屏幕空間足夠的狀況下顯示在Toolbar中，不夠的話就顯示在菜單中
never 表示永遠不顯示在Toolbar中，而是一直顯示在菜單中
always 表示永遠顯示在Toolbar中，若是屏幕空間不夠則不顯示

注意:Toolbar中的action按鈕只會顯示圖標，菜單中的action按鈕只會顯示文字。

那若是設置了ifRoom 屬性以後，既然只顯示圖標不顯示文字，那還設置 android:title=」Search」文字幹嗎呢?若是你設置了以後，雖然不顯示，可是你長按相應按鈕後，就會吐司相應文字內容的。

細心的你可能發現還有些不足的地方，就是上圖的點擊菜單選項時，彈出的菜單位置有點太靠上啦，能不能設置呢，還有菜單的背景和文字顏色能不能設置呢？答案固然是能夠的！

首先設置好樣式：

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

而後直接在這裏引用就能夠了： app:popupTheme=」@style/ToolbarPopupTheme」

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

        <TextView
            android:id="@+id/title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="標題"
            android:textColor="@color/white"
            android:textSize="22sp" />

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

效果圖：

與AppBarLayout結合的使用

（1）： app:layout_scrollFlags=」scroll」

xml代碼：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">


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

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

    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:id="@+id/nestedScrollView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="16dp"
                android:text="@string/large_text" />

        </LinearLayout>


    </android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

首先注意最外層：包裹了一層 android.support.design.widget.CoordinatorLayout 佈局，那CoordinatorLayout 佈局是什麼的，咱們能夠理解爲它是增強版的FramLayout。而後注意：Toolbar 的新添加的這條屬性 app:layout_scrollFlags=」scroll」 。最後看一看效果圖：

PS：對於 scroll 屬性，網上也有說的比較專業的，不過我認爲從產生的效果角度去分析的話，那就是：往上滑動就不說了，往下滑動就是當下面的滾動佈局滑動到頂端時，標題欄toolbar纔會滑出來。該屬性實用性通常吧。

（2）：app:layout_scrollFlags=」scroll|enterAlways」

scroll 與 enterAlways 結合產生的效果圖以下：

PS：咱們仍是從產生的效果角度去分析的：往下滑動時，，標題欄 toolbar 會優先滑出來，而後滾動佈局纔開始滑動。就像該單詞的意思同樣：老是在。也就是隻要添加了該屬性值，下滑時 toolbar 老是優先滑出來。該屬性比較實用。

（3）： app:layout_scrollFlags=」scroll|enterAlways|snap」

在以上基礎上，在與 snap 結合所產生的效果圖以下：

PS：仍是從產生的效果角度去分析的：不論是往下或者往上滑動時，，標題欄 toolbar 首先仍是和（2）中同樣的，不過有個細微的不一樣，toolbar會根據當前的滾動距離，自動選擇是隱藏仍是顯示。該屬性實用性也通常。

（4）： app:layout_scrollFlags=」scroll|enterAlways|exitUntilCollapsed」

scroll 與 enterAlways 與 exitUntilCollapsed 結合所產的效果圖以下：

注意此時Toolbar的佈局有些許改變（改變後的）：

<android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:background="@color/colorAccent"
            android:minHeight="40dp"
            app:layout_scrollFlags="scroll|enterAlways|exitUntilCollapsed"
            app:popupTheme="@style/ToolbarPopupTheme">

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

咱們給Toolbar 設置了一個最小高度 android:minHeight=」40dp」，而後又把正常高度改變了，並隨意改爲了100dp。

PS：仍是從產生的效果角度去分析的：默認toolbar 顯示的正常高度值咱們設置成的100dp，當咱們上滑的時候，高度達到最小高度40dp時，toolbar不在滑動了。該屬性感受實用性不強。

（5）： app:layout_scrollFlags=」scroll|enterAlways|enterAlwaysCollapsed」

scroll 與 enterAlways 與 enterAlwaysCollapsed 結合所產的效果圖以下：

xml中Toolbar 的佈局和（4）仍是同樣的，不過app:layout_scrollFlags屬性，由原來的exitUntilCollapsed改成enterAlwaysCollapsed。

PS：仍是從產生的效果角度去分析的：默認toolbar 顯示的正常高度值咱們設置成的100dp，當咱們上滑的時候，toolbar直到徹底隱藏時，下面的滾動佈局纔開始發生滾動；下滑時toolbar會優先滑出設置的最小高度值，而後當滾動佈局下滑到頂部時，後面的toolbar部分，纔開始徹底顯示（滑）出來。該屬性感受實用性也不強。

與CollapsingToolbarLayout結合的使用

（1）：先看下效果圖：

再把代碼貼上：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:fitsSystemWindows="true"
        android:theme="@style/AppTheme.NoActionBar.AppBarOverlay">

         <!--本次重點關注這裏 CollapsingToolbarLayout -->
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll">

            <ImageView
                android:id="@+id/image"
                android:layout_width="match_parent"
                android:layout_height="180dp"
                android:scaleType="centerCrop"
                android:src="@drawable/ic_image"
                app:layout_collapseMode="parallax" />


            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                app:navigationIcon="@drawable/ic_back_white_24dp"
                app:popupTheme="@style/AppTheme.NoActionBar.PopupOverlay"
                app:title="標題"
                app:titleTextColor="@color/white">


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

        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/text_margin"
            android:text="@string/large_text" />

    </android.support.v4.widget.NestedScrollView>


</android.support.design.widget.CoordinatorLayout>

這裏咱們重點關注 CollapsingToolbarLayout控件如下的幾個屬性：

app:contentScrim=」?attr/colorPrimary」當上滑到toolbar 高度期間直到達到toolbar高度時，給toolbar設置的背景色，以及過渡顏色。固然，這裏不只僅能夠設置顏色，也能夠設置圖片。 若是不設置該屬性，標題欄會過渡爲以以前的圖片爲背景。
app:layout_scrollFlags=」scroll」和介紹 AppBarLayout 時，給Toolbar 設置和配置同樣。其效果上圖已作展現。
app:expandedTitleGravity=」center_horizontal」從單詞意思能夠看出，這是展現後，title的位置。
app:expandedTitleMarginStart=」50dp」從單詞意思能夠看出，這是展現後，title 距離開始位置的邊距。
app:collapsedTitleGravity=」center」從單詞意思能夠看出，這是收縮後，title 位置（測試發現，很差用）。
app:expandedTitleTextAppearance=」@style/transparentText」展開後標題文字的樣式
app:collapsedTitleTextAppearance=」@style/ToolbarTitle」摺疊後標題文字的樣式

給 ImageView 控件設置的 app:layout_collapseMode=」parallax」屬性說明：
app:layout_collapseMode有兩個參數：

parallax 子View能夠選擇在當前的佈局當時是否以「視差」的方式來跟隨滾動。（PS:其實就是讓這個View的滾動的速度比其餘正常滾動的View速度稍微慢一點）。
pin 測試發現，按照以上的佈局，若是你使用pin參數，看效果，和使用parallax 參數，好像沒有什麼區別。目前我的認爲的區別後面在作介紹。

注意事項:

1.上圖中背景圖，也就是xml中的 ImageView 控件，設置的圖片大小，在保證顯示正常的狀況下，越小越好。太大的話，在展現的時候，會有卡頓的感受。

下面咱們來看一個效果圖：

若是你發現展開和摺疊後的標題字體過小或太大，你可經過以下兩個屬性設置：

app:expandedTitleTextAppearance="@style/transparentText" 展開後標題文字的樣式  
 app:collapsedTitleTextAppearance="@style/ToolbarTitle" 摺疊後標題文字的樣式

transparentText （透明）樣式：

<style name="transparentText" parent="TextAppearance.AppCompat.Small">
        <item name="android:textColor">#00000000</item>
         <item name="android:textSize">15sp</item>
    </style>

ToolbarTitle樣式：

<style name="ToolbarTitle" parent="@style/TextAppearance.Widget.AppCompat.Toolbar.Title">
       <item name="android:textColor">#f0f0</item>
        <item name="android:textSize">15sp</item>
    </style>

細心的你，會發現咱們的狀態欄，如今是徹底透明的狀態。那咱們怎麼實現呢？那你會說了，那還不簡單！
使用下面的代碼：

//透明狀態欄效果
        if (Build.VERSION.SDK_INT >= 21) {
            View decorView = getWindow().getDecorView();
            int option = View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN | View.SYSTEM_UI_FLAG_LAYOUT_STABLE;
            decorView.setSystemUiVisibility(option);
            getWindow().setStatusBarColor(Color.TRANSPARENT);

        }

不就能實現嗎！或者使用第三方透明狀態欄設置庫。很簡單的就能實現了。若是你真正具體操做了，運行代碼了。你會發現，是實現不了的。不過你把上述代碼中 ImageView 控件的 app:layout_collapseMode 的參數設置爲 pin 。以下：
app:layout_collapseMode=」pin」。此時你在試一下，就能實現上圖的效果啦。如今也能說明，parallax 和 pin 的一個區別吧。