ListView滑动使得标题栏背景渐变（透明-不透明）

最新推荐文章于 2023-05-09 14:47:19 发布
最新推荐文章于 2023-05-09 14:47:19 发布
阅读量1.5k 收藏
点赞数
分类专栏： Android笔记
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014620028/article/details/72476701
版权

先上效果图：
图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
夜尽天明89
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Android ListView滑动改变标题栏背景渐变效果
08-30
主要为大家详细介绍了Android ListView滑动改变标题栏背景渐变效果，透明转变成不透明，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android ListView美化
布里渊区
07-25 1548
Android中的Selector用法Android美工坊–listview更改选中时item背景色
android listview背景透明,Android selector背景以及透明色
weixin_30509193的博客
05-26 380
selector可以设置图片或layout的点击效果：如没有state状态标记，如android:state_selected="true"，则表明normal状态下的图片值。另如果直接把去掉，就想到与normal状态下是一张完全透明的图，等价于transparent= #00000000另，android提供了一个透明值：@android:color/transparent，在设置透明背景时可以...
Android自定义控件之实现listview滑动时渐隐渐现顶部栏
倩倩的博客专属领地
09-06 2047
我在开发的时候遇到了这样的需求，就是在listview的滑动中，需要对顶部的栏目由透明慢慢的变为不透明的状态，就是以下的效果 最先开始的时候想的很简单，无非就是监听listview的滑动距离，然后根据距离算出透明度的比值，就可以了，但是事实上呢也的确是这样做的 只是在获取listview的滑动距离上可能没法直接获取，需要动态的去计算 下面贴出全部代码吧，不想码字了，最近感冒了，脑袋晕
android模糊查询listview数据_ListView的简单应用（一）
weixin_28695161的博客
01-18 792
犹豫了几天，觉得还是把这个教程写一下吧。虽然在网上已经一大堆了，但是这是我学习的历程我觉得我还是该记录下来，以后也可以温故而知新。 ListView在Android众多控件中占有比较重要的地位，也是面试官热爱提问的控件之一，特别是关于它的性能优化。这一块我想着把它留到最后再说，我们先来谈谈ListView的简单应用，毕竟什么东西都是由浅入深的嘛。 首先我们要先创建一个项目，打开Android s...
Android透明界面与ListView动态刷新
gaofen100
05-10 58
第一次就总结一下前些时学习Android移动应用开发的一点小收获。——Android透明界面与ListView动态刷新的实现 （1）首先是透明界面的实现 透明界面的实现可以在XML里面修改属性。 首先在Androidmanifest.xml中加上 &lt;activity android:name=".WordSearch" android:label="@string/app_name...
Android 中实现ListView滑动隐藏标题栏的代码
01-05
布局中listview要覆盖标题栏 int mTouchSlop = ViewConfiguration.get(this).getScaledTouchSlop(); //滑动监听 showHideTitleBar(true); ListView standby_lv = (ListView) findViewById(R.id.standby_lv); ...
Android之scrollview滑动使标题栏渐变背景色的实例代码
01-20
之前也是在网上看到这种效果，不过是滚动listview来改变标题栏的颜色，感觉那个应用的比较少，比如我要滚动scrollview来实现呢，那么问题就来了，废话少说，看一下要实现的效果先(这是在项目应用的效果)。...
android listview渐变,android ListView的overscroll(模糊渐变效果)
weixin_40002692的博客
05-27 273
当滑动到边界的时候，如果再滑动，就会触发这个效果，产生渐变。在资源文件里，是overscroll_edge跟overscroll_glow。但如果像我这样，想用HorizontalScrollView来模拟gallery来做水平滑动条的话，滑动到头尾的时候，越界效果会有碍整体的表现，那就只能无情的关闭他了..关闭方法一,在xml中设置属性android:overScrollMode=”never...
android listview滑动设置浮标半透明效果
05-03 2577
先上一张图看看： 如何在滑动listview的时候让页面右下角的编辑图标处于半透明状态呢，而在滑动结束后，图标又恢复不透明状态？ 具体做法如下： 设置listview 滚动监听事件 myList.setOnScrollListener(new AbsListView.OnScrollListener() { @Override public void onScrol
安卓listView分隔条颜色渐变效果
12-18
可以实现安卓listView分隔条颜色渐变效果，是UI看起来高端大气上档次.
ListView随手指滑动缩放标题向上滑动固定标题Demo
03-27
ListView向上滑动固定标题，向下滑动标题随ListView下来，根据滑动缩放标题大小效果。更多说明和效果请看我的博客：http://blog.csdn.net/u011200844/article/details/44673295
android ListView向上滑动隐藏标题，下拉显示标题栏，完美解决滑动出现的空白问题。
11-13
向上滑动listview隐藏标题，向下滑动显示标题，完美解决滑动出现的空白问题。
Android ListView实现某些item被盖上一层蒙版的效果
天外来客1009
08-15 4009
最近做项目，产品和UI出的一个效果图是这样的：有一个产品列表，可以购买的正常显示，已售罄的产品item被灰掉（即：看起来像是被盖上一层半透明的蒙版）。 其实要实现这个效果，想一想也不难。 基本思路： 1、ListView的每个item是一个单独的布局，给这个布局设置前景色来实现。 一般都是用LinearLayout、RelativeLayout实现，那么这两种布局有设置背景色（backgr
Android里透明的ListView
weixin_33860553的博客
06-06 91
发现了一个list滚动时，某item背景透明的问题。网上搜索一下，发现有很多人在问list背景黑色的问题，交流中给出的解决方案基本上很统一。 先是解释问题产生的原因是Android对list的滚动做了显示优化，用写在该list的layout文件中的android:cacheColorHint颜色值与item背景混合，黑色主题下该颜色值默认为#FF191919，于是背景黑了。 解决方案是关掉优化...
让ListView完全透明
阿良的专栏
11-16 5722
android:background="@null" android:cacheColorHint="@android:color/transparent" android:divider="@android:color/transparent" android:listSelector="@android:color/transparent"
如何在TLISTVIEW里添加背景色
加油站的地盘
12-14 1067
procedure TForm1.ListView1CustomDrawItem(Sender: TCustomListView;Item: TListItem; State: TCustomDrawState; var DefaultDraw: Boolean);begin  with ListView1.Canvas.Brush do  begin     case Item.Index of
QT的ListWidget设置背景为透明
u012720271的博客
05-09 775
background-color: transparent;
怎么给listview控件标题栏添加汉字
最新发布
05-29
要在 emWin 的 ListView 控件的标题栏中添加汉字，可以使用以下方法： 1. 加载中文字体。可以使用如下代码加载中文字体： ``` GUI_FONT_CHS_GetFont(&pFont); ``` 2. 设置标题栏高度。可以使用如下代码设置标题栏...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值