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

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

前言

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

正文

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

自己实现的效果：

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

主要功能点

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

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

以上这四个功能点都是通过手指的滑动距离来进行处理的。那么首先，我们就需要监听获取滑动距离，那么怎样获取这个滑动距离并进行处理呢？不急，咱们慢慢思考，一步一步来。淘宝这个页面的内容部分，应该是用的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;}@Overrideprotected 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.ObservableScrollViewandroid: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"><LinearLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><com.titlebargradient.widget.ObservableScrollViewandroid:id="@+id/scrollView"android:layout_width="match_parent"android:layout_height="match_parent"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:paddingTop="250dp"><TextViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:padding="8dp"android:textSize="20sp"android:lineSpacingExtra="10dp"android:text="@string/TextContent"android:gravity="center"/></LinearLayout></com.titlebargradient.widget.ObservableScrollView></LinearLayout><LinearLayoutandroid:id="@+id/lv_header"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"><ImageViewandroid:id="@+id/iv_header"android:layout_width="match_parent"android:layout_height="@dimen/head_height"android:scaleType="centerCrop"android:layout_gravity="center"android:src="@mipmap/bg_header"/></LinearLayout><include layout="@layout/layout_toolbar"/><LinearLayoutandroid:id="@+id/lv_bottom"android:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical"android:layout_alignParentBottom="true"><include layout="@layout/layout_bottom"/></LinearLayout></RelativeLayout>

activity_scrollview.xml中引用的layout_toolbar.xml 标题栏：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="wrap_content"><android.support.v7.widget.Toolbarandroid:id="@+id/toolbar"android:layout_width="match_parent"android:layout_height="@dimen/title_height"android:background="@color/color_transparent"><!--返回按钮--><ImageViewandroid:id="@+id/iv_back"android:layout_width="40dp"android:layout_height="40dp"android:padding="8dp"android:src="@mipmap/ic_back"android:background="@drawable/bg_circle"/><ImageViewandroid:id="@+id/iv_more"android:layout_width="40dp"android:layout_height="40dp"android:padding="10dp"android:src="@mipmap/ic_more"android:layout_gravity="right"android:layout_marginRight="8dp"android:background="@drawable/bg_circle"/><ImageViewandroid:id="@+id/iv_shopping_cart"android:layout_width="40dp"android:layout_height="40dp"android:padding="8dp"android:src="@mipmap/ic_shopping_cart"android:layout_gravity="right"android:layout_marginRight="8dp"android:background="@drawable/bg_circle"/></android.support.v7.widget.Toolbar><Viewandroid:id="@+id/spite_line"android:layout_width="match_parent"android:layout_height="0.8dp"android:background="@color/color_light_gray"android:visibility="gone"/></LinearLayout>

所引用的layout_bottom.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="horizontal"android:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:layout_width="48dp"android:layout_height="48dp"android:background="@drawable/bg_square"android:gravity="center"android:padding="8dp"android:layout_gravity="center"android:drawableTop="@mipmap/ic_help"android:drawablePadding="2dp"android:text="客服"android:textSize="11sp" /><TextViewandroid:layout_width="48dp"android:layout_height="48dp"android:background="@drawable/bg_square"android:gravity="center"android:padding="8dp"android:layout_gravity="center"android:drawableTop="@mipmap/ic_market"android:drawablePadding="2dp"android:text="店铺"android:textSize="11sp"/><TextViewandroid:layout_width="48dp"android:layout_height="48dp"android:background="@drawable/bg_square"android:gravity="center"android:padding="8dp"android:layout_gravity="center"android:drawableTop="@mipmap/ic_collection"android:drawablePadding="2dp"android:text="收藏"android:textSize="11sp"/><TextViewandroid:layout_width="0dp"android:layout_weight="1"android:layout_height="48dp"android:background="@color/color_orange"android:gravity="center"android:text="加入购物车"android:textColor="@android:color/white"/><TextViewandroid:layout_width="0dp"android:layout_weight="1"android:layout_height="48dp"android:background="@color/color_red"android:gravity="center"android:text="立即购买"android:textColor="@android:color/white"/></LinearLayout>

其中，ICON 是从iconfont官网下载的，可自行搜索网站链接：阿里巴巴矢量图库

到这里我们的布局就已经写好了，接下来就是在Activity中监听滑动事件，然后实现渐变效果。

Step4. 监听滑动距离

在Activity中，初始化自定义Scrollview并调用接口，实现对滑动距离的监听**

部分关键代码如下，完整代码可下载demo进行研究：

 //获取dimen属性中 标题和头部图片的高度final float title_height = getResources().getDimension(R.dimen.title_height);final float head_height = getResources().getDimension(R.dimen.head_height);//滑动事件回调监听（一次滑动的过程一般会连续触发多次）scrollView.setOnScrollListener(new ObservableScrollView.ScrollViewListener() {@Overridepublic void onScroll(int oldy, int dy, boolean isUp) {/* DensityUtil Density = new DensityUtil();int mHeaderHeight_px = Density.dip2px(ScrollViewActivity.this, 200.0f);*/float move_distance = head_height - title_height;if (!isUp && dy <= move_distance) {//手指往上滑,距离未超过200dp//标题栏逐渐从透明变成不透明toolbar.setBackgroundColor(ContextCompat.getColor(ScrollViewActivity.this, R.color.color_white));TitleAlphaChange(dy, move_distance);//标题栏渐变HeaderTranslate(dy);//图片视差平移} else if (!isUp && dy > move_distance) {//手指往上滑,距离超过200dpTitleAlphaChange(1, 1);//设置不透明百分比为100%，防止因滑动速度过快，导致距离超过200dp,而标题栏透明度却还没变成完全不透的情况。HeaderTranslate(head_height);//这里也设置平移，是因为不设置的话，如果滑动速度过快，会导致图片没有完全隐藏。ivBack.setImageResource(R.mipmap.ic_back_dark);ivMore.setImageResource(R.mipmap.ic_more_dark);ivShoppingCart.setImageResource(R.mipmap.ic_shopping_dark);spiteLine.setVisibility(View.VISIBLE);} else if (isUp && dy > move_distance) {//返回顶部，但距离头部位置大于200dp//不做处理} else if (isUp && dy <= move_distance) {//返回顶部，但距离头部位置小于200dp//标题栏逐渐从不透明变成透明TitleAlphaChange(dy, move_distance);//标题栏渐变HeaderTranslate(dy);//图片视差平移ivBack.setImageResource(R.mipmap.ic_back);ivMore.setImageResource(R.mipmap.ic_more);ivShoppingCart.setImageResource(R.mipmap.ic_shopping_cart);spiteLine.setVisibility(View.GONE);}}});

Step5. 设置标题栏透明度变化：

 private void TitleAlphaChange(int dy, float mHeaderHeight_px) {//设置标题栏透明度变化float percent = (float) Math.abs(dy) / Math.abs(mHeaderHeight_px);//如果是设置背景透明度，则传入的参数是int类型，取值范围0-255//如果是设置控件透明度，传入的参数是float类型，取值范围0.0-1.0//这里我们是设置背景透明度就好，因为设置控件透明度的话，返回ICON等也会变成透明的。//alpha 值越小越透明int alpha = (int) (percent * 255);toolbar.getBackground().setAlpha(alpha);//设置控件背景的透明度，传入int类型的参数（范围0~255）ivBack.getBackground().setAlpha(255 - alpha);ivMore.getBackground().setAlpha(255 - alpha);ivShoppingCart.getBackground().setAlpha(255 - alpha);}

图片滑动视差效果：

private void HeaderTranslate(float distance) {lvHeader.setTranslationY(-distance);ivHeader.setTranslationY(distance/2);}

结尾传送门

GitHub项目地址：TitlebarGradient－淘宝购物详情页标题栏渐变。

仿知乎、美团效果的可参考我另外一篇博客：http://blog.csdn.net/qq_22393017/article/details/54377603

欢迎交流讨论、有问题也非常欢迎指出来，觉得不错的话请Star一下哦，大家的支持将会让人更有动力继续分享~