手记

仿MIUI实现带弹性的ScrollView

丶coding
2018-03-14 23:31:02浏览 4282

一、前言

用过MIUI系统的都知道，拖动列表时如果到了顶部或者底部就会有一个弹性的效果，这里就自己动手去实现一个带弹性效果的ScrollView。最后效果如下。

二、具体实现

具体实现过程大体上就是需要去监听用户当前手势，也就是新建一个RubberScrollView类，先继承ScrollView，然后重写onInterceptTouchEvent方法和OnTouchEvent方法。先在OnInterceptTouchEvent拦截相关的事件，这里定义两个boolean变量isRestoring表示当前View是否恢复原状，isBeingDragged表示当前View是否被拖动,如果当前视图不可点击 或者视图已经恢复原状 或者既不在顶部也不在底部，就把onInterceptEvent交给父类的该方法去处理，然后定义一个最小的滑动距离mTouchSlop，计算当前视图到达顶部或者底部后滑动的距离的距离，如果距离的绝对值（上拉时这个距离是为负值的,并且在视图没有填充满时为即在底部也在顶部）大于mTouchSlop，并且未被拖动，就把isBeingDragged设置为true；如果当前视图并不是在底部或者底部，就照样交给父类的onInterceptEvent方法去处理。
上面的过程如下代码

nt action = MotionEventCompat.getActionMasked(event);
        if (isRestoring && action == MotionEvent.ACTION_DOWN) {
            isRestoring = false;
        }

        if (!isEnabled() || isRestoring || (!isScrollToTop() && !isScrollToBottom())) {
            return super.onInterceptTouchEvent(event);
        }
        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                mActivePointerId = event.getPointerId(0);
                isBeingDragged = false;
                float initialMotionY = getMotionEventY(event);
                if (initialMotionY == -1) {
                    return super.onInterceptTouchEvent(event);
                }
                mInitialMotionY = initialMotionY;
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                if (mActivePointerId == MotionEvent.INVALID_POINTER_ID) {
                    return super.onInterceptTouchEvent(event);
                }
                final float y = getMotionEventY(event);
                if (y == -1f) {
                    return super.onInterceptTouchEvent(event);
                }
                if (isScrollToTop() && !isScrollToBottom()) {
                    // 在顶部不在底部
                    float yDiff = y - mInitialMotionY;
                    if (yDiff > mTouchSlop && !isBeingDragged) {
                        isBeingDragged = true;
                    }
                } else if (!isScrollToTop() && isScrollToBottom()) {
                    // 在底部不在顶部
                    float yDiff = mInitialMotionY - y;
                    if (yDiff > mTouchSlop && !isBeingDragged) {
                        isBeingDragged = true;
                    }
                } else if (isScrollToTop() && isScrollToBottom()) {
                    // 在底部也在顶部
                    float yDiff = y - mInitialMotionY;
                    if (Math.abs(yDiff) > mTouchSlop && !isBeingDragged) {
                        isBeingDragged = true;
                    }
                } else {
                    // 不在底部也不在顶部
                    return super.onInterceptTouchEvent(event);
                }
                break;
            }
            case MotionEventCompat.ACTION_POINTER_UP:
                /**
                 * 多指触控情况下触控点的信息，根据该信息
                 * 获取手指接触递点的id
                 */ 
                onSecondaryPointerUp(event);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                mActivePointerId = MotionEvent.INVALID_POINTER_ID;
                isBeingDragged = false;
                break;
        }
        return isBeingDragged || super.onInterceptTouchEvent(event);

    }

在ViewGroup中事件的传递是从dispatchTouchEvent()->OnInterceptEvent()->OnTouchEvent()进行事件分发的，在这里进行了处理后再到OnTouchEvent里面进行处理，

如果滑动到顶部，就用当前纵坐标减去初始时的Y坐标，如果这个距离小于0，就说明当前未滑动或者滑动无效，就把当前事件交给OnTouchEvent去处理,大于0就交给下面的方法进行计算

 /**
     * 根据滑动的距离计算缩放的比例
     */
    private float calculateRate(float distance) {
        float originalDragPercent = distance / (getResources().getDisplayMetrics().heightPixels);
        float dragPercent = Math.min(1f, originalDragPercent);
        // 二次函数 滑动距离越大，缩放比例越小
        float rate = 2f * dragPercent - (float) Math.pow(dragPercent, 2f);
        return 1 + rate / 5f;
    }

