Android?App頁面滑動(dòng)標(biāo)題欄顏色漸變?cè)斀?/h1>
更新時(shí)間:2022年02月16日 13:17:09 作者:任縹緲
這篇文章主要為大家詳細(xì)介紹了Android?App頁面滑動(dòng)標(biāo)題欄顏色漸變,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
通常,我們會(huì)被要求實(shí)現(xiàn)類似支付寶首頁的特效:隨著界面的滑動(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三方依賴沖突Gradle中exclude的使用
這篇文章主要介紹了Android三方依賴沖突Gradle中exclude的使用,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下 2022-09-09
-
Android打開系統(tǒng)相機(jī)并拍照的2種顯示方法
這篇文章主要介紹了Android打開系統(tǒng)相機(jī)并拍照的2種顯示方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2019-05-05
-
Android編程開發(fā)之EditText中inputType屬性小結(jié)
這篇文章主要介紹了Android編程開發(fā)之EditText中inputType屬性用法,分析說明了Android中EditText的inputType屬性具體含義與使用技巧,需要的朋友可以參考下 2016-01-01
-
android實(shí)現(xiàn)簡(jiǎn)單拼圖游戲
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)簡(jiǎn)單拼圖游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下 2022-03-03
-
解析在Android中為TextView增加自定義HTML標(biāo)簽的實(shí)現(xiàn)方法
本篇文章是對(duì)在Android中為TextView增加自定義HTML標(biāo)簽的方法進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下 2013-05-05
-
Android如何自定義升級(jí)對(duì)話框示例詳解
對(duì)話框是我們?cè)谄綍r(shí)經(jīng)常會(huì)遇到的一個(gè)功能,但自帶的對(duì)話框不夠美觀,大家一般都會(huì)自定義,下面這篇文章主要給大家介紹了關(guān)于Android如何自定義升級(jí)對(duì)話框的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。 2017-08-08
最新評(píng)論
通常,我們會(huì)被要求實(shí)現(xiàn)類似支付寶首頁的特效:隨著界面的滑動(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三方依賴沖突Gradle中exclude的使用
這篇文章主要介紹了Android三方依賴沖突Gradle中exclude的使用,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-09-09
Android打開系統(tǒng)相機(jī)并拍照的2種顯示方法
這篇文章主要介紹了Android打開系統(tǒng)相機(jī)并拍照的2種顯示方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2019-05-05
Android編程開發(fā)之EditText中inputType屬性小結(jié)
這篇文章主要介紹了Android編程開發(fā)之EditText中inputType屬性用法,分析說明了Android中EditText的inputType屬性具體含義與使用技巧,需要的朋友可以參考下2016-01-01
android實(shí)現(xiàn)簡(jiǎn)單拼圖游戲
這篇文章主要為大家詳細(xì)介紹了android實(shí)現(xiàn)簡(jiǎn)單拼圖游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
解析在Android中為TextView增加自定義HTML標(biāo)簽的實(shí)現(xiàn)方法
本篇文章是對(duì)在Android中為TextView增加自定義HTML標(biāo)簽的方法進(jìn)行了詳細(xì)的分析介紹。需要的朋友參考下2013-05-05
Android如何自定義升級(jí)對(duì)話框示例詳解
對(duì)話框是我們?cè)谄綍r(shí)經(jīng)常會(huì)遇到的一個(gè)功能,但自帶的對(duì)話框不夠美觀,大家一般都會(huì)自定義,下面這篇文章主要給大家介紹了關(guān)于Android如何自定義升級(jí)對(duì)話框的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),需要的朋友可以參考借鑒,下面來一起看看吧。2017-08-08

