当前位置： 移动技术网 > 移动技术>移动开发>Android > Android ListView滑动改变标题栏背景渐变效果

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

2019年07月24日  | 移动技术网移动技术  | 我要评论

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网