Android ListView滑动改变标题栏背景渐变效果

先上ListView滑动改变标题栏背景渐变效果图,透明转变成不透明效果:

图1:

图2:

图3:

图4:

我用的是小米Note手机,状态栏高度是55px,后面会提到,这里先做个说明:

下面的内容包含了所有代码和一些测试数据:

代码:

代码很简单,也做了注释,这里就不废话了。

先来布局文件:

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)顶部距离屏幕顶部(包含状态栏)的距离 //注:这个高度,是头布局在屏幕里才会计算的,出了屏幕,就不会变了 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 参数 * 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)顶部距离屏幕顶部(包含状态栏)的距离 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中,固定设置了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; } //高度值是负数,但是负号仅仅是表示方向,取绝对值 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 { //根据比例,生成一个按比例的颜色值 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转换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 结束显示的颜色 * @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)))); } }

测试数据:

界面刚启动

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,状态栏高度是55像素。所以,一开始的时候,图片距离屏幕顶部的高度就是55

向上滑动,当头布局完全出到屏幕外面后,继续滑动,打印数据不会变。
即:头布局顶部距离屏幕顶部的高度(距离)不变。因为这个高度,只会在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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

时间: 2024-09-26 04:20:49

Android ListView滑动改变标题栏背景渐变效果的相关文章

Android ListView滑动删除操作(SwipeListView)_Android

新版本的微信和QQ上引入的滑动删除功能是现在比较流行的一个功能.其实这个滑动删除的控件,github上已经有了,是一个热门的开源框架SwipeListView.不过,这个SwipeListView是一个framelayout,即是一个两层的布局,上面的布局front覆盖了下面的布局back,滑动的时候则会滑开front,这样下面的back就显示出来了.但是看了一下微信的滑动删除好像不是这样的,感觉更像是一个超出了屏幕的单层布局,滑动的时候是右边超出屏幕的button进入屏幕,猜测应该不是使用Sw

listview-关于Android ListView滑动监听

问题描述 关于Android ListView滑动监听 我想问一个关于ListView的问题,就是setItemSelectedListener无法触发怎么处理,点击事件和长按事件都能触发,有那个好心人帮忙一下,给下setItemSelectedListener部分的代码,我主要是想对listView滑动到了哪里做一个监听 解决方案 能把你的代码发过来吗?有时间我可以看一下 解决方案二: 无法触发报错吗?没报错的话,是不是API版本的问题. 解决方案三: 是 listview 的item 布局的

listview 数据阴影-android listview 滑动数据阴影

问题描述 android listview 滑动数据阴影 我的listview,在显示数据时,偶尔会有滑动数据有阴影的现象.如图所示.一旦有阴影就只能重启才会好.请问高手可能怎么回事! 解决方案 Android[ ListView]滑动数据加载android listView滑动加载数据Android ListView 去阴影 解决方案二: listview有去掉阴影的属性,你查查就可以了 解决方案三: android:id=""@+id/id_main_listview"&

Android Listview 滑动过程中提示图片重复错乱的原因及解决方法_Android

主要分析Android中Listview滚动过程造成的图片显示重复.错乱.闪烁的原因及解决方法,顺便跟进Listview的缓存机制. 1.原因分析 Listview item 缓存机制:为了使得性能更优,Listview会缓存行item(某行对应的view).listview通过adapter的getview函数获得每行的item.滑动过程中, a.如果某行item已经划出屏幕,若该item不在缓存内,则put进缓存,否则更新缓存: b.获取滑入屏幕的行item之前会先判断缓存中是否有可用的it

Android ListView滑动过程中图片显示重复错乱闪烁的原因及解决方法

主要分析Android ListView滚动过程中图片显示重复.错乱.闪烁的原因及解决方法,顺带提及ListView的缓存机制. 1.原因分析 ListView item缓存机制:为了使得性能更优,ListView会缓存行item(某行对应的View).ListView通过adapter的getView函数获得每行的item.滑动过程中, a. 如果某行item已经滑出屏幕,若该item不在缓存内,则put进缓存,否则更新缓存: b. 获取滑入屏幕的行item之前会先判断缓存中是否有可用的ite

Android ListView滑动过程中图片显示重复错位闪烁问题解决

主要分析Android ListView滚动过程中图片显示重复.错乱.闪烁的原因及解决方法,顺带提及ListView的缓存机制.1.原因分析ListView item缓存机制:为了使得性能更优,ListView会缓存行item(某行对应的View).ListView通过adapter的getView函数获得每行的item.滑动过程中, a. 如果某行item已经滑出屏幕,若该item不在缓存内,则put进缓存,否则更新缓存: b. 获取滑入屏幕的行item之前会先判断缓存中是否有可用的item,

Android Listview滑动时不加载数据 停止时加载数据

本文实例为大家分享了Listview滑动时不加载数据 停止时加载数据的具体代码,供大家参考,具体内容如下 数据源配置(Adapter) package com.zhengsonglan.listview_loading.adapter; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import

Android ListView元素间隙线自定义渐变效果

首先创建一个简单的ListView,并设置对应的属性 <ListView      android:id="@+id/artistsNameView"      android:layout_width="fill_parent"      android:layout_height="match_parent"       android:divider="@drawable/jblineshape"      and

Android Listview滑动时不加载数据,停下来时加载数据,让App更优

转载:http://blog.csdn.net/yy1300326388/article/details/45153813 数据源配置(Adapter) package com.zhengsonglan.listview_loading.adapter; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGrou