ScrollView与ListView上下拉回弹效果

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_40543575/article/details/81023098
近期,项目又一个需求,就是类似于QQ个人中心的下拉回弹的效果.
后来才知道是scrollview实现的功能.分享一下
/**
 * Author:AND
 * Time: 2018/7/8.
 * Email:[email protected]
 * Description:能够伸缩头部position为1的View并且带有回弹效果
 * Detail:
 */
public class BounceZoomScrollView extends ScrollView {
    private static final String TAG = "BounceScrollView";
    //----头部收缩属性--------
    // 记录首次按下位置
    private float mFirstPosition = 0;
    // 头部图片是否正在放大
    private Boolean mScaling = false;
    private View dropZoomView;//需要被放大的view
    private int dropZoomViewWidth;
    private int dropZoomViewHeight;
    //----头部收缩属性end--------
    //------尾部收缩属性--------
    private View inner;// 子View
    private float y;// 点击时y坐标
    private Rect normal = new Rect();// 矩形(这里只是个形式,只是用于判断是否需要动画.)
    private boolean isCount = false;// 是否开始计算
    //最后的坐标
    private float lastX = 0;
    private float lastY = 0;
    //当前坐标
    private float currentX = 0;
    private float currentY = 0;
    //移动的坐标量
    private float distanceX = 0;
    private float distanceY = 0;
    private boolean upDownSlide = false; //判断上下滑动的flag

    //------尾部收缩属性end--------
    public BounceZoomScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    //初始化
    private void init() {
        setOverScrollMode(OVER_SCROLL_NEVER);
        if (getChildAt(0) != null) {
            inner = getChildAt(0);//这个是底部收缩的view
            //头部收缩的
            ViewGroup vg = (ViewGroup) getChildAt(0);
            if (vg.getChildAt(0) != null) {
                dropZoomView = vg.getChildAt(0);
            }
        }
    }

    /***
     * 生成视图工作完成.该函数在生成视图的最后调用,在所有子视图添加完之后. 即使子类覆盖了 onFinishInflate
     * 方法,也应该调用父类的方法,使该方法得以执行.
     */
    @Override
    protected void onFinishInflate() {
        //初始化
        init();
        super.onFinishInflate();
    }

