支付寶首頁滑動
首先看到這種效果，第一反應就是coordinatorLayout布局，android studio新建項目時，可以直接新建個Scrolling Activity來查看demo效果。
效果圖：
gradle關聯(lián)
implementation 'com.android.support:design:28.+'
簡單介紹使用到的幾個布局：
coordinatorLayout
coordinatorLayout協(xié)調(diào)者布局，用來協(xié)調(diào)其子view并以觸摸影響布局的形式產(chǎn)生動畫效果的布局。coordinatorLayout是一個頂級布局。
appBarLayout
appBarLayout主要給子布局配置屬性app:layout_scrollFlags，5個屬性值：
scroll：所有想滾動出屏幕的view都需要設置這個屬性值， 沒有設置這個屬性的view將被固定在屏幕頂部
enterAlways：任意向下的滾動都會導致該view變?yōu)榭梢?，啟用快速“返回模式?/p>
enterAlwaysCollapsed：假設你定義了一個最小高度（minHeight）同時enterAlways也定義了，那么view將在到達這個最小高度的時候開始顯示，并且從這個時候開始慢慢展開，當滾動到頂部的時候展開完。
exitUntilCollapsed：當你定義了一個minHeight，此布局將在滾動到達這個最小高度的時候折疊。
snap：當一個滾動事件結束，如果視圖是部分可見的，那么它將被滾動到收縮或展開。例如，如果視圖只有底部25%顯示，它將折疊。相反，如果它的底部75%可見，那么它將完全展開。
這里的屬性可以組合使用。
例如demo中自帶的
滑上去toolbar收縮在頂部
app:layout_scrollFlags="scroll|exitUntilCollapsed"
滑上去toolbar滑出屏幕
app:layout_scrollFlags="scroll|enterAlways"
collapsingToolbarLayout
collapsingToolbarLayout可以作為AppBarLayout的子view，可以控制包含在其中的控件在滾動時的響應事件，子view可以是個可折疊的Toolbar，app:layout_collapseMode設置折疊模式。
3種折疊模式：
off：默認屬性，布局將正常顯示，無折疊行為。
pin：折疊后，此布局將固定在頂部。
parallax：折疊時，此布局也會有視差折疊效果。
當其子布局設置了parallax模式時，我們還可以通過app:layout_collapseParallaxMultiplier設置視差滾動因子，值為：0~1。
接下來，我們就使用以上的屬性來完成demo
實現(xiàn)原理
1、coordinatorLayout嵌套appBarLayout
2、appBarLayout的子view collapsingToolbarLayout設置屬性
app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"
讓頭部隨著內(nèi)容下拉而展開，隨著內(nèi)容上拉而收縮。
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里的兩個布局，可以通過監(jiān)聽AppBarLayout的移動控制顯示和隱藏。
4、最下面的布局可以是NestedScrollView,一定要在布局中設置以下屬性，這里我直接用的demo中的布局：
app:layout_behavior="@string/appbar_scrolling_view_behavior"
5、滑動過程中，各控件的透明度會有漸變的效果，這里采用類似遮罩的效果，每個include布局里都有個遮罩的view，在滑動過程中監(jiān)聽appBarLayout的addOnOffsetChangedListener，通過計算滑動的距離，逐漸改變透明度。
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//垂直方向偏移量
int offset = Math.abs(verticalOffset);
//最大偏移距離
int scrollRange = appBarLayout.getTotalScrollRange();
if (offset <= scrollRange / 2) {//當滑動沒超過一半，展開狀態(tài)下toolbar顯示內(nèi)容，根據(jù)收縮位置，改變透明值
toolbarOpen.setVisibility(View.VISIBLE);
toolbarClose.setVisibility(View.GONE);
//根據(jù)偏移百分比 計算透明值
float scale2 = (float) offset / (scrollRange / 2);
int alpha2 = (int) (255 * scale2);
bgToolbarOpen.setBackgroundColor(Color.argb(alpha2, 25, 131, 209));
} else {//當滑動超過一半，收縮狀態(tài)下toolbar顯示內(nèi)容，根據(jù)收縮位置，改變透明值
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));
}
//根據(jù)偏移百分比計算掃一掃布局的透明度值
float scale = (float) offset / scrollRange;
int alpha = (int) (255 * scale);
bgContent.setBackgroundColor(Color.argb(alpha, 25, 131, 209));
}
詳細代碼見
github地址：https://github.com/huangziye/AliHome
