高仿美團錢包首頁CollapsingToolbarLayout監聽滑動隱藏效果(公司專案)
阿新 • • 發佈：2019-02-20
先看下效果圖
我們先看下佈局檔案：
<?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，請正確姿勢匯入，不會匯入的請看下面動態圖：
下載原始碼：原始碼下載