我的CSDN博客同步發(fā)布：玩轉(zhuǎn)AppBarLayout潜秋，更酷炫的頂部欄

上一篇文章[《CoordinateLayout的使用如此簡單 》]上一篇文章《CoordinateLayout的使用如此簡單 》對CoordinateLayout的使用做了講解埋心，今天我們再講解常常與其一起使用的幾個View：AppBarLayout羡洛、CollapsingToolbarLayout以及Toolbar鹤竭。一下子出現(xiàn)3個陌生的View踊餐，是不是覺得很慌張~，很多人都寫了這幾個布局的使用臀稚，但是他們卻沒有有針對性的單獨(dú)講解每個View的作用以及如何使用吝岭，我看的很多文章都是一上來就把AppBarLayout、CollapsingToolbarLayout以及Toolbar寫到一個布局里面去吧寺，然后一個一個布局屬性去說窜管，一下子感覺好混亂，本文是從Toolbar開始說起稚机，最終讓你把這3個View徹底掌握下來幕帆！

其實(shí)，這三個View都是針對我們以往常用的ActionBar的赖条，就是針對我們的App的頂部的Bar玩各種花樣~我們往下看失乾，看看他們把我們的App的"頂部欄"玩出個什么花樣常熙！

1 Toolbar

Toobar主要是用來替換ActionBar的，換句話說仗扬，ActionBar能做的症概，Toolbar都能做。如果你對ActionBar的使用比較熟悉早芭，你會發(fā)現(xiàn)Toolbar使用起來非常簡單彼城。ok，既然是替換退个，當(dāng)然用Toolbar的時候就得先去把ActionBar給隱藏掉啦~

隱藏ActionBar的方法有很多募壕，可以通過代碼的方式隱藏，也可以通過配置文件的方式语盈，我們主要是通過配置文件的方式來隱藏舱馅。在我們的styles.xml文件中的AppTheme標(biāo)簽中加入如下兩行：

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

當(dāng)然了，你也可以新建一個<style>標(biāo)簽刀荒，將上面兩行代碼加入代嗤，并且將這個新建的標(biāo)簽作為<application>的theme。還可以選擇通過將AppTheme的parent設(shè)置為Theme.AppCompat.Light.NoActionBar的方式缠借。方法很多干毅，可以自己隨便選。

接下來就是將Toolbar放入到布局文件（沒啥好解釋的）：

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

最后將Toobar作為“ActionBar”來用

 Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("這里是Title");
        toolbar.setSubtitle("這里是子標(biāo)題");
        toolbar.setLogo(R.drawable.icon); 
        setSupportActionBar(toolbar);

可以對Toolbar設(shè)置Logo泼返、標(biāo)題硝逢、子標(biāo)題等等_{還有很多其他的設(shè)置，自己去慢慢玩绅喉，這里不提啦}渠鸽。當(dāng)然了，也可以在布局文件中設(shè)置這些柴罐，在布局文件設(shè)置就不寫啦徽缚，hongyang大神有篇博客寫的挺好的《 Android 5.x Theme 與 ToolBar 實(shí)戰(zhàn) 》可以去參考一下。

看看效果：

Toolbar

如果Toolbar僅僅是用來對以往的ActionBar做一次替換革屠，那也太沒創(chuàng)意啦猎拨！完全沒必要去替換了，因?yàn)樗鼈儽憩F(xiàn)出來的都是一樣的屠阻，而且并沒有讓我們覺得用起來比ActionBar方便。那為啥要替換呢额各，總應(yīng)該有他的理由吧：ActionBar是固定在頂部国觉，并不能移動，我覺得這是最大的不好虾啦，而我們的ToolBar可以讓我們隨便擺放麻诀，就就可以帶來很多靈活性和效果啦痕寓！

正如你所看的這樣，Toolbar根本就不夠看的蝇闭，一點(diǎn)都不復(fù)雜呻率。接下來我們繼續(xù)學(xué)習(xí)在Toolbar上面再套一層父View，讓Toolbar更有互動性呻引。

2 AppBarLayout

AppBarLayout繼承自LinearLayout礼仗，布局方向?yàn)榇怪狈较颉Ｋ阅憧梢园阉?dāng)成垂直布局的LinearLayout來使用逻悠。AppBarLayout是在LinearLayou上加了一些材料設(shè)計(jì)的概念元践，它可以讓你定制當(dāng)某個可滾動View的滾動手勢發(fā)生變化時，其內(nèi)部的子View實(shí)現(xiàn)何種動作童谒。

