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

原文連接：https://mp.weixin.qq.com/s/GegMt7GDBCFVoUgFQWG3Swandroid

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

無圖言虛空，效果圖：github

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

官方自帶的佈局示例：app

gradle關聯

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

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

coordinatorLayout

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

appBarLayout

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

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

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

collapsingToolbarLayout

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

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

實現原理

一、coordinatorLayout嵌套appBarLayout

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

三、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的移動控制顯示和隱藏。

四、最下面的佈局能夠是NestedScrollView,必定要在佈局中設置如下屬性，這裏我直接用的demo中的佈局：

app:layout_behavior="@string/appbar_scrolling_view_behavior"

五、滑動過程當中，各控件的透明度會有漸變的效果，這裏採用相似遮罩的效果，每一個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 拉你入羣。