自定义ScrollView实现放大回弹效果

背景

在很多项目中我们都会用到ScrollView这个控件，因为ScrollView能够在屏幕内容多时下上滑动以适配加载的内容。但是ScrollView滑动时效果感觉太死板了，这个时候我们如果给它添加一个回弹的动画效果，会让界面交互更加舒服，提升用户体验效果。

效果图

自定义ScrollView

1、创建一个类，继承ScrollView并重写相应的构造函数

public class ZoomInScrollView extends ScrollView {

    public ZoomInScrollView(Context context) {
        this(context, null);
    }

    public ZoomInScrollView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ZoomInScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }
}

2、获取默认第一个子View即我们的头部mHeaderView

@Override
protected void onFinishInflate() {
    super.onFinishInflate();
    // 设置不可过度滚动，否则上移后下拉会出现部分空白的情况
    setOverScrollMode(OVER_SCROLL_NEVER);
    View child = getChildAt(0);
    if (child != null && child instanceof ViewGroup) {
        // 获取默认第一个子View
        ViewGroup vg = (ViewGroup) getChildAt(0);
        if (vg.getChildAt(0) != null) {
            mHeaderView = vg.getChildAt(0);
        }
    }
}

3、获取头部View的长和宽

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    mHeaderWidth = mHeaderView.getMeasuredWidth();
    mHeaderHeight = mHeaderView.getMeasuredHeight();
}

4、设置上下滑动标记

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
    currentX = ev.getX();
    currentY = ev.getY();

    switch (ev.getAction()) {
        case MotionEvent.ACTION_MOVE:
            distanceX = currentX - lastX;
            distanceY = currentY - lastY;
            if (Math.abs(distanceX) < Math.abs(distanceY) && Math.abs(distanceY) > 12) {
                upDownSlide = true;
            }
            break;
    }

    lastX = currentX;
    lastY = currentY;

    if (upDownSlide && mHeaderView != null) {
        commOnTouchEvent(ev);
    }
    return super.dispatchTouchEvent(ev);
}

5、监听触摸事件

private void commOnTouchEvent(MotionEvent ev) {
    switch (ev.getAction()) {
        case MotionEvent.ACTION_UP:
            // 手指离开后头部恢复图片
            mIsPulling = false;
            replyView();
            clear();
            break;
        case MotionEvent.ACTION_MOVE:
            if (!mIsPulling) {
                // 第一次下拉
                if (getScrollY() == 0) {
                    // 滚动到顶部时记录位置，否则正常返回
                    mLastY = (int) ev.getY();
                } else {
                    break;
                }
            }

            int distance = (int) ((ev.getY() - mLastY) * mScaleRatio);
            // 当前位置比记录位置要小时正常返回
            if (distance < 0) {
                break;
            }
            mIsPulling = true;
            setZoom(distance);
            break;
    }
}

6、头部缩放

private void setZoom(float s) {
    float scaleTimes = (float) ((mHeaderWidth + s) / (mHeaderWidth * 1.0));
    // 如超过最大放大倍数则直接返回
    if (scaleTimes > mScaleTimes) {
        return;
    }
    ViewGroup.LayoutParams layoutParams = mHeaderView.getLayoutParams();
    layoutParams.width = (int) (mHeaderWidth + s);
    layoutParams.height = (int) (mHeaderHeight * ((mHeaderWidth + s) / mHeaderWidth));
    // 设置控件水平居中
    ((MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width - mHeaderWidth) / 2, 0, 0, 0);
    mHeaderView.setLayoutParams(layoutParams);
}

7、回弹动画

private void replyView() {
    final float distance = mHeaderView.getMeasuredWidth() - mHeaderWidth;
    // 设置动画
    ValueAnimator anim = ObjectAnimator.ofFloat(distance, 0.0F).setDuration((long) (distance * mReplyRatio));
    anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            setZoom((Float) animation.getAnimatedValue());
        }
    });
    anim.start();
}

通过以上方式就可以简单的实现我们想要的效果了！

项目地址 ☞ 传送门