然后把计算得到的结果传入pull()方法；同理，滑动到底部时也进行计算,把最后的结果传入到push()方法里面；如果即在顶部也在底部，就根据移动的距离计算的结果，如果为正值就传入pull方法，是负值就传入push方法,如下

private void pull(float scale) {
        this.setPivotY(0);
        this.setScaleY(scale);
    }

private void push(float scale) {
    this.setPivotY(this.getHeight());
    this.setScaleY(scale);
}

pull时setPivot()为屏幕的顶端,push时则为屏幕的底部。
然后计算坐标看下这个方法，当前手指id的索引用findPointerIndex方法获取在安卓2.0之前是为-1的，所以这里判断下，拦截事件时也需要进行判断。

 private float getMotionEventY(MotionEvent event) {
        // 获取当前手指id的索引
        int index = event.findPointerIndex(mActivePointerId);
        // 得到触摸点相对于控件的Y坐标
        return index < 0 ? -1f : event.getY(index);
    }

最后看看OnTouchEvent()方法的的代码

@Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (MotionEventCompat.getActionMasked(event)) {
            case MotionEvent.ACTION_DOWN:
                mActivePointerId = event.getPointerId(0);
                isBeingDragged = false;
                break;
            case MotionEvent.ACTION_MOVE: {
                float y = getMotionEventY(event);
                if (isScrollToTop() && !isScrollToBottom()) {
                    // 在顶部不在底部
                    mDistance = y - mInitialMotionY;
                    if (mDistance < 0) {
                        return super.onTouchEvent(event);
                    }
                    mScale = calculateRate(mDistance);
                    pull(mScale);
                    return true;
                } else if (!isScrollToTop() && isScrollToBottom()) {
                    // 在底部不在顶部
                    mDistance = mInitialMotionY - y;
                    if (mDistance < 0) {
                        return super.onTouchEvent(event);
                    }
                    mScale = calculateRate(mDistance);
                    push(mScale);
                    return true;
                } else if (isScrollToTop() && isScrollToBottom()) {
                    // 在底部也在顶部
                    mDistance = y - mInitialMotionY;
                    if (mDistance > 0) {
                        mScale = calculateRate(mDistance);
                        pull(mScale);
                    } else {
                        mScale = calculateRate(-mDistance);
                        push(mScale);
                    }
                    return true;
                } else {
                    // 不在底部也不在顶部
                    return super.onTouchEvent(event);
                }
            }
            case MotionEventCompat.ACTION_POINTER_DOWN:
                mActivePointerId = event.getPointerId(MotionEventCompat.getActionIndex(event));
                break;
            case MotionEventCompat.ACTION_POINTER_UP:
                onSecondaryPointerUp(event);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL: {
                if (isScrollToTop() && !isScrollToBottom()) {
                    animateRestore(true);
                } else if (!isScrollToTop() && isScrollToBottom()) {
                    animateRestore(false);
                } else if (isScrollToTop() && isScrollToBottom()) {
                    if (mDistance > 0) {
                        animateRestore(true);
                    } else {
                        animateRestore(false);
                    }
                } else {
                    return super.onTouchEvent(event);
                }
                break;
            }
        }
        return super.onTouchEvent(event);
    }

主要的逻辑上面都已经说了，最后就是ACTION_CANCEL里面根据当前滑动的情况后在animateRestore()进行具体的动画过程了。
看看下面的代码

/**
     *  具体动画
     * @param isPullRestore
     */
    private void animateRestore(final boolean isPullRestore) {
        ValueAnimator animator = ValueAnimator.ofFloat(mScale, 1f);
        animator.setDuration(300);
        // 设置减速插补器
        animator.setInterpolator(new DecelerateInterpolator(2f));

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                if (isPullRestore) {
                    pull(value);
                } else {
                    push(value);
                }
            }
        });
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                isRestoring = true;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isRestoring = false;
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator.start();

这里逻辑比较简单，在addUpdateListener里面进行动画的实时更新，也就是达到跟着用户的手势View进行缩放的效果，然后addListener里面就是在动画结束时设置isRestoring的值，这样在事件触发时就会跳过，动画也就会据此执行或者不执行。这样全部过程就完成了，使用的话就直接当作普通的ScrollView使用，并且用同样的原理也能写一个带弹性效果的RecyclerView。
最后附上全部的代码

package com.legend.ffpmvp.common.view;

/**
 * @author Legend
 * @data by on 2018/3/1.
 * @description
 */

import android.animation.Animator;
import android.animation.ValueAnimator;
import android.content.Context;
import android.support.v4.view.MotionEventCompat;
import android.support.v4.view.ViewCompat;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.ViewConfiguration;
import android.view.animation.DecelerateInterpolator;
import android.widget.ScrollView;

public class RubberScrollView extends ScrollView {

    /**
     *  是否恢复原状
     */
    private boolean isRestoring;
    /**
     *  手指接触点id
     */
    private int mActivePointerId;
    /**
     *  手指按下时y坐标
     */
    private float mInitialMotionY;
    /**
     *  是否被拖动
     */
    private boolean isBeingDragged;
    /**
     *  缩放比例
     */
    private float mScale;
    /**
     *  滑动的距离
     */
    private float mDistance;
    /**
     *  最小移动距离
     */
    private int mTouchSlop;

    public RubberScrollView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mTouchSlop = ViewConfiguration.get(getContext()).getScaledTouchSlop();
    }

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        int action = MotionEventCompat.getActionMasked(event);
        if (isRestoring && action == MotionEvent.ACTION_DOWN) {
            isRestoring = false;
        }

        if (!isEnabled() || isRestoring || (!isScrollToTop() && !isScrollToBottom())) {
            return super.onInterceptTouchEvent(event);
        }
        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                mActivePointerId = event.getPointerId(0);
                isBeingDragged = false;
                float initialMotionY = getMotionEventY(event);
                if (initialMotionY == -1) {
                    return super.onInterceptTouchEvent(event);
                }
                mInitialMotionY = initialMotionY;
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                if (mActivePointerId == MotionEvent.INVALID_POINTER_ID) {
                    return super.onInterceptTouchEvent(event);
                }
                final float y = getMotionEventY(event);
                if (y == -1f) {
                    return super.onInterceptTouchEvent(event);
                }
                if (isScrollToTop() && !isScrollToBottom()) {
                    // 在顶部不在底部
                    float yDiff = y - mInitialMotionY;
                    if (yDiff > mTouchSlop && !isBeingDragged) {
                        isBeingDragged = true;
                    }
                } else if (!isScrollToTop() && isScrollToBottom()) {
                    // 在底部不在顶部
                    float yDiff = mInitialMotionY - y;
                    if (yDiff > mTouchSlop && !isBeingDragged) {
                        isBeingDragged = true;
                    }
                } else if (isScrollToTop() && isScrollToBottom()) {
                    // 在底部也在顶部
                    float yDiff = y - mInitialMotionY;
                    if (Math.abs(yDiff) > mTouchSlop && !isBeingDragged) {
                        isBeingDragged = true;
                    }
                } else {
                    // 不在底部也不在顶部
                    return super.onInterceptTouchEvent(event);
                }
                break;
            }
            case MotionEventCompat.ACTION_POINTER_UP:
                onSecondaryPointerUp(event);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                mActivePointerId = MotionEvent.INVALID_POINTER_ID;
                isBeingDragged = false;
                break;
        }
        return isBeingDragged || super.onInterceptTouchEvent(event);

    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (MotionEventCompat.getActionMasked(event)) {
            case MotionEvent.ACTION_DOWN:
                mActivePointerId = event.getPointerId(0);
                isBeingDragged = false;
                break;
            case MotionEvent.ACTION_MOVE: {
                float y = getMotionEventY(event);
                if (isScrollToTop() && !isScrollToBottom()) {
                    // 在顶部不在底部
                    mDistance = y - mInitialMotionY;
                    if (mDistance < 0) {
                        return super.onTouchEvent(event);
                    }
                    mScale = calculateRate(mDistance);
                    pull(mScale);
                    return true;
                } else if (!isScrollToTop() && isScrollToBottom()) {
                    // 在底部不在顶部
                    mDistance = mInitialMotionY - y;
                    if (mDistance < 0) {
                        return super.onTouchEvent(event);
                    }
                    mScale = calculateRate(mDistance);
                    push(mScale);
                    return true;
                } else if (isScrollToTop() && isScrollToBottom()) {
                    // 在底部也在顶部
                    mDistance = y - mInitialMotionY;
                    if (mDistance > 0) {
                        mScale = calculateRate(mDistance);
                        pull(mScale);
                    } else {
                        mScale = calculateRate(-mDistance);
                        push(mScale);
                    }
                    return true;
                } else {
                    // 不在底部也不在顶部
                    return super.onTouchEvent(event);
                }
            }
            case MotionEventCompat.ACTION_POINTER_DOWN:
                mActivePointerId = event.getPointerId(MotionEventCompat.getActionIndex(event));
                break;
            case MotionEventCompat.ACTION_POINTER_UP:
                onSecondaryPointerUp(event);
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL: {
                if (isScrollToTop() && !isScrollToBottom()) {
                    animateRestore(true);
                } else if (!isScrollToTop() && isScrollToBottom()) {
                    animateRestore(false);
                } else if (isScrollToTop() && isScrollToBottom()) {
                    if (mDistance > 0) {
                        animateRestore(true);
                    } else {
                        animateRestore(false);
                    }
                } else {
                    return super.onTouchEvent(event);
                }
                break;
            }
        }
        return super.onTouchEvent(event);
    }

    private boolean isScrollToTop() {
        return !ViewCompat.canScrollVertically(this, -1);
    }

    private boolean isScrollToBottom() {
        return !ViewCompat.canScrollVertically(this, 1);
    }

    private float getMotionEventY(MotionEvent event) {
        // 获取当前手指id的索引
        int index = event.findPointerIndex(mActivePointerId);
        // 得到触摸点相对于控件的Y坐标
        return index < 0 ? -1f : event.getY(index);
    }

    private void onSecondaryPointerUp(MotionEvent event) {
        final int pointerIndex = MotionEventCompat.getActionIndex(event);
        final int pointerId = event.getPointerId(pointerIndex);
        if (pointerId == mActivePointerId) {
            int newPointerIndex = pointerIndex == 0 ? 1 : 0;
            mActivePointerId = event.getPointerId(newPointerIndex);
        }
    }

    /**
     * 根据滑动的距离计算缩放的比例
     */
    private float calculateRate(float distance) {
        float originalDragPercent = distance / (getResources().getDisplayMetrics().heightPixels);
        float dragPercent = Math.min(1f, originalDragPercent);
        // 二次函数 拖动比例越大 缩放比例越小
        float rate = 2f * dragPercent - (float) Math.pow(dragPercent, 2f);
        return 1 + rate / 5f;
    }

    /**
     *  具体动画
     * @param isPullRestore
     */
    private void animateRestore(final boolean isPullRestore) {
        ValueAnimator animator = ValueAnimator.ofFloat(mScale, 1f);
        animator.setDuration(300);
        // 设置减速插补器
        animator.setInterpolator(new DecelerateInterpolator(2f));

        animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                float value = (float) animation.getAnimatedValue();
                if (isPullRestore) {
                    pull(value);
                } else {
                    push(value);
                }
            }
        });
        animator.addListener(new Animator.AnimatorListener() {
            @Override
            public void onAnimationStart(Animator animation) {
                isRestoring = true;
            }

            @Override
            public void onAnimationEnd(Animator animation) {
                isRestoring = false;
            }

            @Override
            public void onAnimationCancel(Animator animation) {

            }

            @Override
            public void onAnimationRepeat(Animator animation) {

            }
        });
        animator.start();
    }

    private void pull(float scale) {
        this.setPivotY(0);
        this.setScaleY(scale);
    }

    private void push(float scale) {
        this.setPivotY(this.getHeight());
        this.setScaleY(scale);
    }
}

三、总结

整个过程其实主要就是对事件分发时的监听从而实现对手势的判断，但是确能加深对整个过程以及事件分发的理解，道阻且长，就不多说了，有理解不对的地方欢迎指出。

参考：事件分发详解

相关标签
Java
Android
设计
6人推荐
随时随地看视频
慕课网APP

热门评论

学习了

哦哦

查看全部评论

相关阅读

ImageView随着手一动，用到onTouchEvent(MotionEvent event)
ImageView自动来回循环移动和随手移动的结合，用到Animation
Android基本布局-线性布局
Android样式(style)和主题(theme)
程序员，请向加班说No！！！