先看下效果图
我们先看下布局文件：
<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"android:layout_width="match_parent"android:layout_height="match_parent"><android.support.design.widget.AppBarLayoutandroid:id="@+id/abl_bar"android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.design.widget.CollapsingToolbarLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"app:layout_scrollFlags="scroll|exitUntilCollapsed|snap"><includelayout="@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.Toolbarandroid:layout_width="match_parent"android:layout_height="50dp"app:contentInsetLeft="0dp"app:contentInsetStart="0dp"app:layout_collapseMode="pin"><includeandroid:id="@+id/include_toolbar_expand"layout="@layout/include_toolbar_expand" /><includeandroid: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.NestedScrollViewandroid:layout_width="match_parent"android:layout_height="wrap_content"app:layout_behavior="@string/appbar_scrolling_view_behavior"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><TextViewandroid:layout_width="match_parent"android:layout_height="350dp"android:gravity="center_horizontal"android:padding="20dp"android:text="上下可以滑动的功能区" /><TextViewandroid:layout_width="match_parent"android:layout_height="350dp"android:gravity="center_horizontal"android:padding="20dp"android:text="上下可以滑动的功能区" /><TextViewandroid:layout_width="match_parent"android:layout_height="350dp"android:gravity="center_horizontal"android:padding="20dp"android:text="上下可以滑动的功能区" /><TextViewandroid: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;@Overrideprotected 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() {@Overridepublic void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {//AppBarLayout竖直方向偏移距离pxint absVerticalOffset = Math.abs(verticalOffset);//AppBarLayout总的距离pxint 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，请正确姿势导入，不会导入的请看下面动态图：
下载源码：源码下载
有人反馈没有C币，那我提供个GitHub地址吧：
GitHub下载
