Android Scroll分析

Android Scroll分析

1.滑動(dòng)原理

滑動(dòng)一個(gè)View，本質(zhì)上就是移動(dòng)一個(gè)View，通過(guò)不斷改變View的坐標(biāo)來(lái)實(shí)現(xiàn)。
一般監(jiān)聽(tīng)用戶觸摸事件，根據(jù)傳入坐標(biāo)，動(dòng)態(tài)且不斷的改變View的坐標(biāo)，實(shí)現(xiàn)滑動(dòng)。

2.Android坐標(biāo)系

Android坐標(biāo)系描述的是手機(jī)屏幕的位置

(0,0)
.-----------------------------? X軸
|
|
|
|
|
|
|
|
|       Android手機(jī)屏幕
|
|
|
|
|
|
▼
Y軸
  • 以屏幕左上角為原點(diǎn)(0,0)向右為X軸正方向，向下為Y軸正方向。
  • 系統(tǒng)提供getLocationOnScreen(int[] location)方法獲取View的左上角點(diǎn)在Android坐標(biāo)系中的坐標(biāo)
  • 在觸摸事件中g(shù)etRawX(),getRawY()獲取的也是Android坐標(biāo)系中的坐標(biāo)
3.視圖坐標(biāo)系

視圖坐標(biāo)系描述的是子View在父View中的位置關(guān)系

(0,0)
.-----------------------------? X軸
|
|
|       Android手機(jī)屏幕
|       (0,0)
|       .-----------? X軸
|       |
|       |   父View
|       |  
|       |   --------
|       |   | View |
|       |   --------
|       ▼
|       Y軸
|
|
|
▼
Y軸
  • 原點(diǎn)是父View的左上角
  • 在觸摸事件中g(shù)etX(),getY()獲取的就是視圖坐標(biāo)系中的坐標(biāo)
4.觸摸事件--MotionEvent
  1. 事件常量
 ACTION_DOWN = 0    單點(diǎn)觸摸按下動(dòng)作
 ACTION_UP = 1      單點(diǎn)觸摸離開(kāi)動(dòng)作
 ACTION_MOVE = 2    觸摸點(diǎn)移動(dòng)動(dòng)作
 ACTION_CANCEL = 3  觸摸動(dòng)作取消
 ACTION_OUTSIDE = 4 觸摸動(dòng)作超出邊界
 ACTION_POINTER_DOWN = 5    多點(diǎn)觸摸按下
 ACTION_POINTER_UP = 6      多點(diǎn)觸摸離開(kāi)
  1. 通常會(huì)在onTouchEvent(MotionEvent event)函數(shù)中調(diào)用event.getAction獲取事件類型
  2. 通過(guò)event.getX()、event.getY()來(lái)獲取觸摸點(diǎn)在視圖坐標(biāo)的位置
  3. 通過(guò)event.getRawX()、event.getRawY()來(lái)獲取觸摸點(diǎn)Android坐標(biāo)系的位置
5.實(shí)現(xiàn)滑動(dòng)的方法

假設(shè)我們現(xiàn)在有這樣一個(gè)布局


ViewGroup -- View

