原文鏈接：https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Sw

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

無圖言虛空，效果圖：

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

官方自帶的布局示例：

gradle關聯

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

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

coordinatorLayout

coordinatorLayout

appBarLayout

appBarLayout主要給子布局配置屬性app:layout_scrollFlags，5個屬性值：
scroll：所有想滾動出屏幕的view都需要設置這個屬性值， 沒有設置這個屬性的view將被固定在屏幕頂部
enterAlways：任意向下的滾動都會導致該view變為可見，啟用快速“返回模式”
enterAlwaysCollapsed：假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那麽view將在到達這個最小高度的時候開始顯示，並且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。
exitUntilCollapsed

這裏的屬性可以組合使用查看效果。
例如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地址：https://github.com/taixiang/alihome

歡迎關註我的博客：https://blog.manjiexiang.cn/
更多精彩歡迎關註微信號：春風十裏不如認識你

有個「佛系碼農圈」，歡迎大家加入暢聊，開心就好！

過期了，可加我微信 tx467220125 拉你入群。

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