Android QQ空间和新浪微博中视差视图实现

概要

在QQ空间和新浪微博中都有一个头部的视差滚动视图,就是一个下拉刷新的特效,看上去功能不复杂,实际上实现也不复杂,就是在ListView向下拖拽的过程中动态更改一下头部ImageView的高度就可以了。本来很早之前就用代码写过一次这种效果,是在一个视频教程中看到的,这个周末想使用时发现有些陌生了,所以这次就记录下来方面以后用到时可以随时查看。

视差视图这次例子我们就是用ListView,重写ListView自定义一个控件,在本文中就叫ParallaxListView,事实上开发中像ScrollView和RecyclerView都可以实现,因为我们这里需要重写的方法事实上是在View中定义的然后由这些可以滚动控件继承下来的。

Parallax

ParallaxListView

在写之前现在这里屡一下思路,重写ListView,然后我们通过addHeaderView方法添加一个头部视图HeaderView,HeaderView中就有我们需要的视差视图容器ImageView,为了更好的显示图片我们将图片的scaleType设置为centerCrop,让图片以居中裁剪的方式显示。接下来如果我们往下拖拽ListView,记录下我们手势移动的距离就是ImageView需要增加的高度,有时候为了防止我们移动幅度过大可以添加一个阻尼参数,让ImageView增加的高度比我们实际手势移动的距离小一些。当我们手势松开时,为了有一个更好的返回效果我们借助动画来实现回弹,为此我们需要自定义一个回弹动画。好吧,重点就在两个方面一个是手势移动时ImageView高度增加的操作,另外一个就是回弹动画的定义。

相关变量的初始化

构造方法

在这里为了方面有些参数都直接定义在了当前自定义控件中,如果想以以后可以更简单规范地使用ParallaxListView,可以将相关属性配置在xml文件中并且暴露相关方法使得ParallaxListView更灵活,自定义控件前面已经写过三四篇博客了,像一些属性定义可以参考Android自定义控件学习笔记一,这里就不再复述了。

核心方法的实现

上文之所以说视差视图实现比较简单原因就在该函数的实现中,通过重写该方法我们并没有处理相关的touch事件,因为touch事件的分发和处理在实现上相当复杂。当然了不借助touch事件实现视差的下拉效果,并不表示就不使用touch事件处理函数了,因为有些逻辑还要在touch事件相关方法中执行,很简单就是当我们手势离开屏幕时,在这个时候需要调用一个回弹动画视差视图返回到原始高度。

回弹动画ResetAnimation

Activity中部分代码

布局文件就不贴出来了,可以下载源代码查看。

小结

本篇只讲了一个头部视差滚动效果,有些视差滚动是在欢迎引导页时使用的,那些是对Viewpager进行的处理,当然了在Android的Material Design已经提供了一种视差滚动效果,借助于CoordinatorLayout内嵌了一个CollapsingToolbarLayout,就是一个可收缩的Toolbar,只需要简单的配置就可以实现视差滚动,在本篇文章中就不介绍了,它的实现效果跟本文所介绍的还是有很大不同的,先截张图片吊吊胃口,有兴趣的话网上也已经有许多相关文章了。

Parallax_toolbar

本文地址www.sunnyang.com/351.html

示例源代码下载

5 comments

发表评论