我們要實(shí)現(xiàn)View的滑動(dòng)，有以下幾個(gè)方法

  1. 在View中通過(guò)layout方法重新設(shè)置坐標(biāo)
    • View在進(jìn)行繪制之前會(huì)調(diào)用onLayout方法來(lái)設(shè)置在ViewGroup中的位置
    • 同理通過(guò)layout方法修改View的left、top、right、bottom屬性來(lái)控制View在ViewGroup中位置
    private int lastX, lastY;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int rawX = (int) event.getRawX();
        int rawY = (int) event.getRawY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = rawX;
                lastY = rawY;
                break;
            case MotionEvent.ACTION_MOVE:
                int offsetX = rawX - lastX;
                int offsetY = rawY - lastY;
                layout(getLeft() + offsetX,
                        getTop() + offsetY,
                        getRight() + offsetX,
                        getBottom() + offsetY);
                lastX = rawX;
                lastY = rawY;
                break;
        }
        return true;
    }
  1. 在View中通過(guò)offsetLeftAndRight、offsetTopAndBottom方法進(jìn)行移動(dòng)
    • 這2個(gè)方法相當(dāng)于系統(tǒng)提供對(duì)左右、上下移動(dòng)的API封裝
    private int lastX, lastY;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int rawX = (int) event.getRawX();
        int rawY = (int) event.getRawY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = rawX;
                lastY = rawY;
                break;
            case MotionEvent.ACTION_MOVE:
                int offsetX = rawX - lastX;
                int offsetY = rawY - lastY;
                offsetLeftAndRight(offsetX);
                offsetTopAndBottom(offsetY);
                lastX = rawX;
                lastY = rawY;
                break;
        }
        return true;
    }
  1. 在View中通過(guò)改變LayoutParams進(jìn)行移動(dòng)
    • LayoutParams保存了一個(gè)View的布局參數(shù)
    • 通過(guò)動(dòng)態(tài)修改margin值來(lái)進(jìn)行移動(dòng)
    • 當(dāng)然，這個(gè)方法只有View在對(duì)margin有處理的ViewGroup下有效
    private int lastX, lastY;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int rawX = (int) event.getRawX();
        int rawY = (int) event.getRawY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = rawX;
                lastY = rawY;
                break;
            case MotionEvent.ACTION_MOVE:
                int offsetX = rawX - lastX;
                int offsetY = rawY - lastY;
                if (getLayoutParams() instanceof ViewGroup.MarginLayoutParams) {
                    Log.i(TAG, "onTouchEvent: ACTION_MOVE isMarginLayoutParams = true");
                    ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) getLayoutParams();
                    layoutParams.leftMargin = getLeft() + offsetX;
                    layoutParams.topMargin = getTop() + offsetY;
                    setLayoutParams(layoutParams);
                }
                lastX = rawX;
                lastY = rawY;
                break;
        }
        return true;
    }
  1. 在ViewGroup中通過(guò)scrollTo、scrollBy方法進(jìn)行滑動(dòng)
    • scrollTo(x,y)表示移動(dòng)到點(diǎn)坐標(biāo)(x,y)
    • scrollBy(offsetX,offsetY)表示當(dāng)前坐標(biāo)偏移offsetX,offsetY
    • 移動(dòng)的是ViewGroup中的所有子View
    • 注意！移動(dòng)的是Android坐標(biāo)系，并不是View的坐標(biāo)
    private int lastX, lastY;

   @Override
   public boolean onTouchEvent(MotionEvent event) {
       int rawX = (int) event.getRawX();
       int rawY = (int) event.getRawY();
       switch (event.getAction()) {
           case MotionEvent.ACTION_DOWN:
               lastX = rawX;
               lastY = rawY;
               break;
           case MotionEvent.ACTION_MOVE:
               int offsetX = rawX - lastX;
               int offsetY = rawY - lastY;
               View parent = (View) getParent();
               //與之前不同，offsetX和offsetY取負(fù)值
               //因?yàn)橹暗囊苿?dòng)都是改變View在Android坐標(biāo)系中的坐標(biāo)（相當(dāng)于View在坐標(biāo)系中移動(dòng)了）
               //而scrollTo、scrollBy改變的Android坐標(biāo)系原點(diǎn)的坐標(biāo)（相當(dāng)于坐標(biāo)系移動(dòng)了，所以要取負(fù)值）
               parent.scrollBy(-offsetX, -offsetY);
               lastX = rawX;
               lastY = rawY;
               break;
       return true;
   }
  1. 擴(kuò)展：Scroller類
    • 實(shí)現(xiàn)效果：View滑動(dòng)后，自動(dòng)平滑的回到初始位置
    • 上面方法1-->方法4的滑動(dòng)都是瞬間完成的
    • Scroller類模擬滑動(dòng)效果，使得滑動(dòng)不那么突兀
    /**
     * Step1: 初始化Scroller類
     *
     * @param context
     */
    private void initScroller(Context context) {
        mScroller = new Scroller(context);
    }

    private int lastX, lastY;

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int rawX = (int) event.getRawX();
        int rawY = (int) event.getRawY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                lastX = rawX;
                lastY = rawY;
                break;
            case MotionEvent.ACTION_MOVE: {
                int offsetX = rawX - lastX;
                int offsetY = rawY - lastY;
                View parent = (View) getParent();
                //與之前不同，offsetX和offsetY取負(fù)值
                //因?yàn)橹暗囊苿?dòng)都是改變View在Android坐標(biāo)系中的坐標(biāo)（相當(dāng)于View在坐標(biāo)系中移動(dòng)了）
                //而scrollTo、scrollBy改變的Android坐標(biāo)系原點(diǎn)的坐標(biāo)（相當(dāng)于坐標(biāo)系移動(dòng)了，所以要取負(fù)值）
                parent.scrollBy(-offsetX, -offsetY);
                lastX = rawX;
                lastY = rawY;
                break;
            }
            case MotionEvent.ACTION_UP: {
                View parent = (View) getParent();
                //Step3: 開(kāi)始模擬滑動(dòng)過(guò)程
                mScroller.startScroll(parent.getScrollX(),
                        parent.getScrollY(),
                        -parent.getScrollX(),
                        -parent.getScrollY());
                invalidate();
                break;
            }
        }
        return true;
    }

    /**
     * Step2: 重寫(xiě)computeScroll方法，實(shí)現(xiàn)模擬滑動(dòng)
     */
    @Override
    public void computeScroll() {
        super.computeScroll();
        //computeScrollOffset判斷滑動(dòng)動(dòng)畫(huà)是否執(zhí)行完畢，true 代表動(dòng)畫(huà)進(jìn)行中，false 代表動(dòng)畫(huà)結(jié)束了
        if (mScroller.computeScrollOffset()) {
            View parent = (View) getParent();
            parent.scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            // 通過(guò)重繪函數(shù)，不斷調(diào)用computeScroll實(shí)現(xiàn)滑動(dòng)效果
            invalidate();
        }
    }
  1. 屬性動(dòng)畫(huà)
    • 待續(xù)....
  2. ViewDragHelper
    • support v4包中的一個(gè)輔助類，用于在父視圖中拖動(dòng)視圖
    • ViewDragHelper要寫(xiě)在ViewGroup里面，因?yàn)橐貙?xiě)onTouchEvent、onInterceptTouchEvent方法
