仿支付寶首頁頭部伸縮效果

每次打開支付寶首頁滑動，頭部的伸縮動畫甚是吸引人。於是自己決定動手來實現一個。

無圖言虛空，效果圖：

首先看到這種效果，第一反應就是coordinatorLayout佈局，android studio新建項目時，可以直接新建個Scrolling Activity來查看demo效果。

官方自帶的佈局示例：

gradle關聯

implementation 'com.android.support:design:26.1.0'

簡單介紹使用到的幾個佈局：

coordinatorLayout

coordinatorLayout協調者佈局，用來協調其子view並以觸摸影響佈局的形式產生動畫效果的佈局。coordinatorLayout是一個頂級佈局。

appBarLayout

appBarLayout主要給子佈局配置屬性app:layout_scrollFlags，5個屬性值：
scroll：所有想滾動出屏幕的view都需要設置這個屬性值， 沒有設置這個屬性的view將被固定在屏幕頂部
enterAlways：任意向下的滾動都會導致該view變爲可見，啓用快速“返回模式”
enterAlwaysCollapsed：假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那麼view將在到達這個最小高度的時候開始顯示，並且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。
exitUntilCollapsed：當你定義了一個minHeight，此佈局將在滾動到達這個最小高度的時候摺疊。
snap：當一個滾動事件結束，如果視圖是部分可見的，那麼它將被滾動到收縮或展開。例如，如果視圖只有底部25%顯示，它將摺疊。相反，如果它的底部75%可見，那麼它將完全展開。

這裏的屬性可以組合使用查看效果。
例如demo中自帶的
app:layout_scrollFlags="scroll|exitUntilCollapsed" 滑上去toolbar收縮在頂部：

 

修改屬性改成這樣的：app:layout_scrollFlags="scroll|enterAlways" 滑上去toolbar滑出屏幕：

 

collapsingToolbarLayout

collapsingToolbarLayout可以作爲AppBarLayout的子view，可以控制包含在其中的控件在滾動時的響應事件，子view可以是個可摺疊的Toolbar，app:layout_collapseMode設置摺疊模式。
3種摺疊模式：
off：默認屬性，佈局將正常顯示，無摺疊行爲。
pin：摺疊後，此佈局將固定在頂部。
parallax：摺疊時，此佈局也會有視差摺疊效果。
當其子佈局設置了parallax模式時，我們還可以通過app:layout_collapseParallaxMultiplier設置視差滾動因子，值爲：0~1。

接下來，我們就使用以上的屬性來完成demo

實現原理

1、coordinatorLayout嵌套appBarLayout

2、appBarLayout的子viewcollapsingToolbarLayout設置屬性
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
讓頭部隨着內容下拉而展開，隨着內容上拉而收縮。

3、collapsingToolbarLayout的子佈局有兩種，展開時顯示的佈局和Toolbar，其中Toolbar又包含了兩種佈局，展開時的和收縮時的。
展開時，(掃一掃、付錢)的佈局：

<include
    layout="@layout/include_open"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="50dp"
    app:layout_collapseMode="parallax"
    app:layout_collapseParallaxMultiplier="0.7" />

layout_marginTop="50dp"預留出toolbar的高度，避免佈局重疊。

toolbar裏的兩種佈局：

<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="50dp"
app:contentInsetLeft="0dp"
app:contentInsetStart="0dp"
app:layout_collapseMode="pin">
 
<include
    android:id="@+id/include_toolbar_open"
    layout="@layout/include_toolbar_open" />
 
<include
    android:id="@+id/include_toolbar_close"
    layout="@layout/include_toolbar_close" />
 
</android.support.v7.widget.Toolbar>

toolbar裏的兩個佈局，可以通過監聽AppBarLayout的移動控制顯示和隱藏。

4、最下面的佈局可以是NestedScrollView,一定要在佈局中設置以下屬性，這裏我直接用的demo中的佈局：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

5、滑動過程中，各控件的透明度會有漸變的效果，這裏採用類似遮罩的效果，每個include佈局裏都有個遮罩的view，在滑動過程中監聽appBarLayout的addOnOffsetChangedListener，通過計算滑動的距離，逐漸改變透明度。

@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
    //垂直方向偏移量
    int offset = Math.abs(verticalOffset);
    //最大偏移距離
    int scrollRange = appBarLayout.getTotalScrollRange();
    if (offset <= scrollRange / 2) {//當滑動沒超過一半，展開狀態下toolbar顯示內容，根據收縮位置，改變透明值
        toolbarOpen.setVisibility(View.VISIBLE);
        toolbarClose.setVisibility(View.GONE);
        //根據偏移百分比 計算透明值
        float scale2 = (float) offset / (scrollRange / 2);
        int alpha2 = (int) (255 * scale2);
        bgToolbarOpen.setBackgroundColor(Color.argb(alpha2, 25, 131, 209));
    } else {//當滑動超過一半，收縮狀態下toolbar顯示內容，根據收縮位置，改變透明值
        toolbarClose.setVisibility(View.VISIBLE);
        toolbarOpen.setVisibility(View.GONE);
        float scale3 = (float) (scrollRange  - offset) / (scrollRange / 2);
        int alpha3 = (int) (255 * scale3);
        bgToolbarClose.setBackgroundColor(Color.argb(alpha3, 25, 131, 209));
    }
    //根據偏移百分比計算掃一掃佈局的透明度值
    float scale = (float) offset / scrollRange;
    int alpha = (int) (255 * scale);
    bgContent.setBackgroundColor(Color.argb(alpha, 25, 131, 209));
}

詳細代碼見
github地址：github.com/taixiang/al…