Android实现有视差效果的ListView

视差效果是什么？
所谓的视差效果在Web设计和移动应用中都非常常见，我们在一些主要的平台都可以发现它的身影，从Windows Phone到iOS乃至Android。按照维基百科的说法，视差滚动是计算机图形学中的一种特殊的滚动技术，在此相机移动背景图像比前景图像慢，从而引起了视觉深度的假象。
那么到底什么是视差效果呢？一起来看效果图就知道了：

我们可以看到 ListView 的 HeaderView 会跟随 ListView 的滑动而变大，HeaderView里的图片会有缩放效果。这些可以使用属性动画来实现。接下来我们就来动手吧！
首先自定义几个属性，在之后可以用到：

<?xml version="1.0" encoding="utf-8"?><resources> <declare-styleable name="ZoomListView"> <！-- headerView的高度 --><attr name="header_height" format="dimension|reference"></attr><！-- headerView的最大高度 --> <attr name="header_max_height" format="dimension|reference"></attr> <！-- headerView里面的图片最大的伸缩量 --><attr name="header_max_scale" format="float"></attr> </declare-styleable></resources>

之后创建 ZoomListView 类，继承自 ListView ：

public class ZoomListView extends ListView {// 最大的伸缩量 private final float defaultHeaderMaxScale = 1.2f; // 头部最大的高度 private float headerMaxHeight; // 头部初始高度 private float headerHeight; // 头部默认初始高度 private float defaultHeaderHeight; // 头部默认最大的高度 private float defaultHeaderMaxHeight; private ImageView headerView; private ViewGroup.LayoutParams layoutParams; private LinearLayout linearLayout; // 最大的缩放值 private float headerMaxScale; public ZoomListView（Context context） {this（context, null）; } public ZoomListView（Context context, AttributeSet attrs） {this（context, attrs, 0）; } public ZoomListView（Context context, AttributeSet attrs, int defStyleAttr） {super（context, attrs, defStyleAttr）;defaultHeaderHeight = TypedValue.applyDimension（TypedValue.COMPLEX_UNIT_DIP, 160, context.getResources（）.getDisplayMetrics（））;defaultHeaderMaxHeight = TypedValue.applyDimension（TypedValue.COMPLEX_UNIT_DIP, 240, context.getResources（）.getDisplayMetrics（））;TypedArray a = context.obtainStyledAttributes（attrs, R.styleable.ZoomListView）;headerHeight = a.getDimension（R.styleable.ZoomListView_header_height, defaultHeaderHeight）;headerMaxHeight = a.getDimension（R.styleable.ZoomListView_header_max_height, defaultHeaderMaxHeight）;headerMaxScale = a.getFloat（R.styleable.ZoomListView_header_max_scale, defaultHeaderMaxScale）;a.recycle（）;initView（）; } ...}

到这里都是按部就班式的，设置好自定义属性的初始值，之后调用 initView（） ，那就来看看 initView（） 方法：

private void initView（） { headerView = new ImageView（getContext（））; headerView.setScaleType（ImageView.ScaleType.CENTER_CROP）; linearLayout = new LinearLayout（getContext（））; linearLayout.addView（headerView）; layoutParams = headerView.getLayoutParams（）; if （layoutParams == null） {layoutParams = new ViewGroup.LayoutParams（ViewGroup.LayoutParams.MATCH_PARENT, （int） headerHeight）; } else {layoutParams.width = ViewGroup.LayoutParams.MATCH_PARENT;layoutParams.height = （int） headerHeight; } headerView.setLayoutParams（layoutParams）; addHeaderView（linearLayout）;}public void setDrawableId（int id） { headerView.setImageResource（id）;}

可以看出在 initView（） 里我们创建了 headerView ，并添加到了ListView的头部。而 setDrawableId（int id） 就是给 headerView 设置相关图片的。
下面就是视差效果的主要实现代码了：

@Overrideprotected boolean overScrollBy（int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent） { if （deltaY < 0 && isTouchEvent） {if （headerView.getHeight（） < headerMaxHeight） { int newHeight = headerView.getHeight（） + Math.abs（deltaY / 3）; headerView.getLayoutParams（）.height = newHeight; headerView.requestLayout（）; float temp = 1 + （headerMaxScale - 1f） * （headerView.getHeight（） - headerHeight） / （headerMaxHeight - headerHeight）; headerView.animate（）.scaleX（temp） .scaleY（temp）.setDuration（0）.start（）;} } return super.overScrollBy（deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent）;}

我们重写了 overScrollBy（） 方法，当 deltaY 小于0时（即 ListView 已经到顶端，但是用户手势还是向下拉），去动态地设置 headerView 的高度以及 headerView 的 scale 值。这样就可以产生 headerView 变高以及图片放大的效果了。
接下来要考虑的问题就是当用户松开手指时，要恢复回原来的样子。所以我们应该在 onTouchEvent（MotionEvent ev） 里去实现相关操作：

@Overridepublic boolean onTouchEvent（MotionEvent ev） { switch （ev.getAction（）） {case MotionEvent.ACTION_UP:startAnim（）; break; } return super.onTouchEvent（ev）;}// 开始执行动画private void startAnim（） { ValueAnimator animator = ValueAnimator.ofFloat（headerView.getHeight（）, headerHeight）; animator.addUpdateListener（new ValueAnimator.AnimatorUpdateListener（） {@Overridepublic void onAnimationUpdate（ValueAnimator animation） { float fraction = （float） animation.getAnimatedValue（）; headerView.getLayoutParams（）.height = （int） fraction; headerView.requestLayout（）;} }）; animator.setDuration（500）; animator.setInterpolator（new LinearInterpolator（））; ValueAnimator animator2 = ValueAnimator.ofFloat（headerView.getScaleX（）, 1f）; animator2.addUpdateListener（new ValueAnimator.AnimatorUpdateListener（） {@Overridepublic void onAnimationUpdate（ValueAnimator animation） { float fraction = （float） animation.getAnimatedValue（）; headerView.setScaleX（fraction）; headerView.setScaleY（fraction）;} }）; animator2.setDuration（500）; animator2.setInterpolator（new LinearInterpolator（））; animator.start（）; animator2.start（）;}

上面的代码简单点来说，就是在 ACTION_UP 时，去开始两个属性动画，一个属性动画是将 headerView 的高度恢复成原来的值，另一个属性动画就是把 headerView 的 scale 重新恢复为1f。相信大家都可以看懂的。

总结
以上就是这篇文章的全部内容了，希望这篇文章的内容对各位Android开发者们能有所帮助，如果有疑问大家可以留言交流。