請注意：上面提到的某個可滾動View单旁，可以理解為某個ScrollView。怎么理解上面的話呢饥伊？就是說象浑，當(dāng)某個ScrollView發(fā)生滾動時，你可以定制你的“頂部欄”應(yīng)該執(zhí)行哪些動作（如跟著一起滾動琅豆、保持不動等等）愉豺。那某個可移動的View到底是哪個可移動的View呢？這是由你自己指定的趋距！如何指定粒氧，我們后面說。

2.1 AppBarLayout子View的動作

內(nèi)部的子View通過在布局中加app:layout_scrollFlags設(shè)置執(zhí)行的動作节腐，那么app:layout_scrollFlags可以設(shè)置哪些動作呢外盯？分別如下：

（1） scroll:值設(shè)為scroll的View會跟隨滾動事件一起發(fā)生移動。

什么意思呢翼雀？簡單的說饱苟，就是當(dāng)指定的ScrollView發(fā)生滾動時，該View也跟隨一起滾動狼渊，就好像這個View也是屬于這個ScrollView一樣箱熬。

一張gif足以說明：

scroll

對應(yīng)的布局文件

<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="?attr/colorPrimary"
            app:layout_scrollFlags="scroll" />
</android.support.design.widget.AppBarLayout>

（2） enterAlways:值設(shè)為enterAlways的View,當(dāng)ScrollView往下滾動時，該View會直接往下滾動狈邑。而不用考慮ScrollView是否在滾動城须。

看個動畫片（Y(^o)Y）（ToolBar高度設(shè)為：?android:attr/actionBarSize,app:layout_scrollFlags="scroll|enterAlways"）：

scroll|enterAlways

（3） exitUntilCollapsed：值設(shè)為exitUntilCollapsed的View，當(dāng)這個View要往上逐漸“消逝”時米苹，會一直往上滑動糕伐，直到剩下的的高度達(dá)到它的最小高度后，再響應(yīng)ScrollView的內(nèi)部滑動事件蘸嘶。

怎么理解呢良瞧？簡單解釋：在ScrollView往上滑動時陪汽，首先是View把滑動事件“奪走”，由View去執(zhí)行滑動褥蚯，直到滑動最小高度后挚冤，把這個滑動事件“還”回去，讓ScrollView內(nèi)部去上滑赞庶⊙档玻看個gif感受一下（圖中將高度設(shè)的比較大:200dp，并將最小高度設(shè)置為?android:attr/actionBarSize,app:layout_scrollFlags="scroll|exitUntilCollapsed"）：

scroll|exitUntilCollapsed

（4） enterAlwaysCollapsed：是enterAlways的附加選項(xiàng)尘执，一般跟enterAlways一起使用舍哄，它是指，View在往下“出現(xiàn)”的時候誊锭，首先是enterAlways效果表悬，當(dāng)View的高度達(dá)到最小高度時，View就暫時不去往下滾動丧靡，直到ScrollView滑動到頂部不再滑動時蟆沫，View再繼續(xù)往下滑動嗜逻，直到滑到View的頂部結(jié)束叼丑。

來個gif感受一下（圖中將高度設(shè)的比較大:200dp，并將最小高度設(shè)置為?android:attr/actionBarSize,app:layout_scrollFlags="scroll|enerAlways|enterAlwaysCollapsed"）：

scroll|enerAlways|enterAlwaysCollapsed

2.2 將AppBarLayout與ScrollView關(guān)聯(lián)起來

前面說了一直反復(fù)說“當(dāng)ScrollView發(fā)生滾動時”轧膘，那么怎么將AppBarLayout與ScrollView關(guān)聯(lián)起來呢熬荆？我們注意到舟山，AppBarLayout與ScrollView之間動作“相互依賴”，這不就是我們上一篇《CoordinateLayout的使用如此簡單 》所學(xué)的內(nèi)容嗎卤恳？把ScrollView和AppBarLayout作為CoordinateLayout的子View累盗，然后編寫一個Behavior，在這個Behavior里面判斷當(dāng)前的操作是應(yīng)該讓ScrollView時刻保持在AppBarLayout之下（即只要改變AppBarLayout的位置就可以一起滑動）突琳，還是應(yīng)該讓ScrollView內(nèi)部滾動而不讓AppBarLayout位置發(fā)生變化等等這些需求若债，都是可以在Behavior里面處理的。你可以去針對你的ScrollView編寫B(tài)ehavior拆融。然而蠢琳，我們看到我們的AppBarLayout事先的功能比較復(fù)雜，如果我們自己去定義這樣的效果镜豹，代碼非常復(fù)雜傲须，還要考慮很多方面，好在Android幫我們寫好啦趟脂，我們直接用就是了泰讽，這個ScrollView就是NestedScrollView，請注意，它并沒有繼承ScrollView菇绵，它繼承的是FrameLayout，但是它實(shí)現(xiàn)的效果把它可以看成是ScrollView镇眷。