public class DragViewGroup extends FrameLayout {

    public static final String TAG = DragViewGroup.class.getSimpleName();

    private ViewDragHelper mViewDragHelper;

    public DragViewGroup(@NonNull Context context) {
        super(context);
        initViewDragHelper();
    }

    public DragViewGroup(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initViewDragHelper();
    }

    public DragViewGroup(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initViewDragHelper();
    }

    private void initViewDragHelper() {
        mViewDragHelper = ViewDragHelper.create(this, new ViewDragHelper.Callback() {

            /**
             * ACTION_DOWN事件發(fā)生在 child 時(shí)候回調(diào)
             * 返回值決定了是否需要捕獲這個(gè) child
             * 只有返回值等于true (即捕獲了child) 才能回調(diào)下面其他函數(shù)
             */
            @Override
            public boolean tryCaptureView(@NonNull View child, int pointerId) {
                Log.i(TAG, "tryCaptureView: ");
                return true;
            }

            int initX, initY;

            /**
             * 捕獲到 child 時(shí)候回調(diào),這里記錄下捕獲到時(shí)候的坐標(biāo)
             */
            @Override
            public void onViewCaptured(@NonNull View capturedChild, int activePointerId) {
                Log.i(TAG, "onViewCaptured: ");
                initX = capturedChild.getLeft();
                initY = capturedChild.getTop();
            }

            /**
             * ACTION_UP事件發(fā)生時(shí)候回調(diào)
             * 釋放捕獲的child
             */
            @Override
            public void onViewReleased(@NonNull View releasedChild, float xvel, float yvel) {
                Log.i(TAG, "onViewReleased: ");
                //設(shè)置view回到初始位置，啟動(dòng)動(dòng)畫(huà)
                //動(dòng)畫(huà)執(zhí)行過(guò)程需要重寫(xiě)computeScroll方法,原理即Scroller類
                mViewDragHelper.settleCapturedViewAt(initX, initY);
                invalidate();
            }

            /**
             * 修整 child 水平方向上的坐標(biāo)，left 指 child 要移動(dòng)到的坐標(biāo)，dx 相對(duì)上次的偏移量
             * 注意！只有被捕獲到的child才會(huì)觸發(fā)
             */
            @Override
            public int clampViewPositionHorizontal(@NonNull View child, int left, int dx) {
                Log.i(TAG, "clampViewPositionHorizontal: ");
                return left;
            }

            /**
             * 修整 child 垂直方向上的坐標(biāo)，top 指 child 要移動(dòng)到的坐標(biāo)，dy 相對(duì)上次的偏移量
             * 注意！只有被捕獲到的child才會(huì)觸發(fā)
             */
            @Override
            public int clampViewPositionVertical(@NonNull View child, int top, int dy) {
                Log.i(TAG, "clampViewPositionVertical: ");
                return top;
            }

            /**
             * 邊緣被觸摸時(shí)候回調(diào)
             */
            @Override
            public void onEdgeTouched(int edgeFlags, int pointerId) {
                Log.i(TAG, "onEdgeTouched: ");
            }

            /**
             * 邊緣拖拽開(kāi)始時(shí)候回調(diào)
             */
            @Override
            public void onEdgeDragStarted(int edgeFlags, int pointerId) {
                Log.i(TAG, "onEdgeDragStarted: ");
                //手動(dòng)捕獲邊緣拖拽事件要觸發(fā)滑動(dòng)的view
                mViewDragHelper.captureChildView(getChildAt(0), pointerId);
            }

        });
        //設(shè)置被捕獲的child view的共同邊緣會(huì)觸發(fā)回調(diào)邊緣拖拽函數(shù)
        mViewDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT | ViewDragHelper.EDGE_TOP | ViewDragHelper.EDGE_RIGHT | ViewDragHelper.EDGE_BOTTOM);
    }

    /**
     * 重寫(xiě)onInterceptTouchEvent方法
     * 委托給ViewDragHelper進(jìn)行事件攔截操作，只有攔截到了才能進(jìn)行拖拽功能
     */
    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        boolean result = mViewDragHelper.shouldInterceptTouchEvent(ev);
        Log.i(TAG, "onInterceptTouchEvent: result=" + result);
        return result;
    }

    /**
     * 重寫(xiě)onTouchEvent方法
     * 讓ViewDragHelper處理觸摸事件
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                Log.i(TAG, "onTouchEvent: ACTION_DOWN");
                break;
            case MotionEvent.ACTION_MOVE:
                Log.i(TAG, "onTouchEvent: ACTION_MOVE");
                break;
            case MotionEvent.ACTION_UP:
                Log.i(TAG, "onTouchEvent: ACTION_UP");
                break;
        }
        mViewDragHelper.processTouchEvent(event);
        return true;
    }

    /**
     * 重寫(xiě)computeScroll方法
     */
    @Override
    public void computeScroll() {
        super.computeScroll();
        Log.i(TAG, "computeScroll: " + mViewDragHelper.continueSettling(true));
        if (mViewDragHelper.continueSettling(true)) {
            invalidate();
        }
    }
}
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 178,825評(píng)論 25贊 709
  • Android 群英傳筆記第一章Android體系與系統(tǒng)架構(gòu)第二章 Android開(kāi)發(fā)工具及技巧第三章 Andro...
    YoungerDev閱讀 496評(píng)論 0贊 5
  • 1、懷著些許的忐忑，雨軒回到了旅館。他掏出身上僅有的60元錢(qián)，看得入了神。他在心里想：如果再找不到工作，就要喝西北...
    聽(tīng)雨軒0755閱讀 494評(píng)論 0贊 1
  • 2018年12月21日 星期日 多云 禮拜天上班中,倆寶在家跟寶爸。下班回來(lái),一進(jìn)車(chē)庫(kù)就聞到一股香味,后...
    云哲云燦媽媽閱讀 221評(píng)論 0贊 0
  • M有如果閱讀 399評(píng)論 13贊 25

友情鏈接更多精彩內(nèi)容