日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Android?App頁面滑動標題欄顏色漸變詳解_Android

作者：任縹緲 ? 更新時間： 2022-04-21 編程語言

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

在實際開發中，常見的滑動有列表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。然后進行透明度的計算即可。

原文鏈接：https://blog.csdn.net/haoyuegongzi/article/details/85053509

欄目分類
最近更新