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

发布时间 - 2026-01-11 02:16:16    点击率:

先上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

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


# Android  # ListView滑动改变标题栏背景  # Android滑动改变背景  # Android滑动改变标题栏背景  # Android 滑动Scrollview标题栏渐变效果(仿京东toolbar)  # Android之scrollview滑动使标题栏渐变背景色的实例代码  # Android开发实现标题随scrollview滑动变色的方法详解  # Android 顶部标题栏随滑动时的渐变隐藏和渐变显示效果  # Android 中实现ListView滑动隐藏标题栏的代码  # Android ScrollView滑动实现仿QQ空间标题栏渐变  # Android开发之滑动图片轮播标题焦点  # Android实现背景颜色滑动渐变效果的全过程  # Android直播软件搭建之实现背景颜色滑动渐变效果的详细代码  # Android App页面滑动标题栏颜色渐变详解  # 标题栏  # 状态栏  # 成新  # 的是  # 是一个  # 测试数据  # 出了  # 就不  # 才会  # 会在  # 我用  # 很简单  # 仅仅是  # 做个  # 写了  # 上看  # 话了  # 先来  # 也做  # 大家多多 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何确保西部建站助手FTP传输的安全性?  Laravel如何与Pusher实现实时通信?(WebSocket示例)  javascript中的try catch异常捕获机制用法分析  Laravel如何记录日志_Laravel Logging系统配置与自定义日志通道  北京专业网站制作设计师招聘,北京白云观官方网站?  如何基于云服务器快速搭建个人网站?  Laravel请求验证怎么写_Laravel Validator自定义表单验证规则教程  Laravel如何获取当前登录用户信息_Laravel Auth门面使用与Session用户读取【技巧】  PHP 实现电台节目表的智能时间匹配与今日/明日轮播逻辑  如何用ChatGPT准备面试 模拟面试问答与职场话术练习教程  网站优化排名时,需要考虑哪些问题呢?  Laravel Pest测试框架怎么用_从PHPUnit转向Pest的Laravel测试教程  PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)  浅谈redis在项目中的应用  韩国网站服务器搭建指南:VPS选购、域名解析与DNS配置推荐  Laravel如何集成Inertia.js与Vue/React?(安装配置)  详解MySQL数据库的安装与密码配置  手机钓鱼网站怎么制作视频,怎样拦截钓鱼网站。怎么办?  Laravel如何实现本地化和多语言支持_Laravel多语言配置与翻译文件管理  弹幕视频网站制作教程下载,弹幕视频网站是什么意思?  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  网站图片在线制作软件,怎么在图片上做链接?  使用Dockerfile构建java web环境  Laravel中Service Container是做什么的_Laravel服务容器与依赖注入核心概念解析  高性能网站服务器配置指南:安全稳定与高效建站核心方案  详解一款开源免费的.NET文档操作组件DocX(.NET组件介绍之一)  JavaScript 输出显示内容(document.write、alert、innerHTML、console.log)  详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南  如何在浏览器中启用Flash_2025年继续使用Flash Player的方法【过时】  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  网站制作报价单模板图片,小松挖机官方网站报价?  Laravel项目如何进行性能优化_Laravel应用性能分析与优化技巧大全  百度输入法ai面板怎么关 百度输入法ai面板隐藏技巧  Swift中switch语句区间和元组模式匹配  Laravel如何实现邮箱地址验证功能_Laravel邮件验证流程与配置  Bootstrap CSS布局之列表  Python图片处理进阶教程_Pillow滤镜与图像增强  网站页面设计需要考虑到这些问题  香港服务器选型指南:免备案配置与高效建站方案解析  消息称 OpenAI 正研发的神秘硬件设备或为智能笔,富士康代工  php485函数参数是什么意思_php485各参数详细说明【介绍】  重庆市网站制作公司,重庆招聘网站哪个好?  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  如何在 React 中条件性地遍历数组并渲染元素  java获取注册ip实例  5种Android数据存储方式汇总  Laravel如何配置任务调度?(Cron Job示例)  Windows10电脑怎么设置虚拟光驱_Win10右键装载ISO镜像文件  UC浏览器如何设置启动页 UC浏览器启动页设置方法  Laravel模型关联查询教程_Laravel Eloquent一对多关联写法