Android原理——回弹ScrollView

回弹的ScrollView

网上看到的通常是ElasticScrollView，
有一个Bug：点击子控件滑动时，滑动无效，
所以针对此问题，我对ElasticScrollView做了改进。

原理图

代码

我在注释中做了详细的说明

<span class="hljs-keyword">import</span> android.content.Context;
<span class="hljs-keyword">import</span> android.graphics.Rect;
<span class="hljs-keyword">import</span> android.util.AttributeSet;
<span class="hljs-keyword">import</span> android.view.MotionEvent;
<span class="hljs-keyword">import</span> android.view.View;
<span class="hljs-keyword">import</span> android.view.animation.Animation;
<span class="hljs-keyword">import</span> android.view.animation.DecelerateInterpolator;
<span class="hljs-keyword">import</span> android.view.animation.TranslateAnimation;
<span class="hljs-keyword">import</span> android.widget.ScrollView;

<span class="hljs-javadoc">/**
 * Created by Tindle Wei.
 */</span>
<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">ElasticScrollView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">ScrollView</span> {</span>

    <span class="hljs-javadoc">/**
     * 手指抖动误差
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">static</span> <span class="hljs-keyword">final</span> <span class="hljs-keyword">int</span> SHAKE_MOVE_VALUE = <span class="hljs-number">8</span>;
    <span class="hljs-javadoc">/**
     * Scrollview内部的view
     */</span>
    <span class="hljs-keyword">private</span> View innerView;
    <span class="hljs-javadoc">/**
     * 记录innerView最初的Y位置
     */</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">float</span> startY;
    <span class="hljs-javadoc">/**
     * 记录原始innerView的大小位置
     */</span>
    <span class="hljs-keyword">private</span> Rect outRect = <span class="hljs-keyword">new</span> Rect();

    <span class="hljs-keyword">private</span> <span class="hljs-keyword">boolean</span> animationFinish = <span class="hljs-keyword">true</span>;

    <span class="hljs-keyword">public</span> <span class="hljs-title">ElasticScrollView</span>(Context context) {
        <span class="hljs-keyword">super</span>(context);
    }

    <span class="hljs-keyword">public</span> <span class="hljs-title">ElasticScrollView</span>(Context context, AttributeSet attrs) {
        <span class="hljs-keyword">super</span>(context, attrs);
    }

    <span class="hljs-javadoc">/**
     * 继承自View
     * 在xml的所有布局加载完之后执行
     */</span>
    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onFinishInflate</span>() {
        <span class="hljs-keyword">if</span> (getChildCount() > <span class="hljs-number">0</span>) {
            innerView = getChildAt(<span class="hljs-number">0</span>);
        }
    }

    <span class="hljs-javadoc">/**
     * 继承自ViewGroup
     * 返回true, 截取触摸事件
     * 返回false, 将事件传递给onTouchEvent()和子控件的dispatchTouchEvent()
     */</span>
    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">onInterceptTouchEvent</span>(MotionEvent ev) {

        <span class="hljs-comment">// 判断 点击子控件 or 按住子控件滑动</span>
        <span class="hljs-comment">// 如果点击子控件，则返回 false, 子控件响应点击事件</span>
        <span class="hljs-comment">// 如果按住子控件滑动，则返回 true, 滑动布局</span>
        <span class="hljs-keyword">switch</span> (ev.getAction()) {
            <span class="hljs-keyword">case</span> MotionEvent.ACTION_DOWN: {
                startY = ev.getY();
                <span class="hljs-keyword">break</span>;
            }
            <span class="hljs-keyword">case</span> MotionEvent.ACTION_MOVE: {
                <span class="hljs-keyword">float</span> currentY = ev.getY();
                <span class="hljs-keyword">float</span> scrollY = currentY - startY;

                <span class="hljs-comment">// 是否返回 true</span>
                <span class="hljs-keyword">return</span> Math.abs(scrollY) > SHAKE_MOVE_VALUE;
            }
        }
        <span class="hljs-comment">// 默认返回 false</span>
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">super</span>.onInterceptTouchEvent(ev);
    }

    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">onTouchEvent</span>(MotionEvent ev) {
        <span class="hljs-keyword">if</span> (innerView == <span class="hljs-keyword">null</span>) {
            <span class="hljs-keyword">return</span> <span class="hljs-keyword">super</span>.onTouchEvent(ev);
        } <span class="hljs-keyword">else</span> {
            myTouchEvent(ev);
        }
        <span class="hljs-keyword">return</span> <span class="hljs-keyword">super</span>.onTouchEvent(ev);
    }

    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">myTouchEvent</span>(MotionEvent ev) {
        <span class="hljs-keyword">if</span> (animationFinish) {

            <span class="hljs-keyword">switch</span> (ev.getAction()) {
                <span class="hljs-keyword">case</span> MotionEvent.ACTION_DOWN:
                    startY = ev.getY();
                    <span class="hljs-keyword">super</span>.onTouchEvent(ev);
                    <span class="hljs-keyword">break</span>;

                <span class="hljs-keyword">case</span> MotionEvent.ACTION_UP:
                    startY = <span class="hljs-number">0</span>;
                    <span class="hljs-keyword">if</span> (isNeedAnimation()) {
                        animation();
                    }
                    <span class="hljs-keyword">super</span>.onTouchEvent(ev);
                    <span class="hljs-keyword">break</span>;

                <span class="hljs-keyword">case</span> MotionEvent.ACTION_MOVE:
                    <span class="hljs-keyword">final</span> <span class="hljs-keyword">float</span> preY = 
                          startY == <span class="hljs-number">0</span> ? ev.getY() : startY;
                    <span class="hljs-keyword">float</span> nowY = ev.getY();
                    <span class="hljs-keyword">int</span> deltaY = (<span class="hljs-keyword">int</span>) (preY - nowY);
                    startY = nowY;

                    <span class="hljs-comment">// 当滚动到最上或者最下时就不会再滚动，这时移动布局</span>
                    <span class="hljs-keyword">if</span> (isNeedMove()) {
                        <span class="hljs-keyword">if</span> (outRect.isEmpty()) {
                            <span class="hljs-comment">// 保存正常的布局位置</span>
                            outRect.set(innerView
                            .getLeft(),  innerView.getTop(), 
                            innerView.getRight(), 
                            innerView.getBottom());
                        }
                        <span class="hljs-comment">// 移动布局</span>
                        <span class="hljs-comment">// 这里 deltaY/2 为了操作体验更好</span>
                        innerView.layout(innerView.getLeft(),  
                        innerView.getTop() - deltaY / <span class="hljs-number">2</span>,  
                        innerView.getRight(),  
                        innerView.getBottom() - deltaY / <span class="hljs-number">2</span>);
                    } <span class="hljs-keyword">else</span> {
                        <span class="hljs-keyword">super</span>.onTouchEvent(ev);
                    }
                    <span class="hljs-keyword">break</span>;
                <span class="hljs-keyword">default</span>:
                    <span class="hljs-keyword">break</span>;
            }
        }
    }

    <span class="hljs-javadoc">/**
     * 开启移动动画
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">animation</span>() {
        TranslateAnimation ta = <span class="hljs-keyword">new</span> TranslateAnimation(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>, outRect.top - innerView.getTop());
        ta.setDuration(<span class="hljs-number">400</span>);
        <span class="hljs-comment">// 减速变化 为了用户体验更好</span>
        ta.setInterpolator(<span class="hljs-keyword">new</span> DecelerateInterpolator());
        ta.setAnimationListener(<span class="hljs-keyword">new</span> Animation.AnimationListener() {
            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onAnimationStart</span>(Animation animation) {
                animationFinish = <span class="hljs-keyword">false</span>;
            }

            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onAnimationRepeat</span>(Animation animation) {
            }

            <span class="hljs-annotation">@Override</span>
            <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onAnimationEnd</span>(Animation animation) {
                innerView.clearAnimation();
                <span class="hljs-comment">// 设置innerView回到正常的布局位置</span>
                innerView.layout(outRect.left, 
                outRect.top, outRect.right, outRect.bottom);
                outRect.setEmpty();
                animationFinish = <span class="hljs-keyword">true</span>;
            }
        });
        innerView.startAnimation(ta);
    }

    <span class="hljs-javadoc">/**
     * 是否需要开启动画
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">isNeedAnimation</span>() {
        <span class="hljs-keyword">return</span> !outRect.isEmpty();
    }

    <span class="hljs-javadoc">/**
     * 是否需要移动布局
     */</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">isNeedMove</span>() {
        <span class="hljs-keyword">int</span> offset = innerView.getMeasuredHeight() - getHeight();
        offset = (offset < <span class="hljs-number">0</span>) ? <span class="hljs-number">0</span>: offset;
        <span class="hljs-keyword">int</span> scrollY = getScrollY();
        <span class="hljs-keyword">return</span> (offset == <span class="hljs-number">0</span> || scrollY == offset);
    }
}

其他说明

1. 下面是继承关系：
   ElasticScrollView extends ScrollView
ScrollView extends FrameLayout
FrameLayout extends ViewGroup
ViewGroup extends View
2. 解决子控件 截取滑动监听的代码在onInterceptTouchEvent() ,
   通过监听Y的变化，来判断是点击子控件还是上拉下拉
3. getMeasuredHeight()返回的是原始测量高度，与屏幕无关，
   getHeight()返回的是在屏幕上显示的高度。
   实际上在当屏幕可以包裹内容的时候，他们的值是相等的，只有当view超出屏幕后，才能看出他们的区别。当超出屏幕后，getMeasuredHeight()等于getHeight()加上屏幕之外没有显示的高度。
4. getScrollY() 返回的是滑动View显示部分的顶部

转自：http://www.hotpost.co/8699.html