先看下效果圖

?

我們先看下布局文件：

<?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.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下載

總結

以上是生活随笔為你收集整理的高仿美团钱包首页CollapsingToolbarLayout监听滑动隐藏效果(公司项目)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。