首頁 > 軟體

Android實現回彈ScrollView的原理

2022-04-18 19:00:26

本文範例為大家分享了Android實現回彈ScrollView的原理,供大家參考,具體內容如下

回彈的ScrollView

網上看到的通常是ElasticScrollView
有一個Bug:點選子控制元件滑動時,滑動無效,
所以針對此問題,我對ElasticScrollView做了改進。

原理圖

程式碼

我在註釋中做了詳細的說明

import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.DecelerateInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;

/**
 * Created by Tindle Wei.
 */
public class ElasticScrollView extends ScrollView {

    /**
     * 手指抖動誤差
     */
    private static final int SHAKE_MOVE_VALUE = 8;
    /**
     * Scrollview內部的view
     */
    private View innerView;
    /**
     * 記錄innerView最初的Y位置
     */
    private float startY;
    /**
     * 記錄原始innerView的大小位置
     */
    private Rect outRect = new Rect();

    private boolean animationFinish = true;

    public ElasticScrollView(Context context) {
        super(context);
    }

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

    /**
     * 繼承自View
     * 在xml的所有佈局載入完之後執行
     */
    @Override
    protected void onFinishInflate() {
        if (getChildCount() > 0) {
            innerView = getChildAt(0);
        }
    }

    /**
     * 繼承自ViewGroup
     * 返回true, 擷取觸控事件
     * 返回false, 將事件傳遞給onTouchEvent()和子控制元件的dispatchTouchEvent()
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {

        // 判斷 點選子控制元件 or 按住子控制元件滑動
        // 如果點選子控制元件,則返回 false, 子控制元件響應點選事件
        // 如果按住子控制元件滑動,則返回 true, 滑動佈局
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN: {
                startY = ev.getY();
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                float currentY = ev.getY();
                float scrollY = currentY - startY;

                // 是否返回 true
                return Math.abs(scrollY) > SHAKE_MOVE_VALUE;
            }
        }
        // 預設返回 false
        return super.onInterceptTouchEvent(ev);
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if (innerView == null) {
            return super.onTouchEvent(ev);
        } else {
            myTouchEvent(ev);
        }
        return super.onTouchEvent(ev);
    }

    public void myTouchEvent(MotionEvent ev) {
        if (animationFinish) {

            switch (ev.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    startY = ev.getY();
                    super.onTouchEvent(ev);
                    break;

                case MotionEvent.ACTION_UP:
                    startY = 0;
                    if (isNeedAnimation()) {
                        animation();
                    }
                    super.onTouchEvent(ev);
                    break;

                case MotionEvent.ACTION_MOVE:
                    final float preY = 
                          startY == 0 ? ev.getY() : startY;
                    float nowY = ev.getY();
                    int deltaY = (int) (preY - nowY);
                    startY = nowY;

                    // 當捲動到最上或者最下時就不會再捲動,這時移動佈局
                    if (isNeedMove()) {
                        if (outRect.isEmpty()) {
                            // 儲存正常的佈局位置
                            outRect.set(innerView
                            .getLeft(),  innerView.getTop(), 
                            innerView.getRight(), 
                            innerView.getBottom());
                        }
                        // 移動佈局
                        // 這裡 deltaY/2 為了操作體驗更好
                        innerView.layout(innerView.getLeft(),  
                        innerView.getTop() - deltaY / 2,  
                        innerView.getRight(),  
                        innerView.getBottom() - deltaY / 2);
                    } else {
                        super.onTouchEvent(ev);
                    }
                    break;
                default:
                    break;
            }
        }
    }

    /**
     * 開啟移動動畫
     */
    public void animation() {
        TranslateAnimation ta = new TranslateAnimation(0, 0, 0, outRect.top - innerView.getTop());
        ta.setDuration(400);
        // 減速變化 為了使用者體驗更好
        ta.setInterpolator(new DecelerateInterpolator());
        ta.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                animationFinish = false;
            }

            @Override
            public void onAnimationRepeat(Animation animation) {
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                innerView.clearAnimation();
                // 設定innerView回到正常的佈局位置
                innerView.layout(outRect.left, 
                outRect.top, outRect.right, outRect.bottom);
                outRect.setEmpty();
                animationFinish = true;
            }
        });
        innerView.startAnimation(ta);
    }

    /**
     * 是否需要開啟動畫
     */
    public boolean isNeedAnimation() {
        return !outRect.isEmpty();
    }

    /**
     * 是否需要移動佈局
     */
    public boolean isNeedMove() {
        int offset = innerView.getMeasuredHeight() - getHeight();
        offset = (offset < 0) ? 0: offset;
        int scrollY = getScrollY();
        return (offset == 0 || 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顯示部分的頂部

以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援it145.com。


IT145.com E-mail:sddin#qq.com