Android ScrollView滑动实现仿QQ空间标题栏渐变

概述今天来研究的是ScrollView-滚动视图，滚动视图又分横向滚动视图（HorizontalScrollView）和纵向滚动视图（ScrollView），今天主要研究纵向的。相信大家在开发中经常用到，ScrollView的功能已经很强大了，但是仍然满足

今天来研究的是ScrollVIEw-滚动视图，滚动视图又分横向滚动视图（horizontalscrollview）和纵向滚动视图（ScrollVIEw），今天主要研究纵向的。相信大家在开发中经常用到，ScrollVIEw的功能已经很强大了，但是仍然满足不了我们脑洞大开的UI设计师们，所以我们要自定义…本篇文章主要讲监听ScrollVIEw的滑动实现仿QQ空间标题栏渐变，先看一下效果图：

 

好了我们切入主题。

有可能你不知道的那些ScrollVIEw属性
 •androID:scrollbars
设置滚动条显示。none（隐藏），horizontal（水平），vertical（垂直）
 •androID:scrollbarStyle
设置滚动条的风格和位置。设置值：insIDeOverlay、insIDeInset、outsIDeOverlay、outsIDeInset
 •androID:scrollbarThumbHorizontal
设置水平滚动条的drawable。
 •androID:soundEffectsEnabled
设置点击或触摸时是否有声音效果
 •androID:fadingEdge
设置拉滚动条时，边框渐变的放向。none（边框颜色不变），horizontal（水平方向颜色变淡），vertical（垂直方向颜色变淡）。参照fadingEdgeLength的效果图 androID:fadingEdgeLength 设置边框渐变的长度
 •androID:scrollX
以像素为单位设置水平方向滚动的的偏移值，在GrIDVIEw中可看的这个效果
 •androID:scrollY
以像素为单位设置垂直方向滚动的的偏移值
 •androID:scrollbaralwaysDrawHorizontalTrack
设置是否始终显示垂直滚动条
 •androID:scrollbarDefaultDelayBeforeFade
设置N毫秒后开始淡化，以毫秒为单位。 

以上这些属性有兴趣的可以去研究一下，这里就不详细讲了。很多属性并不常用，下面说说我们经常用的，怎样监听ScrollVIEw的滑动并实现标题栏的渐变？

ScrollVIEw滑动监听：

Google并没有给我们提供ScrollVIEw的滑动距离、是否滑动到布局底部、顶部的方法，但是提供了一个onScrollChanged方法：

@OverrIDe  protected voID onScrollChanged(int x,int y,int oldx,int oldy) {    super.onScrollChanged(x,y,oldx,oldy);    //todo:    }  }

通过查看源码注释，

/**
     * This is called in response to an internal scroll in this vIEw (i.e.,the
     * vIEw scrolled its own contents). This is typically as a result of
     * {@link #scrollBy(int,int)} or {@link #scrollTo(int,int)} having been
     * called.
     *
     * @param l Current horizontal scroll origin.
     * @param t Current vertical scroll origin.
     * @param oldl PrevIoUs horizontal scroll origin.
     * @param oldt PrevIoUs vertical scroll origin.
     */

我们可以知道这个方法的参数分别为：
l:当前横向滑动距离
t：当前纵向滑动距离
oldl：之前横向滑动距离
oldt：之前纵向滑动距离

但是这个方法我们不可以调用，我们可以重写接口或者重写ScrollVIEw暴露该方法：

package com.hankkin.gradationscroll;import androID.content.Context;import androID.util.AttributeSet;import androID.Widget.ScrollVIEw;/** * 带滚动监听的scrollvIEw * */public class GradationScrollVIEw extends ScrollVIEw {  public interface ScrollVIEwListener {    voID onScrollChanged(GradationScrollVIEw scrollVIEw,int x,int oldy);  }  private ScrollVIEwListener scrollVIEwListener = null;  public GradationScrollVIEw(Context context) {    super(context);  }  public GradationScrollVIEw(Context context,AttributeSet attrs,int defStyle) {    super(context,attrs,defStyle);  }  public GradationScrollVIEw(Context context,AttributeSet attrs) {    super(context,attrs);  }  public voID setScrollVIEwListener(ScrollVIEwListener scrollVIEwListener) {    this.scrollVIEwListener = scrollVIEwListener;  }  @OverrIDe  protected voID onScrollChanged(int x,oldy);    if (scrollVIEwListener != null) {      scrollVIEwListener.onScrollChanged(this,x,oldy);    }  }}

