Android精仿淘宝/QQ空间标题栏渐变效果

声明：本篇文章已授权微信公众号 YYGeeker 独家发布

前言

最近在淘宝上囤年货买买买的时候，注意到淘宝购物详情页的渐变效果，觉得效果还是挺不错的，有种似曾相识的感觉，没错，好像QQ空间的标题栏也是类似的做法。鉴于这种效果在平时可能会用得比较多，所以就自己研究了一下然后把它实现出来了，项目完整demo在文章底部有链接，大家可下载参考研究。文章原创，转载请注明地址：小嵩的CSDN博客，地址：http://blog.csdn.net/qq_22393017

正文

按照惯例，先上一张要实现的效果图吧，有兴趣的小伙伴可以继续往下看。
淘宝APP的实际效果：

自己实现的效果：

（文章末尾有demo下载地址，可下载demo查看完整源代码）

主要功能点

本文会详细地讲解这个功能的实现思路，主要有以下四个功能点：

1. 滑动时标题栏透明度渐变。
2. 标题栏的几个ICON控件在滑动时背景渐变
3. 在标题栏有透明度时，ICON是白色的；标题栏变成不透明时，ICON替换成灰色。
4. 头部图片滑动视差效果。

以上这四个功能点都是通过手指的滑动距离来进行处理的。那么首先，我们就需要监听获取滑动距离，那么怎样获取这个滑动距离并进行处理呢？不急，咱们慢慢思考，一步一步来。淘宝这个页面的内容部分，应该是用的ScrollView，而原生的ScrollView，它没有提供onScrollChanged的回调方法。所以我们有两种方式：

• 一种是通过自定义View,让其包含ScrollView子控件。
• 一种是自定义一个ScrollView，重写onScrollChanged方法。

第一种方式可以参考Android–仿淘宝商品详情(继续拖动查看详情)及标题栏渐变 这篇博客，这篇博客由于写了Scrollview滑动到底部，继续拖动查看详情的动能，所以我就不重复写了，可参考它的实现方式。

这篇文章我们换第二种方式，即自定义Scrollview来实现标题栏渐变。onScrollChanged(int x, int y, int oldx, int oldy)方法有x,y,oldx,oldy四个参数，x,y分别代表着本次滑动时，控件距离原来位置（原点）的X轴、Y轴的距离；oldx,oldy分别代表上一次触发该方法时，控件距离原来位置（原点）的x,y轴距离。由于我们只需要监听Y轴方向，所以只需要传递Y轴方向的参数。所以我们采用接口回调的方式，定义一个接口，在onScrollChanged方法中将滑动的竖直距离y 以及手指滑动方向：isUp利用接口回调到Activity去。

实现步骤

Step1: 自定义ScrollView

package com.titlebargradient.widget;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;

/**
 * TODO<自定义监听滑动的ScrollView>
 *
 * @author: 小嵩
 * @date: 2017/1/9 11:37
 */

public class ObservableScrollView extends ScrollView {
   

    private ScrollViewListener scrollViewListener = null;

    public ObservableScrollView(Context context) {
   
        super(context);
    }

    public ObservableScrollView(Context context, AttributeSet attrs,
                                int defStyle) {
   
        super(context, attrs, defStyle);
    }

    public ObservableScrollView(Context context, AttributeSet attrs) {
   
        super(context, attrs);
    }

    public void setOnScrollListener(ScrollViewListener scrollViewListener) {
   
        this.scrollViewListener = scrollViewListener;
    }

    @Override
    protected void onScrollChanged(int x, int y, int oldx, int oldy) {
   
        super.onScrollChanged(x, y, oldx, oldy);
        if (scrollViewListener != null) {
   

            if (oldy < y ) {
   // 手指向上滑动，屏幕内容下滑
                scrollViewListener.onScroll(oldy,y,false);

            } else if (oldy > y ) {
   // 手指向下滑动，屏幕内容上滑
                scrollViewListener.onScroll(oldy,y,true);
            }

        }
    }

    public  interface ScrollViewListener{
   //dy Y轴滑动距离，isUp 是否返回顶部
         void onScroll(int oldy,int dy,boolean isUp);
    }
}

Step2. 布局文件引用自定义的Scrollview

控件路径替换成自己项目自定义ScrollView的路径

  <com.titlebargradient.widget.ObservableScrollView
            android:id="@+id/scrollView"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
  </com.titlebargradient.widget.ObservableScrollView>

Step3. xml页面布局编写

完整XML布局代码如下：

activity_scrollview.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation