Android?App頁面滑動標(biāo)題欄顏色漸變詳解
通常,我們會被要求實(shí)現(xiàn)類似支付寶首頁的特效:隨著界面的滑動,標(biāo)題欄的背景透明度漸變。
在實(shí)際開發(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背景色的透明度,達(dá)到漸變的效果 ? ? ? ? ? ? ? ? if (mDistanceY <= toolbarHeight) { ? ? ? ? ? ? ? ? ? ? float scale = (float) mDistanceY / toolbarHeight; ? ? ? ? ? ? ? ? ? ? float alpha = scale * 255; ? ? ? ? ? ? ? ? ? ? toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0)); ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? //上述雖然判斷了滑動距離與toolbar高度相等的情況,但是實(shí)際測試時發(fā)現(xiàn),標(biāo)題欄的背景色 ? ? ? ? ? ? ? ? ? ? //很少能達(dá)到完全不透明的情況,所以這里又判斷了滑動距離大于toolbar高度的情況, ? ? ? ? ? ? ? ? ? ? //將標(biāo)題欄的顏色設(shè)置為完全不透明狀態(tài) ? ? ? ? ? ? ? ? ? ? toolbar.setBackgroundResource(R.color.colorPrimary); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? }); }
上面代碼中的 dealData()方法很簡單就是想一個String型List里面添加數(shù)據(jù),沒什么難度。
關(guān)鍵點(diǎ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)題欄漸變
其實(shí)NestedScrollView滑動漸變和RecyclerView的滑動漸變原理是一樣的,本質(zhì)上都是監(jiān)聽View滑動的距離,通過距離換算成透明度值。只不過二者的滑動偏移量稍有點(diǎn)不同。
代碼細(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的滑動漸變就一回事。代碼實(shí)現(xiàn)上差別很細(xì)微。不同的是RecyclerView的滑動漸變哪里,我們要通過對dy的累加來獲得RecyclerView在垂直方向的滑動偏移量。而在NestedScrollView的滑動漸變里面,NestedScrollView在x或者y方向的滑動偏移量,系統(tǒng)已經(jīng)幫我們計算出來了:scrollX或者scrollY。然后進(jìn)行透明度的計算即可。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android 實(shí)現(xiàn)秒轉(zhuǎn)換成時分秒的方法
這篇文章主要介紹了Android 實(shí)現(xiàn)秒轉(zhuǎn)換成時分秒的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-05-05Android 觸摸事件監(jiān)聽(Activity層,ViewGroup層,View層)詳細(xì)介紹
這篇文章主要介紹了Android 觸摸事件監(jiān)聽(Activity層,ViewGroup層,View層)詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-12-12Android?DataBinding類關(guān)系深入探究
看了谷歌官方文章確實(shí)寫的太簡略了,甚至看完之后有很多地方還不知道怎么回事兒或者怎么用,那么接下來我將通過文章全面介紹一下DataBinding類關(guān)系2022-11-11android LabelView實(shí)現(xiàn)標(biāo)簽云效果
這篇文章主要為大家詳細(xì)介紹了android LabelView實(shí)現(xiàn)標(biāo)簽云效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2018-05-05解決Android studio中關(guān)于模擬器的/data目錄不能顯示的問題
這篇文章主要介紹了解決Android studio中關(guān)于模擬器的/data目錄不能顯示的問題,主要原因還是我們權(quán)限不夠,當(dāng)前的用戶沒有權(quán)限訪問data目錄。具體解決方法大家跟隨腳本之家小編一起看看吧2018-06-06