把NestedScrollView放入到我們的layout文件里面就可以啦~~_{咬最，很方便}

 <android.support.v4.widget.NestedScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

       <!--將你的內(nèi)容放在這里-->

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

有沒有注意到有個屬性：app:layout_behavior="@string/appbar_scrolling_view_behavior",它就是指定Behavior的，appbar_scrolling_view_behavior對應(yīng)的類的名稱是：android.support.design.widget.AppBarLayout$ScrollingViewBehavior感興趣的可以去分析源碼欠动。

好了永乌，我們現(xiàn)在會用AppBarLayout啦~是不是發(fā)現(xiàn)用起來so easy!接下來我們把剩下CollapsingToolbarLayout的給"消化"掉！

3 CollapsingToolbarLayout

CollapsingToolbarLayout是用來對Toolbar進(jìn)行再次包裝的ViewGroup具伍，主要是用于實(shí)現(xiàn)折疊（其實(shí)就是看起來像伸縮~）的App Bar效果翅雏。它需要放在AppBarLayout布局里面，并且作為AppBarLayout的直接子View人芽。CollapsingToolbarLayout主要包括幾個功能（參照了官方網(wǎng)站上內(nèi)容望几，略加自己的理解進(jìn)行解釋）：

(1) 折疊Title（Collapsing title）：當(dāng)布局內(nèi)容全部顯示出來時，title是最大的萤厅，但是隨著View逐步移出屏幕頂部橄抹，title變得越來越小。你可以通過調(diào)用setTitle函數(shù)來設(shè)置title惕味。

(2)內(nèi)容紗布（Content scrim）：根據(jù)滾動的位置是否到達(dá)一個閥值楼誓，來決定是否對View“蓋上紗布”∶樱可以通過setContentScrim(Drawable)來設(shè)置紗布的圖片.

(3)狀態(tài)欄紗布（Status bar scrim)：根據(jù)滾動位置是否到達(dá)一個閥值決定是否對狀態(tài)欄“蓋上紗布”疟羹，你可以通過setStatusBarScrim(Drawable)來設(shè)置紗布圖片，但是只能在LOLLIPOP設(shè)備上面有作用禀倔。

(4)視差滾動子View(Parallax scrolling children):子View可以選擇在當(dāng)前的布局當(dāng)時是否以“視差”的方式來跟隨滾動榄融。（PS:其實(shí)就是讓這個View的滾動的速度比其他正常滾動的View速度稍微慢一點(diǎn)）。將布局參數(shù)app:layout_collapseMode設(shè)為parallax

(5)將子View位置固定(Pinned position children)：子View可以選擇是否在全局空間上固定位置蹋艺，這對于Toolbar來說非常有用剃袍，因?yàn)楫?dāng)布局在移動時，可以將Toolbar固定位置而不受移動的影響捎谨。 將app:layout_collapseMode設(shè)為pin民效。

了解這些概念后，我們來看看布局吧~

<?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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:expandedTitleMarginEnd="64dp"
            app:expandedTitleMarginStart="48dp"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <ImageView
                android:id="@+id/main.backdrop"
                android:layout_width="wrap_content"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/material_img"
                app:layout_collapseMode="parallax" />

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?android:attr/actionBarSize"
                app:layout_collapseMode="pin"  />

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

    <android.support.v4.widget.NestedScrollView

        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="50dp"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/my_txt"
            android:textSize="20sp" />

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

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

上面的都看得懂吧涛救，每個陌生的屬性都是講過的哦畏邢，忘記了的話回頭看，稍微解釋一下检吆，圖片被設(shè)置為有視差的滑動舒萎，Toolbar設(shè)置為固定不動，另外蹭沛，CollapsingToolbarLayout會對title進(jìn)行放大和縮小臂寝，我們看看效果吧~

CollapsingToolbarLayout效果

如果你希望拖動過程中狀態(tài)欄是透明的章鲤，可以在CollapsingToolbarLayout中加 app:statusBarScrim="@android:color/transparent"，并且在onCreate中調(diào)用getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS)將狀態(tài)欄設(shè)置為透明就好啦~

獻(xiàn)上源碼咆贬，請笑納：http://download.csdn.net/detail/huachao1001/9538934