Android ListView滑動改變標題欄背景漸變效果
先上ListView滑動改變標題欄背景漸變效果圖,透明轉(zhuǎn)變成不透明效果:
圖1:

圖2:

圖3:

圖4:

我用的是小米Note手機,狀態(tài)欄高度是55px,后面會提到,這里先做個說明:

下面的內(nèi)容包含了所有代碼和一些測試數(shù)據(jù):
代碼:
代碼很簡單,也做了注釋,這里就不廢話了。
先來布局文件:
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"/> <!--標題欄,這里簡單寫個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頭中包含的布局。這里僅僅是一個ImageView
private ImageView head_iv;
private ArrayList<String> dataList;
private MyAdapter myAdapter;
//listview的頭部(這里是ImageView)頂部距離屏幕頂部(包含狀態(tài)欄)的距離
//注:這個高度,是頭布局在屏幕里才會計算的,出了屏幕,就不會變了
private int height;
//listView的頭部的真實高度。頭布局的整體高度,因為這個demo只簡單寫了個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 計算 the coordinates 坐標 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的高度,用于和上面測量的對比
Utils.printLogData("==setHeigth==" + dip2px(150));
handleTitleBarColorEvaluate();
}
});
}
// 處理標題欄顏色漸變
private void handleTitleBarColorEvaluate() {
//比例
float fraction;
if (height > 0) {
fraction = 1f - height * 1f / 60;
if (fraction < 0f) {
fraction = 0f;
}
title_tv.setAlpha(fraction);
return;
}
//高度值是負數(shù),但是負號僅僅是表示方向,取絕對值
float space = Math.abs(height) * 1f;
// 標題欄的高度
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ù)比例,生成一個按比例的顏色值
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("標題欄");
} 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>
工具類代碼:
打印日志工具:
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 顏色取值的級別 (0.0f ~ 1.0f)
* @param startValue 開始顯示的顏色
* @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))));
}
}
測試數(shù)據(jù):
界面剛啟動
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
從時間上看,啟動約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像素。所以,一開始的時候,圖片距離屏幕頂部的高度就是55
向上滑動,當頭布局完全出到屏幕外面后,繼續(xù)滑動,打印數(shù)據(jù)不會變。
即:頭布局頂部距離屏幕頂部的高度(距離)不變。因為這個高度,只會在view在屏幕中才能獲取到。
詳見注釋
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
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
- Android 滑動Scrollview標題欄漸變效果(仿京東toolbar)
- Android之scrollview滑動使標題欄漸變背景色的實例代碼
- Android開發(fā)實現(xiàn)標題隨scrollview滑動變色的方法詳解
- Android 頂部標題欄隨滑動時的漸變隱藏和漸變顯示效果
- Android 中實現(xiàn)ListView滑動隱藏標題欄的代碼
- Android ScrollView滑動實現(xiàn)仿QQ空間標題欄漸變
- Android開發(fā)之滑動圖片輪播標題焦點
- Android實現(xiàn)背景顏色滑動漸變效果的全過程
- Android直播軟件搭建之實現(xiàn)背景顏色滑動漸變效果的詳細代碼
- Android?App頁面滑動標題欄顏色漸變詳解
相關(guān)文章
Android Jetpack架構(gòu)組件 ViewModel詳解
這篇文章主要介紹了Android Jetpack架構(gòu)組件 ViewModel詳解,ViewModel類讓數(shù)據(jù)可在發(fā)生屏幕旋轉(zhuǎn)等配置更改后繼續(xù)存在,ViewModel類旨在以注重生命周期的方式存儲和管理界面相關(guān)的數(shù)據(jù)。感興趣可以來學習一下2020-07-07
Android 高德地圖之poi搜索功能的實現(xiàn)代碼
這篇文章主要介紹了android 高德地圖之poi搜索功能的實現(xiàn)代碼,在實現(xiàn)此功能時遇到很多問題,在文章都給大家提到,需要的朋友可以參考下2017-08-08
Android之利用EventBus發(fā)送消息傳遞示例
本篇文章主要介紹了Android之利用EventBus進行消息傳遞示例。EventBus是一款針對Android優(yōu)化的發(fā)布/訂閱事件總線,非常具有實用價值,需要的朋友可以參考下。2017-02-02
Android 中使用 AsyncTask 異步讀取網(wǎng)絡(luò)圖片
這篇文章主要介紹了Android 中使用 AsyncTask 異步讀取網(wǎng)絡(luò)圖片的相關(guān)資料,需要的朋友可以參考下2016-02-02

