AppBarLayout使用與詳解

先來看看效果圖（圖檔借用的哈，效果是這樣的）

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_coordinator_toolbar_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.ws.scrollviewdemo.CoordinatorToolbarTest">

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

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

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:src="@drawable/ic_pay_zhifubao"
                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.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="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

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

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_pay_yilian" />

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/ic_pay_yilian" />

            <!--……此處n個ImageView，為了滑動的效果-->

        </LinearLayout>

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

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

在這個布局中我們可以看到幾個陌生而又熟悉的控件：CoordinatorLayout、NestedScrollView、CollapsingToolbarLayout、Toolbar還有AppBarLayout。

1、CoordinatorLayout

CoordinatorLayout詳解

CoordinatorLayout簡單說就是作為父布局來協調子View，為什麼要用它呢？在android的開發文檔中說，如果AppBarLayout用其他的ViewGroup會不起作用，是以就老老實實的按着文檔搞吧……^_^。

2、NestedScrollView

看上面的效果圖，可以了解為滑動下面的可以滾動的控件，使上面的AppBarLayout也可以動，是以這就需要上面提到的那個可以協調子View的父 布局了；那麼怎麼将下面滾動的控件和上面的AppbarLayout關聯起來呢？我門可以看到下面的可滾動的控件設定了一個layout_behavior的屬性，對就是根據它關聯的，自己去寫這個Behavior很不友善，文檔已經告訴我們了一個已經具有Behavior的可滾動的控件NestedScrollView。

3、Toolbar

Toolbar就不用多說了吧？

想了解看ToolBar詳解

4、CollapsingToolbarLayout

CollapsingToolbarLayout是一個包裹ToolBar并實作了可折疊的app bar，它被設計用作AppBarLayout的直接子View。

大概的原理都是這樣，下面來介紹一下代碼裡出現的還有一些沒有出現的屬性吧：

1、AppBarLayout的子View應該設定app:layout_scrollFlags屬性，可設定的值為：

1）scrol：View設定為該值時，會跟随滾動事件一起滾動，就像和NestedScrollView是一體的，一起動。

2）enterAlways：View設定為該值時，當NestedScrollView向下滑動的時候，View會直接向下滑動，不考慮NestedScrollView是否在滑動。

3）exitUntilCollapsed：View設定為該值的時候，當這個View要往上逐漸“消逝”時，會一直往上滑動，直到剩下的的高度達到它的最小高度後，再響應ScrollView的内部滑動事件。（android:attr/actionBarSize最小高度）。

4）enterAlwaysCollapsed：是enterAlways的附加選項，一般跟enterAlways一起使用，它是指，View在往下“出現”的時候，首先是enterAlways效果，當View的高度達到最小高度時，View就暫時不去往下滾動，直到ScrollView滑動到頂部不再滑動時，View再繼續往下滑動，直到滑到View的頂部結束。

2、CollapsingToolbarLayout主要包括幾個功能：

(1) 折疊Title（Collapsing title）：當布局内容全部顯示出來時，title是最大的，但是随着View逐漸移出螢幕頂部，title變得越來越小。你可以通過調用setTitle函數來設定title。

(2)内容紗布（Content scrim）：根據滾動的位置是否到達一個閥值，來決定是否對View“蓋上紗布”。可以通過setContentScrim(Drawable)來設定紗布的圖檔.

(3)狀态欄紗布（Status barscrim)：根據滾動位置是否到達一個閥值決定是否對狀态欄“蓋上紗布”，你可以通過setStatusBarScrim(Drawable)來設定紗布圖檔，但是隻能在LOLLIPOP裝置上面有作用。

(4)視差滾動子View(Parallax scrolling children):子View可以選擇在目前的布局當時是否以“視差”的方式來跟随滾動。（PS:其實就是讓這個View的滾動的速度比其他正常滾動的View速度稍微慢一點）。将布局參數app:layout_collapseMode設為parallax

(5)将子View位置固定(Pinned position children)：子View可以選擇是否在全局空間上固定位置，這對于Toolbar來說非常有用，因為當布局在移動時，可以将Toolbar固定位置而不受移動的影響。

将app:layout_collapseMode設為pin。

參考文檔