android动态视差,Android实现有视差效果的ListView

视差效果是什么？

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

那么到底什么是视差效果呢？一起来看效果图就知道了：

我们可以看到 ListView的 HeaderView会跟随 ListView的滑动而变大，HeaderView里的图片会有缩放效果。这些可以使用属性动画来实现。接下来我们就来动手吧！

首先自定义几个属性，在之后可以用到：

之后创建 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设置相关图片的。

下面就是视差效果的主要实现代码了：

@Override

protected 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)里去实现相关操作：

@Override

public 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() {

@Override

public 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() {

@Override

public 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开发者们能有所帮助，如果有疑问大家可以留言交流。