    @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 && inner != null) commOnTouchEvent(ev);
        return super.dispatchTouchEvent(ev);
    }

    /***
     * 触摸事件
     *
     * @param ev
     */
    public void commOnTouchEvent(MotionEvent ev) {
        //头部缩放计算
        if (dropZoomViewWidth <= 0 || dropZoomViewHeight <= 0) {
            dropZoomViewWidth = dropZoomView.getMeasuredWidth();
            dropZoomViewHeight = dropZoomView.getMeasuredHeight();
        }
        switch (ev.getAction()) {
            case MotionEvent.ACTION_UP:
                //手指离开后头部恢复图片
                mScaling = false;
                replyImage();
                // 手指松开尾部恢复
                if (isNeedAnimation()) {
                    animation();
                    isCount = false;
                }
                clear0();
                break;
            //这里头尾分开处理,互不干扰
            case MotionEvent.ACTION_MOVE:
                //尾部处理
                final float preY = y;// 按下时的y坐标
                float nowY = ev.getY();// 时时y坐标
                int deltaY = (int) (preY - nowY);// 滑动距离
                if (!isCount) {
                    deltaY = 0; // 在这里要归0.
                }
                y = nowY;
                // 当滚动到最上或者最下时就不会再滚动,这时移动布局
                if (isNeedMove()) {
                    // 初始化头部矩形
                    if (normal.isEmpty()) {
                        // 保存正常的布局位置
                        normal.set(inner.getLeft(), inner.getTop(),
                                inner.getRight(), inner.getBottom());
                    }
                    // 移动布局
                    inner.layout(inner.getLeft(), inner.getTop() - deltaY / 2,
                            inner.getRight(), inner.getBottom() - deltaY / 2);
                }
                isCount = true;
                //尾部处理end
                //头部处理
                if (!mScaling) {
                    if (getScrollY() == 0) {
                        mFirstPosition = ev.getY();// 滚动到顶部时记录位置,否则正常返回
                    } else {
                        break;
                    }
                }
                int distance = (int) ((ev.getY() - mFirstPosition) * 0.6); // 滚动距离乘以一个系数
                if (distance < 0) { // 当前位置比记录位置要小,正常返回
                    break;
                }
                // 处理放大
                mScaling = true;
                setZoom(1 + distance);
                //头部处理end
                break;
        }
    }

    /***
     * 回缩动画,尾部往下缩动画
     */
    public void animation() {
        // 开启移动动画
        TranslateAnimation ta = new TranslateAnimation(0, 0, inner.getTop(),
                normal.top);
        ta.setDuration(600);
        inner.startAnimation(ta);
        // 设置回到正常的布局位置
        inner.layout(normal.left, normal.top, normal.right, normal.bottom);
        normal.setEmpty();
    }

    // 是否需要开启动画
    public boolean isNeedAnimation() {
        return !normal.isEmpty();
    }

    // 回弹动画,header往上缩动画 (使用了属性动画)
    public void replyImage() {
        final float distance = dropZoomView.getMeasuredWidth() - dropZoomViewWidth;
        // 设置动画
        ValueAnimator anim = ObjectAnimator.ofFloat(0.0F, 1.0F).setDuration((long) (distance * 0.7));
        anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float cVal = (Float) animation.getAnimatedValue();
                setZoom(distance - ((distance) * cVal));
            }
        });
        anim.setDuration(600);
        anim.start();
    }

    //头部缩放
    public void setZoom(float s) {
        if (dropZoomViewHeight <= 0 || dropZoomViewWidth <= 0) {
            return;
        }
        ViewGroup.LayoutParams lp = dropZoomView.getLayoutParams();
        lp.width = (int) (dropZoomViewWidth + s);
        lp.height = (int) (dropZoomViewHeight * ((dropZoomViewWidth + s) / dropZoomViewWidth));
        dropZoomView.setLayoutParams(lp);
    }

    /***
     * 是否需要移动布局 inner.getMeasuredHeight():获取的是控件的总高度
     *
     * getHeight():获取的是屏幕的高度
     *
     * @return
     */
    public boolean isNeedMove() {
        int offset = inner.getMeasuredHeight() - getHeight();
        int scrollY = getScrollY();
        // 0是顶部,后面那个是底部
        if (scrollY == 0 || scrollY == offset) {
            return true;
        }
        return false;
    }

    //清理尾部属性值
    private void clear0() {
        lastX = 0;
        lastY = 0;
        distanceX = 0;
        distanceY = 0;
        upDownSlide = false;
    }
}

以下代码片段是scrollview上下拉回弹的效果

/**
 * Author:AND
 * Time: 2018/7/6.
 * Email:[email protected]
 * Description:
 * Detail:
 */
public class SpringBackScrollView extends ScrollView {

    private float mDownY;
    private float mFirstY;

    // 子View
    private View childView;

    // 初始的位置
    private Rect normal = new Rect();

    private Handler mHandler = new Handler();

    private int speed = 30;

    private boolean isPull;

    public SpringBackScrollView(Context context) {
        super(context);
        init();
    }

    private void init() {
        // 禁用下拉到两端发荧光的效果
        setOverScrollMode(OVER_SCROLL_NEVER);
    }

    public SpringBackScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    /**
     * 设置回弹的速度。值越大,速度越快。默认为30。
     */
    public void setSpringBackSpeed(int speed) {
        if (speed <= 0) {
            throw new RuntimeException("speed 不能小于或者等于0");
        }
        this.speed = speed;
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        if (getChildCount() > 0) {
            childView = getChildAt(0);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (childView != null) {
            handleScrollTouchEvent(ev);
        }
        return super.onTouchEvent(ev);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        super.onLayout(changed, l, t, r, b);
        if (childView == null) {
            return;
        }
        // ScrollView中的唯一子控件的位置信息, 这个位置信息在整个控件的生命周期中保持不变
        normal.set(childView.getLeft(), childView.getTop(), childView.getRight(), childView.getBottom());
    }

    public void handleScrollTouchEvent(MotionEvent ev) {

        switch (ev.getAction()) {

            case MotionEvent.ACTION_DOWN:
                mDownY = ev.getY();
                mFirstY = ev.getY();
                break;

            case MotionEvent.ACTION_UP:
                springBackLocation();
                break;

            case MotionEvent.ACTION_MOVE:
                // 移除滑动的消息队列
                mHandler.removeCallbacksAndMessages(null);

                final float preY = mDownY;
                final float nowY = ev.getY();

                isPull = nowY - mFirstY > 0;

                int deltaY = (int) ((preY - nowY) / 2.5);

                mDownY = nowY;

                // 当滚动到最上或者最下时就不会再滚动,这时移动布局
                if (isNeedMove()) {
                    // 保存正常的布局位置
                    if (normal.isEmpty()) {
                        normal.set(childView.getLeft(), childView.getTop(), childView.getRight(), childView.getBottom());
                        return;
                    }
                    // 移动布局
                    childView.layout(childView.getLeft(), childView.getTop() - deltaY,
                            childView.getRight(), childView.getBottom() - deltaY);
                }

                break;

            default:
                break;
        }

    }

    /**
     * 回弹到原始位置
     */
    public void springBackLocation() {
        final int nowTop = childView.getTop();
        final int nowBottom = childView.getBottom();
        final int originTop = normal.top;
        final int originBottom = normal.bottom;

        // 下拉回弹
        if (isPull) {
            int moveTop = nowTop;
            int moveBottom = nowBottom;
            int duration = 0;

            while (moveTop >= originTop) {
                moveTop -= speed;
                moveBottom -= speed;
                duration += 10;
                final int offTop = moveTop;
                final int offBottom = moveBottom;

                mHandler.postDelayed(new Runnable() {
                    @Override
                    public void run() {
                        if (offTop <= originTop || offBottom <= originBottom) {
                            childView.layout(normal.left, normal.top, normal.right, normal.bottom);
                        } else {
                            childView.layout(normal.left, offTop, normal.right, offBottom);
                        }
                    }

                }, duration);
            }

        }

        // 上拉回弹
        else {
            int moveTop = nowTop;
            int moveBottom = nowBottom;
            int duration = 0;

            while (moveTop <= originTop) {
                moveTop += speed;
                moveBottom += speed;
                duration += 10;
                final int offTop = moveTop;
                final int offBottom = moveBottom;

                mHandler.postDelayed(new Runnable() {

                    @Override
                    public void run() {
                        if (offTop >= originTop || offBottom >= originBottom) {
                            childView.layout(normal.left, normal.top, normal.right, normal.bottom);
                        } else {
                            childView.layout(normal.left, offTop, normal.right, offBottom);
                        }
                    }

                }, duration);

            }

        }

    }

    /**
     * 是否需要移动布局
     */
    public boolean isNeedMove() {
        // 注意:慎重选择
        // 子View的margin和自己的padding对移动有影响,所以子View最好不要设置marginTop和marginBottom。
        // 如果设置了,对判断滑动到底部有些不准确,需要加上下面注释掉margin值,但是不同的机器,测试出有点不一样。
        // 获取到子View的margin值
        // LayoutParams params = (LayoutParams) childView.getLayoutParams();
        // int topMargin = params.topMargin;
        // int bottomMargin = params.bottomMargin;
        // int offset = childView.getHeight() - getHeight() + getPaddingBottom() + getPaddingTop() + topMargin + bottomMargin;
        int offset = childView.getHeight() - getHeight() + getPaddingBottom() + getPaddingTop();
        int scrollY = getScrollY();

        if (scrollY == 0) {
            return true;
        } else if (scrollY == offset) {
            return true;
        }

        return false;
    }

}

猜你喜欢

转载自blog.csdn.net/qq_40543575/article/details/81023098
今日推荐