Android ListView滑动改变标题栏背景渐变效果
作者:u014620028 发布时间:2022-07-01 04:00:59
先上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
猜你喜欢
- 快速排序过程没有既不浪费空间又可以快一点的排序算法呢?那就是“快速排序”!光听这个名字是不是就觉得很高端呢。假设我们现在对“52 39 67
- 本文实例为大家分享了C#实现验证码功能的具体代码,供大家参考,具体内容如下分析需要四个字符(字母(大小写)+数字)将四个字符连接成字符串将连
- 自定义控件是根据自己的需要自己来编写控件。安卓自带的控件有时候无法满足你的需求,这种时候,我们只能去自己去实现适合项目的控件。同时,安卓也允
- 唉!我还真是在面试中学习新东东啊,一个公司刚刚给了个测试,不过我很奇怪的是为什么web developer的职位居然考java的反射机制题,
- 1,刚刚在别人开源的项目中看到了一个挺不错的用户体验,效果图如下:2,那下面我们就来实现一下,首先看一下布局,由于一般只是我们包含头像的那部
- 记录一下工作流的在Springboot中的使用,,顺便写个demo,概念,什么东西的我就不解释了,如有问题欢迎各位大佬指导一下。1.创建sp
- Spring MVC 请求处理流程用户发起请求,到 DispatcherServlet;然后到 HandlerMapping 返回处理器链(
- 这里并未涉及到JSR 181 Annotations 的相关应用,具体的三种方式如下① 通过WSDL地址来创建动态客户端 ② 通过服务端提供
- 本文所述为基于C#实现的端口扫描器代码,代码内包括了窗体和逻辑处理两部分代码。在代码中,创建TcpClient对象,把TcpClient用于
- 功能需求:为软件设定一个使用有效期,当超过指定时间后,程序无法运行。实现思路:定义一个常量,用于记录一个时间,我们称之为标记时间,使用当前时
- 一、材料准备1、jdk1.8的安装包2、maven安装包3、idea工具二、配置jdk1.8环境变量1.jdk下载jdk下载网址(点击此链接
- 这里介绍通过委托取消Button事件switch-case的方法。需要注意的是,事先要按顺序在各个Button的Tag属性中设置0、1、2、
- 之前一段时间,在朋友的推荐下,玩了探探这一款软件,初玩的时候,就发现,这款软件与一般的社交软件如陌陌之类的大相径庭,让我耳目一新,特别是探探
- 01 高效设置我们先来讲讲有哪些设置调整之后 IDEA 会更好用。先说明一点:这里只是根据我个人喜好和习惯的建议,IDEA 的默认配置已经很
- 查看apiDemos,找到View/Animation/shake找到对应的动画代码,直接拷贝过来当导入一个项目的时候,报R文件不存在,很多
- 一个Resty项目包含的部分(resty-route):1. RestFilter像其他web框架一样,Resty也需要一个入口,在web.
- 本文实例为大家分享了java实现简单猜数字的具体代码,供大家参考,具体内容如下代码不多说,图片自加,实现功能有数字比大小,菜单开始,帮助,退
- C#单击菜单栏或工具栏时通过反射打开窗体的方法,可以以取代长长的if-else或switch-case语句。要点:将菜单或工具栏项的名称设置
- 前言通过ioctl跟binder驱动交互,实现以最快的方式唤醒新的保活服务,最大程度防止保活失败。同时,我也将跟您分享,我是怎么做到在不甚了
- 什么是jdkjdk是什么呢?jdk的是java development kit的缩写,意思是java程序开发的工具包。也可以说jdk是jav