Android?App頁(yè)面滑動(dòng)標(biāo)題欄顏色漸變?cè)斀?/h1>
更新時(shí)間:2022年02月16日 13:17:09 作者:任縹緲
這篇文章主要為大家詳細(xì)介紹了Android?App頁(yè)面滑動(dòng)標(biāo)題欄顏色漸變,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
通常,我們會(huì)被要求實(shí)現(xiàn)類似支付寶首頁(yè)的特效:隨著界面的滑動(dòng),標(biāo)題欄的背景透明度漸變。
在實(shí)際開發(fā)中,常見的滑動(dòng)有列表RecyclerView(ListView)滑動(dòng),NestedScrollView(ScrollView)嵌套滑動(dòng)等等。
本文主要從上述兩方面來探討滑動(dòng)效果。
一、RecyclerView滑動(dòng)標(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();
? ? ? ? ? ? ? ? //滑動(dòng)的距離
? ? ? ? ? ? ? ? mDistanceY += dy;
? ? ? ? ? ? ? ? //當(dāng)滑動(dòng)的距離 <= toolbar高度的時(shí)候,改變Toolbar背景色的透明度,達(dá)到漸變的效果
? ? ? ? ? ? ? ? if (mDistanceY <= toolbarHeight) {
? ? ? ? ? ? ? ? ? ? float scale = (float) mDistanceY / toolbarHeight;
? ? ? ? ? ? ? ? ? ? float alpha = scale * 255;
? ? ? ? ? ? ? ? ? ? toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));
? ? ? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? ? ? //上述雖然判斷了滑動(dòng)距離與toolbar高度相等的情況,但是實(shí)際測(cè)試時(shí)發(fā)現(xiàn),標(biāo)題欄的背景色
? ? ? ? ? ? ? ? ? ? //很少能達(dá)到完全不透明的情況,所以這里又判斷了滑動(dòng)距離大于toolbar高度的情況,
? ? ? ? ? ? ? ? ? ? //將標(biāo)題欄的顏色設(shè)置為完全不透明狀態(tài)
? ? ? ? ? ? ? ? ? ? toolbar.setBackgroundResource(R.color.colorPrimary);
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? });
}
上面代碼中的 dealData()方法很簡(jiǎn)單就是想一個(gè)String型List里面添加數(shù)據(jù),沒什么難度。
關(guān)鍵點(diǎn)在于給rvZhangjie.addOnScrollListener()也就是給RecyclerView設(shè)置滑動(dòng)監(jiān)聽,并復(fù)寫onScrolled()方法。該方法里面3個(gè)參數(shù):
第一個(gè)RecyclerView recyclerView,這個(gè)很明顯就是目標(biāo)RecyclerView;
第二個(gè)int dx,表示RecyclerView在水平X方向的相對(duì)滑動(dòng)量;
第三個(gè)int dy,表示RecyclerView在垂直Y方向的相對(duì)滑動(dòng)量;
我們可以通過累加計(jì)算RecyclerView滑動(dòng)的距離相對(duì)于指定距離的百分比,來計(jì)算透明度的變化量:
mDistanceY += dy;
float scale = (float) mDistanceY / toolbarHeight;
float alpha = scale * 255;
最后再將alpha透明度值設(shè)置給ToolBar:
?toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));
二、NestedScrollView滑動(dòng)標(biāo)題欄漸變
其實(shí)NestedScrollView滑動(dòng)漸變和RecyclerView的滑動(dòng)漸變?cè)硎且粯拥模举|(zhì)上都是監(jiān)聽View滑動(dòng)的距離,通過距離換算成透明度值。只不過二者的滑動(dòng)偏移量稍有點(diǎn)不同。
代碼細(xì)節(jié)我就不貼出來了,就說說關(guān)鍵的對(duì)NestedScrollView的監(jiān)聽和偏移量的處理:
nsvScroolBack.setOnScrollChangeListener(new View.OnScrollChangeListener() {
? ? ? ? @Override
? ? ? ? public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) {
? ? ? ? ? ? //scrollY > oldScrollY:向上滑動(dòng)
? ? ? ? ? ? //scrollY < oldScrollY:向下滑動(dòng)
? ? ? ? ? ? // scrollY:滾動(dòng)過的距離。
? ? ? ? ? ? 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滑動(dòng)漸變和RecyclerView的滑動(dòng)漸變就一回事。代碼實(shí)現(xiàn)上差別很細(xì)微。不同的是RecyclerView的滑動(dòng)漸變哪里,我們要通過對(duì)dy的累加來獲得RecyclerView在垂直方向的滑動(dòng)偏移量。而在NestedScrollView的滑動(dòng)漸變里面,NestedScrollView在x或者y方向的滑動(dòng)偏移量,系統(tǒng)已經(jīng)幫我們計(jì)算出來了:scrollX或者scrollY。然后進(jìn)行透明度的計(jì)算即可。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
相關(guān)文章
-
Android 實(shí)現(xiàn)秒轉(zhuǎn)換成時(shí)分秒的方法
這篇文章主要介紹了Android 實(shí)現(xiàn)秒轉(zhuǎn)換成時(shí)分秒的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下 2020-05-05
-
Android實(shí)現(xiàn)中國(guó)象棋附源碼下載
這篇文章主要詳細(xì)介紹了Android實(shí)現(xiàn)中國(guó)象棋的具體代碼,供大家參考,感興趣的小伙伴們可以參考一下 2016-05-05
-
Android 觸摸事件監(jiān)聽(Activity層,ViewGroup層,View層)詳細(xì)介紹
這篇文章主要介紹了Android 觸摸事件監(jiān)聽(Activity層,ViewGroup層,View層)詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下 2016-12-12
-
Android?DataBinding類關(guān)系深入探究
看了谷歌官方文章確實(shí)寫的太簡(jiǎn)略了,甚至看完之后有很多地方還不知道怎么回事兒或者怎么用,那么接下來我將通過文章全面介紹一下DataBinding類關(guān)系 2022-11-11
-
Android獲取手機(jī)的版本號(hào)等信息的代碼
這篇文章主要為大家詳細(xì)介紹了Android獲取手機(jī)的版本號(hào)等信息的代碼,代碼很精彩,感興趣的小伙伴們可以參考一下 2016-07-07
-
android LabelView實(shí)現(xiàn)標(biāo)簽云效果
這篇文章主要為大家詳細(xì)介紹了android LabelView實(shí)現(xiàn)標(biāo)簽云效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2018-05-05
-
解決Android studio中關(guān)于模擬器的/data目錄不能顯示的問題
這篇文章主要介紹了解決Android studio中關(guān)于模擬器的/data目錄不能顯示的問題,主要原因還是我們權(quán)限不夠,當(dāng)前的用戶沒有權(quán)限訪問data目錄。具體解決方法大家跟隨腳本之家小編一起看看吧 2018-06-06
最新評(píng)論
通常,我們會(huì)被要求實(shí)現(xiàn)類似支付寶首頁(yè)的特效:隨著界面的滑動(dòng),標(biāo)題欄的背景透明度漸變。
在實(shí)際開發(fā)中,常見的滑動(dòng)有列表RecyclerView(ListView)滑動(dòng),NestedScrollView(ScrollView)嵌套滑動(dòng)等等。
本文主要從上述兩方面來探討滑動(dòng)效果。
一、RecyclerView滑動(dòng)標(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(); ? ? ? ? ? ? ? ? //滑動(dòng)的距離 ? ? ? ? ? ? ? ? mDistanceY += dy; ? ? ? ? ? ? ? ? //當(dāng)滑動(dòng)的距離 <= toolbar高度的時(shí)候,改變Toolbar背景色的透明度,達(dá)到漸變的效果 ? ? ? ? ? ? ? ? if (mDistanceY <= toolbarHeight) { ? ? ? ? ? ? ? ? ? ? float scale = (float) mDistanceY / toolbarHeight; ? ? ? ? ? ? ? ? ? ? float alpha = scale * 255; ? ? ? ? ? ? ? ? ? ? toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0)); ? ? ? ? ? ? ? ? } else { ? ? ? ? ? ? ? ? ? ? //上述雖然判斷了滑動(dòng)距離與toolbar高度相等的情況,但是實(shí)際測(cè)試時(shí)發(fā)現(xiàn),標(biāo)題欄的背景色 ? ? ? ? ? ? ? ? ? ? //很少能達(dá)到完全不透明的情況,所以這里又判斷了滑動(dòng)距離大于toolbar高度的情況, ? ? ? ? ? ? ? ? ? ? //將標(biāo)題欄的顏色設(shè)置為完全不透明狀態(tài) ? ? ? ? ? ? ? ? ? ? toolbar.setBackgroundResource(R.color.colorPrimary); ? ? ? ? ? ? ? ? } ? ? ? ? ? ? } ? ? ? ? }); }
上面代碼中的 dealData()方法很簡(jiǎn)單就是想一個(gè)String型List里面添加數(shù)據(jù),沒什么難度。
關(guān)鍵點(diǎn)在于給rvZhangjie.addOnScrollListener()也就是給RecyclerView設(shè)置滑動(dòng)監(jiān)聽,并復(fù)寫onScrolled()方法。該方法里面3個(gè)參數(shù):
第一個(gè)RecyclerView recyclerView,這個(gè)很明顯就是目標(biāo)RecyclerView;
第二個(gè)int dx,表示RecyclerView在水平X方向的相對(duì)滑動(dòng)量;
第三個(gè)int dy,表示RecyclerView在垂直Y方向的相對(duì)滑動(dòng)量;
我們可以通過累加計(jì)算RecyclerView滑動(dòng)的距離相對(duì)于指定距離的百分比,來計(jì)算透明度的變化量:
mDistanceY += dy; float scale = (float) mDistanceY / toolbarHeight; float alpha = scale * 255;
最后再將alpha透明度值設(shè)置給ToolBar:
?toolbar.setBackgroundColor(Color.argb((int) alpha, 255, 0, 0));
二、NestedScrollView滑動(dòng)標(biāo)題欄漸變
其實(shí)NestedScrollView滑動(dòng)漸變和RecyclerView的滑動(dòng)漸變?cè)硎且粯拥模举|(zhì)上都是監(jiān)聽View滑動(dòng)的距離,通過距離換算成透明度值。只不過二者的滑動(dòng)偏移量稍有點(diǎn)不同。
代碼細(xì)節(jié)我就不貼出來了,就說說關(guān)鍵的對(duì)NestedScrollView的監(jiān)聽和偏移量的處理:
nsvScroolBack.setOnScrollChangeListener(new View.OnScrollChangeListener() { ? ? ? ? @Override ? ? ? ? public void onScrollChange(View v, int scrollX, int scrollY, int oldScrollX, int oldScrollY) { ? ? ? ? ? ? //scrollY > oldScrollY:向上滑動(dòng) ? ? ? ? ? ? //scrollY < oldScrollY:向下滑動(dòng) ? ? ? ? ? ? // scrollY:滾動(dòng)過的距離。 ? ? ? ? ? ? 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滑動(dòng)漸變和RecyclerView的滑動(dòng)漸變就一回事。代碼實(shí)現(xiàn)上差別很細(xì)微。不同的是RecyclerView的滑動(dòng)漸變哪里,我們要通過對(duì)dy的累加來獲得RecyclerView在垂直方向的滑動(dòng)偏移量。而在NestedScrollView的滑動(dòng)漸變里面,NestedScrollView在x或者y方向的滑動(dòng)偏移量,系統(tǒng)已經(jīng)幫我們計(jì)算出來了:scrollX或者scrollY。然后進(jìn)行透明度的計(jì)算即可。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android 實(shí)現(xiàn)秒轉(zhuǎn)換成時(shí)分秒的方法
這篇文章主要介紹了Android 實(shí)現(xiàn)秒轉(zhuǎn)換成時(shí)分秒的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05Android實(shí)現(xiàn)中國(guó)象棋附源碼下載
這篇文章主要詳細(xì)介紹了Android實(shí)現(xiàn)中國(guó)象棋的具體代碼,供大家參考,感興趣的小伙伴們可以參考一下2016-05-05Android 觸摸事件監(jiān)聽(Activity層,ViewGroup層,View層)詳細(xì)介紹
這篇文章主要介紹了Android 觸摸事件監(jiān)聽(Activity層,ViewGroup層,View層)詳細(xì)介紹的相關(guān)資料,需要的朋友可以參考下2016-12-12Android?DataBinding類關(guān)系深入探究
看了谷歌官方文章確實(shí)寫的太簡(jiǎn)略了,甚至看完之后有很多地方還不知道怎么回事兒或者怎么用,那么接下來我將通過文章全面介紹一下DataBinding類關(guān)系2022-11-11Android獲取手機(jī)的版本號(hào)等信息的代碼
這篇文章主要為大家詳細(xì)介紹了Android獲取手機(jī)的版本號(hào)等信息的代碼,代碼很精彩,感興趣的小伙伴們可以參考一下2016-07-07android LabelView實(shí)現(xiàn)標(biāo)簽云效果
這篇文章主要為大家詳細(xì)介紹了android LabelView實(shí)現(xiàn)標(biāo)簽云效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-05-05解決Android studio中關(guān)于模擬器的/data目錄不能顯示的問題
這篇文章主要介紹了解決Android studio中關(guān)于模擬器的/data目錄不能顯示的問題,主要原因還是我們權(quán)限不夠,當(dāng)前的用戶沒有權(quán)限訪問data目錄。具體解決方法大家跟隨腳本之家小編一起看看吧2018-06-06