Android App頁面滑動標題列顏色漸變詳解

2022-02-16 16:00:22

通常，我們會被要求實現類似支付寶首頁的特效：隨著介面的滑動，標題列的背景透明度漸變。

在實際開發中，常見的滑動有列表RecyclerView(ListView)滑動，NestedScrollView(ScrollView)巢狀滑動等等。

本文主要從上述兩方面來探討滑動效果。

一、RecyclerView滑動標題列漸變

廢話不多說，直接擼程式碼：
佈局檔案如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:background="@color/white"
    tools:context=".scroll_toolbar.ScrollToolBarActivity">

    <!-- title標題列-->
    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/white">

        <ImageView
            android:id="@+id/ivBack"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="@dimen/qb_px_20"
            android:gravity="center_vertical"
            android:src="@drawable/theme_toolbar_btn_back_fg_normal0"
            android:textColor="#ffffff" />

        <TextView
            android:id="@+id/tvName"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="#666666"
            android:textSize="16sp"
            android:padding="@dimen/qb_px_20"
            android:text="RecyclerView控制titleBar漸變"/>
    </android.support.v7.widget.Toolbar>


    <android.support.v7.widget.RecyclerView
        android:id="@+id/rvZhangjie"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_marginLeft="@dimen/qb_px_50"
        android:layout_marginRight="@dimen/qb_px_50"
        android:layout_marginTop="@dimen/qb_px_20"
        android:background="@color/back_ground"/>
</LinearLayout>

Java程式碼如下：

private void toolBarColor(){
        Toolbar toolbar = findViewById(R.id.toolbar);
        ImageView  ivBack = findViewById(R.id.ivBack);
        TextView tvName = findViewById(R.id.tvName);
        RecyclerView  rvZhangjie = findViewById(R.id.rvZhangjie);
        List<String> stringList = dealData();
        ScrollAdapter scrollAdapter = new ScrollAdapter(this, stringList);
        LinearLayoutManager manager = new LinearLayoutManager(this);
        manager.setOrientation(LinearLayoutManager.VERTICAL);
        rvZhangjie.setLayoutManager(manager);
        rvZhangjie.setAdapter(scrollAdapter);

        rvZhangjie.addOnScrollListener(new RecyclerView.OnScrollListener() {
            @Override
            public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
                 //toolbar的高度
                toolbarHeight = toolbar.getBottom();
                //滑動的距離
                mDistanceY += dy;
                //當滑動的距離 <= toolbar高度的時候，改變Toolbar背景色的透明度，達到漸變的效果
                if (mDistanceY <= toolbarHeight) {
                    float scale = (float) mDistanceY / toolbarHeight;
                    float alpha = scale * 255;
                    toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));
                } else {
                    //上述雖然判斷了滑動距離與toolbar高度相等的情況，但是實際測試時發現，標題列的背景色
                    //很少能達到完全不透明的情況，所以這裡又判斷了滑動距離大於toolbar高度的情況，
                    //將標題列的顏色設定為完全不透明狀態
                    toolbar.setBackgroundResource(R.color.colorPrimary);
                }
            }
        });
}

上面程式碼中的 dealData()方法很簡單就是想一個String型List裡面新增資料，沒什麼難度。

關鍵點在於給rvZhangjie.addOnScrollListener()也就是給RecyclerView設定滑動監聽，並複寫onScrolled()方法。該方法裡面3個引數：

第一個RecyclerView recyclerView，這個很明顯就是目標RecyclerView；
第二個int dx，表示RecyclerView在水平X方向的相對滑動量；
第三個int dy，表示RecyclerView在垂直Y方向的相對滑動量；

我們可以通過累加計算RecyclerView滑動的距離相對於指定距離的百分比，來計算透明度的變化量：

mDistanceY += dy;
float scale = (float) mDistanceY / toolbarHeight;
float alpha = scale * 255;

最後再將alpha透明度值設定給ToolBar：

 toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));

二、NestedScrollView滑動標題列漸變

其實NestedScrollView滑動漸變和RecyclerView的滑動漸變原理是一樣的，本質上都是監聽View滑動的距離，通過距離換算成透明度值。只不過二者的滑動偏移量稍有點不同。

程式碼細節我就不貼出來了，就說說關鍵的對NestedScrollView的監聽和偏移量的處理：

nsvScroolBack.setOnScrollChangeListener(new View.OnScrollChangeListener() {
        @Override
        public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
            //scrollY > oldScrollY:向上滑動
            //scrollY < oldScrollY:向下滑動
            // scrollY:捲動過的距離。
            toolbarHeight = toolbar.getBottom() * 1.5f;
            if (scrollY <= toolbarHeight){
                float scale = (float)scrollY / toolbarHeight;
                float alpha =scale * 255;
                toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));
            }else {
                toolbar.setBackgroundColor(Color.BLUE);
            }
        }
    });

通過上面的程式碼，很容易發現NestedScrollView滑動漸變和RecyclerView的滑動漸變就一回事。程式碼實現上差別很細微。不同的是RecyclerView的滑動漸變哪裡，我們要通過對dy的累加來獲得RecyclerView在垂直方向的滑動偏移量。而在NestedScrollView的滑動漸變裡面，NestedScrollView在x或者y方向的滑動偏移量，系統已經幫我們計算出來了：scrollX或者scrollY。然後進行透明度的計算即可。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Android App頁面滑動標題列顏色漸變詳解

一、RecyclerView滑動標題列漸變

二、NestedScrollView滑動標題列漸變

熱門文章