首頁 > 軟體

Android自定義ScrollView實現阻尼回彈

2022-04-01 19:02:34

Android開發中,當一個頁面存放的控制元件超出螢幕時,通常需要使用ScrollView來包裹布局。這樣使用者可以通過手指的滑動來檢視超出螢幕的部分。然而當ScrollView滑動到邊界時,繼續滑動只會顯示一個陰影效果。iOS自帶的控制元件卻可以實現邊界的阻尼回彈效果,這種阻尼回彈效果會讓使用者有更好的使用體驗。這裡給出一個Android上的實現方案

解決思路:

ScrollView使用時要求內部有且僅一個子View。當ScrollView滑動到邊界時,讓子View在ScrollView中隨著手指按一定的規則進行平移,模擬出拉伸效果。當手指鬆開時,再讓子View恢復拉伸前的位置,模擬出回彈效果。

完整的程式碼如下,詳細的原理見註釋即可

public class StretchScrollView extends NestedScrollView {

    // 子View
    private View innerView;
    // 上次手勢事件的y座標
    private float mLastY;
    // 記錄子View的正常位置
    private Rect normal = new Rect();

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

    @Override
    protected void onFinishInflate() {
        initView();
        super.onFinishInflate();
    }

    /**
     * 獲取ScrollView的子佈局
     */
    private void initView() {
        // 去除原本ScrollView捲動到邊界時的陰影效果
        setOverScrollMode(OVER_SCROLL_NEVER);
        if (getChildAt(0) != null) {
            innerView = getChildAt(0);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_UP:
                // 手指鬆開恢復
                if (!normal.isEmpty()) {
                    planAnimation();
                    normal.setEmpty();
                    mLastY = 0;
                }
                break;
            case MotionEvent.ACTION_MOVE:
                float currentY = ev.getY();
                // 滑動距離
                int distanceY = (int) (mLastY - currentY);

                // 處理Y軸的捲動事件,當捲動到最上或者最下時需要移動佈局
                // 手指剛觸及螢幕時,也會觸發此事件,此時mLastY的值還是0,會立即觸發一個比較大的移動。這裡過濾掉這種情況
                if (isNeedTranslate() && mLastY != 0) {
                    if (normal.isEmpty()) {
                        // 儲存正常的佈局位置
                        normal.set(innerView.getLeft(), innerView.getTop(), innerView.getRight(), innerView.getBottom());
                    }
                    // 移動佈局, 使distance / 2 防止平移過快
                    innerView.layout(innerView.getLeft(), innerView.getTop() - distanceY / 2,
                            innerView.getRight(), innerView.getBottom() - distanceY / 2);
                }
                mLastY = currentY;
                break;
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 回縮動畫
     */
    public void planAnimation() {
        // 開啟移動動畫
        TranslateAnimation animation = new TranslateAnimation(0, 0, innerView.getTop(), normal.top);
        animation.setDuration(200);
        innerView.startAnimation(animation);
        // 補間動畫並不會真正修改innerView的位置,這裡需要設定使得innerView回到正常的佈局位置
        innerView.layout(normal.left, normal.top, normal.right, normal.bottom);
    }

    /**
     * 是否需要Y移動佈局
     */
    public boolean isNeedTranslate() {
        int offset = innerView.getMeasuredHeight() - getHeight();
        int scrollY = getScrollY();
        // 頂部或者底部
        return scrollY == 0 || scrollY == offset;
    }
}

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


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