设置标题渐变

滚动监听暴露出来我们就该去设置标题栏随着ScrollVIEw的滑动来改变标题栏的透明度实现渐变：
我们先看一下布局：

<?xml version="1.0" enCoding="utf-8"?><relativeLayout xmlns:androID="http://schemas.androID.com/apk/res/androID"  xmlns:tools="http://schemas.androID.com/tools"  androID:layout_wIDth="match_parent"  androID:layout_height="match_parent"  tools:context="com.hankkin.gradationTitlebar.QQSpeakActivity">  <com.hankkin.gradationscroll.GradationScrollVIEw    androID:ID="@+ID/scrollvIEw"    androID:layout_wIDth="match_parent"    androID:layout_height="match_parent"    androID:scrollbars="none">    <linearLayout      androID:layout_wIDth="match_parent"      androID:layout_height="wrap_content"      androID:orIEntation="vertical" >      <ImageVIEw        androID:ID="@+ID/iv_banner"        androID:scaleType="fitXY"        androID:src="@drawable/banner3"        androID:layout_wIDth="match_parent"        androID:layout_height="200dp" />      <com.hankkin.gradationscroll.NoScrollListvIEw        androID:ID="@+ID/ListvIEw"        androID:layout_wIDth="match_parent"        androID:layout_height="wrap_content" >      </com.hankkin.gradationscroll.NoScrollListvIEw>    </linearLayout>  </com.hankkin.gradationscroll.GradationScrollVIEw>  <TextVIEw    androID:paddingBottom="10dp"    androID:ID="@+ID/textvIEw"    androID:layout_wIDth="match_parent"    androID:layout_height="55dp"    androID:gravity="center|bottom"    androID:text="我是标题"    androID:textSize="18sp"    androID:textcolor="@color/transparent"    androID:background="#00000000" /></relativeLayout>

 

最外层是我们自定义的ScrollVIEw，包裹着一张背景图片和一个ListVIEw（ListVIEw重写为不可以滑动）,然后布局的上面有一个TextVIEw当做标题栏，你也可以用布局。

然后我们需要获取图片的高度，并且设置滚动监听，随着滚动的距离来设置标题栏的颜色透明度和字体颜色的透明度

/**   * 获取顶部图片高度后，设置滚动监听   */  private voID initListeners() {    VIEwTreeObserver vto = ivBanner.getVIEwTreeObserver();    vto.addOnGlobalLayoutListener(new VIEwTreeObserver.OnGlobalLayoutListener() {      @OverrIDe      public voID onGlobalLayout() {        textVIEw.getVIEwTreeObserver().removeGlobalOnLayoutListener(            this);        height = ivBanner.getHeight();        scrollVIEw.setScrollVIEwListener(QQSpeakActivity.this);      }    });  }

/**   * 滑动监听   * @param scrollVIEw   * @param x   * @param y   * @param oldx   * @param oldy   */  @OverrIDe  public voID onScrollChanged(GradationScrollVIEw scrollVIEw,int oldy) {    // Todo auto-generated method stub    if (y <= 0) {  //设置标题的背景颜色      textVIEw.setBackgroundcolor(color.argb((int) 0,144,151,166));    } else if (y > 0 && y <= height) { //滑动距离小于banner图的高度时，设置背景和字体颜色颜色透明度渐变      float scale = (float) y / height;      float Alpha = (255 * scale);      textVIEw.setTextcolor(color.argb((int) Alpha,255,255));      textVIEw.setBackgroundcolor(color.argb((int) Alpha,166));    } else {  //滑动到banner下面设置普通颜色      textVIEw.setBackgroundcolor(color.argb((int) 255,166));    }  }

OK，这就实现了你在最上方看到的效果了。
其实并不难，只是我们没有亲自动手去实现，相信多动手自己亲自去实现一下，UI想要的我们都可以实现。
源码地址：https://github.com/Hankkin/GradationTitleBar
项目里面我还添加了一个带banner的，原理是一样的。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程小技巧。

总结

以上是内存溢出为你收集整理的Android ScrollView滑动实现仿QQ空间标题栏渐变全部内容，希望文章能够帮你解决Android ScrollView滑动实现仿QQ空间标题栏渐变所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。