模仿微信朋友圈界面,主要实现:1、能够下拉背景图随着变化,2、松手能够弹回并带着动画效果。
一.自定义一个View并继承ListView;
实现以上效果,要重写ListView的两个方法:
overScrollBy();onTouchEvent()
overScrollBy()方法有9个参数,这里解释几个实现以上效果的主要参数:
//deltaY:竖直方向的瞬时值移量、变化量dx,顶部到头为 - ,底部到头为 +
//scrollY:竖直方向的偏移量/变化量
//scrollRangeY:竖直方向滑动的范围
//maxOverScrollY:竖直方向最大滑动范围
//isTouchEvent:是否是手指触摸,如果是手指拉为true,如果是惯性为false
根据deltaY、isTouchEvent的值,可以进行判断是否是在进行手指下拉。如果是,我们就可以把拉动瞬间变化量的绝对值给ListView的Header,从而实现放大的效果,注意在进行放大时,放大的高度不能超过原始图片的大小。
代码如下
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY,
int scrollRangeX, int scrollRangeY, int maxOverScrollX,
int maxOverScrollY, boolean isTouchEvent) {
Log.i(TAG, "overScrollBy: deltaY:" + deltaY + " scrollY:" + scrollY + " scrollRangeY:" +
scrollRangeY + " maxOverScrollY:" + maxOverScrollY + " isTouchEvent:" + isTouchEvent);
//手指拉动并且是下拉
if (isTouchEvent && deltaY < 0) {
//把拉动的瞬时变化量的绝对值交给Header,就可以实现放大的效果
if (mImageView.getHeight() <= drawableHeight) {
//高度不超出图片的大小时,才让其生效
int newHeight = (int) (mImageView.getHeight()+ Math.abs(deltaY/3.0f));
mImageView.getLayoutParams().height = newHeight;
mImageView.requestLayout();
}
}
return super.overScrollBy(deltaX, deltaY, scrollX, scrollY,
scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
}
onTouchEvent()方法主要是判断手指抬起,抬起时进行一系列的动画:
弹回动画执行方式可以为属性动画、自定义动画
属性动画:创建一个属性动画对象,添加动画更新监听,AnimatorUpdateListener(),实现该接口的onAnimationUpdate方法,然后获取一个百分数,利用估值器获取更新后的图片高度,将新的高度设置为背景图片的高度。然后设置震动,代码如下:
@Override
public boolean onTouch