高仿美团钱包首页CollapsingToolbarLayout监听滑动隐藏效果(公司项目)

先看下效果图

我们先看下布局文件：

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/abl_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

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

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

            <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_expand"
                    layout="@layout/include_toolbar_expand" />

                <include
                    android:id="@+id/include_toolbar_collpase"
                    layout="@layout/include_toolbar_collapse" />
            </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="match_parent"
            android:orientation="vertical">


            <TextView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:gravity="center_horizontal"
                android:padding="20dp"
                android:text="上下可以滑动的功能区" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:gravity="center_horizontal"
                android:padding="20dp"
                android:text="上下可以滑动的功能区" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:gravity="center_horizontal"
                android:padding="20dp"
                android:text="上下可以滑动的功能区" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="350dp"
                android:gravity="center_horizontal"
                android:padding="20dp"
                android:text="上下可以滑动的功能区" />
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

再看下activity：

package com.qfy.scrollviewdemo;

import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.AppBarLayout;
import android.support.v4.content.ContextCompat;
import android.support.v7.app.AppCompatActivity;
import android.view.View;

public class MainActivity extends AppCompatActivity {

    private int mMaskColor;
    private View include_toolbar_expand;
    private View include_toolbar_collapse;
    private View v_toolbar_expand_mask;
    private View v_toolbar_collapse_mask;
    private View v_title_expand_mask;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        AppBarLayout abl_bar = findViewById(R.id.abl_bar);
        abl_bar.addOnOffsetChangedListener(mOnOffsetChangedListener);
        mMaskColor = ContextCompat.getColor(this, R.color.colorMain);
        include_toolbar_expand = findViewById(R.id.include_toolbar_expand);
        include_toolbar_collapse = findViewById(R.id.include_toolbar_collpase);
        v_toolbar_expand_mask = findViewById(R.id.v_toolbar_expand_mask);
        v_toolbar_collapse_mask = findViewById(R.id.v_toolbar_collapse_mask);
        v_title_expand_mask = findViewById(R.id.v_title_expand_mask);
    }

    private AppBarLayout.OnOffsetChangedListener mOnOffsetChangedListener = new AppBarLayout.OnOffsetChangedListener() {
        @Override
        public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
            //AppBarLayout竖直方向偏移距离px
            int absVerticalOffset = Math.abs(verticalOffset);
            //AppBarLayout总的距离px
            int totalScrollRange = appBarLayout.getTotalScrollRange();
            //背景颜色转化成RGB的渐变色
            int argb = Color.argb(absVerticalOffset, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor));
            int argbDouble = Color.argb(absVerticalOffset * 2, Color.red(mMaskColor), Color.green(mMaskColor), Color.blue(mMaskColor));
            //appBarLayout上滑一半距离后小图标应该由渐变到全透明
            int title_small_offset = (200 - absVerticalOffset) < 0 ? 0 : 200 - absVerticalOffset;
            int title_small_argb = Color.argb(title_small_offset * 2, Color.red(mMaskColor),
                    Color.green(mMaskColor), Color.blue(mMaskColor));
            //appBarLayout上滑不到一半距离
            if (absVerticalOffset <= totalScrollRange / 2) {
                include_toolbar_expand.setVisibility(View.VISIBLE);
                include_toolbar_collapse.setVisibility(View.GONE);
                //为了和下面的大图标渐变区分,乘以2倍渐变
                v_toolbar_expand_mask.setBackgroundColor(argbDouble);
            } else {
                include_toolbar_expand.setVisibility(View.GONE);
                include_toolbar_collapse.setVisibility(View.VISIBLE);
                //appBarLayout上滑一半距离后小图标应该由渐变到全透明
                v_toolbar_collapse_mask.setBackgroundColor(title_small_argb);

            }
            //上滑时遮罩由全透明到半透明
            v_title_expand_mask.setBackgroundColor(argb);
        }
    };
}

再看下需要的库：

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation 'com.android.support:appcompat-v7:28.0.0-rc01'
    implementation 'com.android.support.constraint:constraint-layout:1.1.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'com.android.support:design:28.0.0-rc01'
}

监听方法已在activity中，如果看不到的可以自己下载源码查看：

注意：此demo为module不是project，请正确姿势导入，不会导入的请看下面动态图：

下载源码：源码下载