Android ListView滑動(dòng)改變標(biāo)題欄背景漸變效果
先上ListView滑動(dòng)改變標(biāo)題欄背景漸變效果圖,透明轉(zhuǎn)變成不透明效果:
圖1:
圖2:
圖3:
圖4:
我用的是小米Note手機(jī),狀態(tài)欄高度是55px,后面會(huì)提到,這里先做個(gè)說(shuō)明:
下面的內(nèi)容包含了所有代碼和一些測(cè)試數(shù)據(jù):
代碼:
代碼很簡(jiǎn)單,也做了注釋?zhuān)@里就不廢話(huà)了。
先來(lái)布局文件:
activity的布局
activity_main_10
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <ListView android:id="@+id/listvew" android:layout_width="match_parent" android:layout_height="match_parent"/> <!--標(biāo)題欄,這里簡(jiǎn)單寫(xiě)個(gè)textview--> <TextView android:id="@+id/title_tv" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="#00000000" android:gravity="center" android:orientation="vertical" android:padding="5dp" android:textSize="30sp"/> </RelativeLayout>
listView頭布局
head_layout
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical"> <ImageView android:id="@+id/head_iv" android:layout_width="match_parent" android:layout_height="150dp" android:background="@mipmap/ch"/> </LinearLayout>
listView的item布局
listview_item_layout
<?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="50dp"> <TextView android:id="@+id/item_tv" android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textSize="15sp"> </TextView> </FrameLayout>
功能代碼:
MainActivity10
import android.app.Activity; import android.content.Context; import android.os.Bundle; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.AbsListView; import android.widget.BaseAdapter; import android.widget.ImageView; import android.widget.ListView; import android.widget.TextView; import java.util.ArrayList; public class MainActivity10 extends Activity { private TextView title_tv; private ListView listvew; //listView的頭 private View headView; //listView頭中包含的布局。這里僅僅是一個(gè)ImageView private ImageView head_iv; private ArrayList<String> dataList; private MyAdapter myAdapter; //listview的頭部(這里是ImageView)頂部距離屏幕頂部(包含狀態(tài)欄)的距離 //注:這個(gè)高度,是頭布局在屏幕里才會(huì)計(jì)算的,出了屏幕,就不會(huì)變了 private int height; //listView的頭部的真實(shí)高度。頭布局的整體高度,因?yàn)檫@個(gè)demo只簡(jiǎn)單寫(xiě)了個(gè)ImageView作為頭部,所以ImageView的高度,就是頭部的高度 private int headViewHeight; private Context context; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main_10); context = this; title_tv = (TextView) findViewById(R.id.title_tv); listvew = (ListView) findViewById(R.id.listvew); headView = LayoutInflater.from(this).inflate(R.layout.head_layout, null); head_iv = (ImageView) headView.findViewById(R.id.head_iv); //添加listView的頭布局 listvew.addHeaderView(headView); dataList = new ArrayList<>(); for (int i = 0; i < 50; i++) { dataList.add("==" + i + "=="); } myAdapter = new MyAdapter(); listvew.setAdapter(myAdapter); listvew.setOnScrollListener(new AbsListView.OnScrollListener() { @Override public void onScrollStateChanged(AbsListView view, int scrollState) { } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { int location[] = new int[2]; /** * public void getLocationInWindow(@Size(2) int[] location) * * <p>Computes 計(jì)算 the coordinates 坐標(biāo) of this view in its window. The argument 參數(shù) * must be an array of two integers. After the method returns, the array * contains 包含 the x and y location in that order.</p> * * @param location an array of two integers in which to hold the coordinates */ head_iv.getLocationInWindow(location); //listview的頭部(這里是ImageView)頂部距離屏幕頂部(包含狀態(tài)欄)的距離 height = location[1]; headViewHeight = head_iv.getHeight(); Utils.printLogData("==location==0==" + location[0]); Utils.printLogData("==location==1==" + location[1]); Utils.printLogData("==height==" + height); Utils.printLogData("==headViewHeight==" + headViewHeight); //在head_layout.xml中,固定設(shè)置了150dp的高度,用于和上面測(cè)量的對(duì)比 Utils.printLogData("==setHeigth==" + dip2px(150)); handleTitleBarColorEvaluate(); } }); } // 處理標(biāo)題欄顏色漸變 private void handleTitleBarColorEvaluate() { //比例 float fraction; if (height > 0) { fraction = 1f - height * 1f / 60; if (fraction < 0f) { fraction = 0f; } title_tv.setAlpha(fraction); return; } //高度值是負(fù)數(shù),但是負(fù)號(hào)僅僅是表示方向,取絕對(duì)值 float space = Math.abs(height) * 1f; // 標(biāo)題欄的高度 fraction = space / headViewHeight; if (fraction < 0f) fraction = 0f; if (fraction > 1f) fraction = 1f; title_tv.setAlpha(1f); if (fraction >= 1f) { title_tv.setBackgroundColor(0xffec434b); } else { //根據(jù)比例,生成一個(gè)按比例的顏色值 title_tv.setBackgroundColor(ChenColorUtils.getNewColorByStartEndColor(context, fraction, R.color.transparent, R.color.red)); } if (fraction >= 0.8f) { title_tv.setTextColor(ChenColorUtils.getNewColorByStartEndColor(context, fraction, R.color.transparent, R.color.black)); title_tv.setText("標(biāo)題欄"); } else { title_tv.setText(""); } } private class MyAdapter extends BaseAdapter { @Override public int getCount() { return dataList.size(); } @Override public Object getItem(int position) { return null; } @Override public long getItemId(int position) { return 0; } @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder; if (convertView == null) { convertView = LayoutInflater.from(context).inflate(R.layout.listview_item_layout, null); holder = new ViewHolder(); holder.item_tv = (TextView) convertView.findViewById(R.id.item_tv); convertView.setTag(holder); } else { holder = (ViewHolder) convertView.getTag(); } holder.item_tv.setText(dataList.get(position)); return convertView; } private class ViewHolder { private TextView item_tv; } } /** * dip轉(zhuǎn)換px */ public int dip2px(int dip) { final float scale = context.getResources().getDisplayMetrics().density; return (int) (dip * scale + 0.5f); } }
顏色:
colors.xml中添加
<color name="red">#ec434b</color> <color name="transparent">#00000000</color> <color name="black">#FF000000</color>
工具類(lèi)代碼:
打印日志工具:
import android.util.Log; public class Utils { public static void printLogData(String data) { Log.e("chen", data); } }
顏色工具:
import android.content.Context; public class ChenColorUtils { // 成新的顏色值 public static int getNewColorByStartEndColor(Context context, float fraction, int startValue, int endValue) { return evaluate(fraction, context.getResources().getColor(startValue), context.getResources().getColor(endValue)); } /** * 成新的顏色值 * @param fraction 顏色取值的級(jí)別 (0.0f ~ 1.0f) * @param startValue 開(kāi)始顯示的顏色 * @param endValue 結(jié)束顯示的顏色 * @return 返回生成新的顏色值 */ public static int evaluate(float fraction, int startValue, int endValue) { int startA = (startValue >> 24) & 0xff; int startR = (startValue >> 16) & 0xff; int startG = (startValue >> 8) & 0xff; int startB = startValue & 0xff; int endA = (endValue >> 24) & 0xff; int endR = (endValue >> 16) & 0xff; int endG = (endValue >> 8) & 0xff; int endB = endValue & 0xff; return ((startA + (int) (fraction * (endA - startA))) << 24) | ((startR + (int) (fraction * (endR - startR))) << 16) | ((startG + (int) (fraction * (endG - startG))) << 8) | ((startB + (int) (fraction * (endB - startB)))); } }
測(cè)試數(shù)據(jù):
界面剛啟動(dòng)
05-18 16:19:25.386 18718-18718/com.chen E/chen: ==location==0==0
05-18 16:19:25.387 18718-18718/com.chen E/chen: ==location==1==0
05-18 16:19:25.387 18718-18718/com.chen E/chen: ==height==0
05-18 16:19:25.387 18718-18718/com.chen E/chen: ==headViewHeight==0
05-18 16:19:25.387 18718-18718/com.chen E/chen: ==setHeigth==413
從時(shí)間上看,啟動(dòng)約150毫秒(0.15秒)后
05-18 16:19:25.531 18718-18718/com.chen E/chen: ==location==0==0
05-18 16:19:25.531 18718-18718/com.chen E/chen: ==location==1==55
05-18 16:19:25.531 18718-18718/com.chen E/chen: ==height==55
05-18 16:19:25.531 18718-18718/com.chen E/chen: ==headViewHeight==413
05-18 16:19:25.531 18718-18718/com.chen E/chen: ==setHeigth==413
小米note,狀態(tài)欄高度是55像素。所以,一開(kāi)始的時(shí)候,圖片距離屏幕頂部的高度就是55
向上滑動(dòng),當(dāng)頭布局完全出到屏幕外面后,繼續(xù)滑動(dòng),打印數(shù)據(jù)不會(huì)變。
即:頭布局頂部距離屏幕頂部的高度(距離)不變。因?yàn)檫@個(gè)高度,只會(huì)在view在屏幕中才能獲取到。
詳見(jiàn)注釋
05-18 17:01:02.151 16873-16873/com.chen E/chen: ==height==-412
05-18 17:01:02.167 16873-16873/com.chen E/chen: ==height==-412
05-18 17:01:02.200 16873-16873/com.chen E/chen: ==height==-412
05-18 17:01:02.233 16873-16873/com.chen E/chen: ==height==-412
05-18 17:01:02.316 16873-16873/com.chen E/chen: ==height==-412
05-18 17:01:02.332 16873-16873/com.chen E/chen: ==height==-412
05-18 17:01:02.349 16873-16873/com.chen E/chen: ==height==-412
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- Android 滑動(dòng)Scrollview標(biāo)題欄漸變效果(仿京東toolbar)
- Android之scrollview滑動(dòng)使標(biāo)題欄漸變背景色的實(shí)例代碼
- Android開(kāi)發(fā)實(shí)現(xiàn)標(biāo)題隨scrollview滑動(dòng)變色的方法詳解
- Android 頂部標(biāo)題欄隨滑動(dòng)時(shí)的漸變隱藏和漸變顯示效果
- Android 中實(shí)現(xiàn)ListView滑動(dòng)隱藏標(biāo)題欄的代碼
- Android ScrollView滑動(dòng)實(shí)現(xiàn)仿QQ空間標(biāo)題欄漸變
- Android開(kāi)發(fā)之滑動(dòng)圖片輪播標(biāo)題焦點(diǎn)
- Android實(shí)現(xiàn)背景顏色滑動(dòng)漸變效果的全過(guò)程
- Android直播軟件搭建之實(shí)現(xiàn)背景顏色滑動(dòng)漸變效果的詳細(xì)代碼
- Android?App頁(yè)面滑動(dòng)標(biāo)題欄顏色漸變?cè)斀?/a>
相關(guān)文章
AndroidApk混淆編譯時(shí),報(bào)告java.io.IOException...錯(cuò)誤解決辦法
這篇文章主要介紹了 AndroidApk混淆編譯時(shí),報(bào)告Error:Execution failed for task ‘:gviews:transformClassesAndResourcesWithProguardForRelease’.錯(cuò)誤解決辦法的相關(guān)資料,需要的朋友可以參考下2017-03-03Android實(shí)現(xiàn)修改狀態(tài)欄背景、字體和圖標(biāo)顏色的方法
本篇文章主要介紹了Android實(shí)現(xiàn)修改狀態(tài)欄背景、字體和圖標(biāo)顏色的方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-09-09android圖庫(kù)豎屏不顯示status bar的解決方法
圖庫(kù)在JB和JB2的版本上顯示的行為是:橫屏全屏顯示,豎屏?xí)@示status bar,圖庫(kù)在JB和JB2的版本上顯示的行為是:橫屏全屏顯示,豎屏?xí)@示status bar,具體實(shí)現(xiàn)方法如下,不會(huì)的朋友可以參考下哈2013-06-06Android自定義網(wǎng)絡(luò)連接工具類(lèi)HttpUtil
這篇文章主要介紹了Android自定義網(wǎng)絡(luò)連接工具類(lèi)HttpUtil,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11淺析Android中g(shù)etWidth()和getMeasuredWidth()的區(qū)別
這篇文章主要介紹了淺析Android中g(shù)etWidth()和getMeasuredWidth()的區(qū)別 ,getMeasuredWidth()獲取的是view原始的大小,getWidth()獲取的是這個(gè)view最終顯示的大小,具體區(qū)別介紹大家參考下本文2018-04-04Android編程實(shí)現(xiàn)仿QQ發(fā)表說(shuō)說(shuō),上傳照片及彈出框效果【附demo源碼下載】
這篇文章主要介紹了Android編程實(shí)現(xiàn)仿QQ發(fā)表說(shuō)說(shuō),上傳照片及彈出框效果,涉及Android動(dòng)畫(huà)特效的相關(guān)實(shí)現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-01-01Android入門(mén)教程之RecyclerView的具體使用詳解
RecyclerView是Android一個(gè)更強(qiáng)大的控件,其不僅可以實(shí)現(xiàn)和ListView同樣的效果,還有優(yōu)化了ListView中的各種不足。其可以實(shí)現(xiàn)數(shù)據(jù)縱向滾動(dòng),也可以實(shí)現(xiàn)橫向滾動(dòng)(ListView做不到橫向滾動(dòng))。接下來(lái)講解RecyclerView的用法2021-10-10Android應(yīng)用圖標(biāo)在狀態(tài)欄上顯示實(shí)現(xiàn)原理
Android應(yīng)用圖標(biāo)在狀態(tài)欄上顯示,以及顯示不同的圖標(biāo),其實(shí)很研究完后,才發(fā)現(xiàn),很簡(jiǎn)單,具體實(shí)現(xiàn)如下,感興趣的朋友可以參考下哈2013-06-06