Android?App頁面滑動標(biāo)題欄顏色漸變詳解

更新時間：2022年02月16日 13:17:09 作者：任縹緲

這篇文章主要為大家詳細(xì)介紹了Android?App頁面滑動標(biāo)題欄顏色漸變，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

通常，我們會被要求實現(xiàn)類似支付寶首頁的特效：隨著界面的滑動，標(biāo)題欄的背景透明度漸變。

在實際開發(fā)中，常見的滑動有列表RecyclerView(ListView)滑動，NestedScrollView(ScrollView)嵌套滑動等等。

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

一、RecyclerView滑動標(biāo)題欄漸變

廢話不多說，直接擼代碼：
布局文件如下：

<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標(biāo)題欄-->
? ? <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;
? ? ? ? ? ? ? ? //當(dāng)滑動的距離 <= 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高度相等的情況，但是實際測試時發(fā)現(xiàn)，標(biāo)題欄的背景色
? ? ? ? ? ? ? ? ? ? //很少能達到完全不透明的情況，所以這里又判斷了滑動距離大于toolbar高度的情況，
? ? ? ? ? ? ? ? ? ? //將標(biāo)題欄的顏色設(shè)置為完全不透明狀態(tài)
? ? ? ? ? ? ? ? ? ? toolbar.setBackgroundResource(R.color.colorPrimary);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
}

上面代碼中的 dealData()方法很簡單就是想一個String型List里面添加數(shù)據(jù)，沒什么難度。

關(guān)鍵點在于給rvZhangjie.addOnScrollListener()也就是給RecyclerView設(shè)置滑動監(jiān)聽，并復(fù)寫onScrolled()方法。該方法里面3個參數(shù)：

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

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

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

最后再將alpha透明度值設(shè)置給ToolBar：

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

二、NestedScrollView滑動標(biāo)題欄漸變

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

代碼細(xì)節(jié)我就不貼出來了，就說說關(guān)鍵的對NestedScrollView的監(jiān)聽和偏移量的處理：

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);
? ? ? ? ? ? }
? ? ? ? }
? ? });

通過上面的代碼，很容易發(fā)現(xiàn)NestedScrollView滑動漸變和RecyclerView的滑動漸變就一回事。代碼實現(xiàn)上差別很細(xì)微。不同的是RecyclerView的滑動漸變哪里，我們要通過對dy的累加來獲得RecyclerView在垂直方向的滑動偏移量。而在NestedScrollView的滑動漸變里面，NestedScrollView在x或者y方向的滑動偏移量，系統(tǒng)已經(jīng)幫我們計算出來了：scrollX或者scrollY。然后進行透明度的計算即可。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: