Android彈性滑動的三種實現方式

引言

　　上一篇文章我們介紹了實現彈性滑動的三種方式，但僅僅是給出了代碼片段和方法理論。今天我們結合一個具體的例子來談一下如何使用這三種方法來實現彈性滑動。今天我們的例子是仿IOS的下拉操作，我們知道Android系統ListView之類的控件的是不存在下拉操作的，IOS系統大多數界面都可以下拉，然后緩緩恢復，今天我們的例子就是簡單的仿IOS的這種效果。

一些准備工作

　　我們自定義了一個View，讓一個LinearLayout填充這個View，模擬占滿全屏的效果。XML代碼如下：

<com.research.gong.android_view_research.view.PullView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="1000dp"
            android:orientation="vertical"
            android:background="#4097e6"
            android:id="@+id/main">

        </LinearLayout>

</com.research.gong.android_view_research.view.PullView>

Scroller實現彈性滑動

　　我們想實現彈性滑動，第一步需要實現的就是View需要能夠跟隨手指滑動，這當然讓我們想到了OnTouchEvent來檢測用戶的觸摸事件。先看核心代碼：

@Override
    public boolean onTouchEvent(MotionEvent event) {
        int y=(int)event.getY();
        switch (event.getAction()){
            //手指按下時,初始化按下位置的X,Y位置值
            case MotionEvent.ACTION_DOWN:
                mLastY=y;
                break;
            //計算滑動的偏移量,產生滑動效果
            case MotionEvent.ACTION_MOVE:
                //手指向下滑動delayY>0，向上滑動delayY<0
                int delayY=y-mLastY;
                delayY=delayY*-1;
                scrollBy(0,delayY);
                break;
            case MotionEvent.ACTION_UP:
                /**
                 * scrollY是指:View的上邊緣和View內容的上邊緣(其實就是第一個ChildView的上邊緣)的距離
                 * scrollY=上邊緣-View內容上邊緣，scrollTo/By方法滑動的知識View的內容
                 * 往下滑動scrollY是負值
                 */
                int scrollY=getScrollY();
                smoothScrollByScroller(scrollY);
                //smoothScrollByAnim(scrollY);
                //smoothScrollByHandler(scrollY);
                break;
        }
        mLastY=y;
        return true;
    }

　　在代碼中，我們看到當手指按下時，記錄按下的位置mLastY，然后我們在ACTION_MOVE事件中不斷的計算滑動的偏移量delayY然后使用scrollBy來實現View的滑動，這樣我們就可以實現View跟隨手指滑動而滑動。細心的朋友可能發現我手指向下滑動，delayY應該是正值，拿View向下滑動為什么需要將delayY*-1變成負數？這是因為Android系統是通過移動可視區域來實現改變View內容位置的，我們自覺上View向下滑動，對於可視區域來說是向上滑動，所以scrollBy需要使用負值，這樣感官上和我們向下滑動效果是一樣的，這一點需要注意。

　　下面我們開始分析手指放開的那一段代碼邏輯，看代碼的22-23行，我們先獲取mScrollY的值，這個值我們在上一篇文章中已經介紹過了，是指View的上邊緣和View內容上邊緣的距離，其實就是我們手指釋放的那一刻，滑動的總的大小。我們只需要將View緩緩划過這一段距離，就可以產生彈性滑動的效果。我們看下面的代碼如何處理：

    /**
     * 執行滑動效果
     * 使用scroller實現
     * @param dy
     */
    private void smoothScrollByScroller(int dy){
        mScroller.startScroll(0,dy,0,dy*-1,1000);
        invalidate();
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
        }
    }

　　我們從代碼中看到，我們使用了上一篇博客中的代碼范式，將需要滑動的距離dy作為參數進行傳遞，然后使用startScroll方法來實現滑動。這個方法在上一篇文章中已經介紹過。

使用動畫實現滑動

　　我們上一篇文章中還介紹了使用動畫來實現彈性滑動效果，現在我們給出代碼來看一下具體的實現思路：

/**
     * 使用動畫來實現
     * @param dy
     */
    private void smoothScrollByAnim(int dy){
        final float delayY=dy;
        ValueAnimator valueAnimator=ValueAnimator.ofInt(0,1).setDuration(1000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //計算動畫完成的百分比
                float percent=animation.getAnimatedFraction();
                float dy=(1.0f-percent)*delayY;
                scrollTo(0,(int)dy);
            }
        });
        valueAnimator.start();
    }

　　我們看到第一步也是記錄滑動的總的距離，然后使用動畫的addUpdateListener方法來監聽動畫的每一幀，然后根據執行動畫的百分比來計算現在需要滑動的位置，使用scrollTo方法滑動到指定的位置。dy計算出來都是負數並且越往后，越接近0，也就是可視區域逐漸往下滑動，這樣我們看起來就是View往上恢復。

使用Handler或者延時策略

　　下面我們介紹最后一種方法，使用延時策略來模擬Scroller。我們將1000毫秒分成50此執行，每一次延時20ms，然后在handler中根據執行的次數來計算完成的比例，然后修改View的位置實現滑動，代碼如下：

private int count;
    private int delayY;
    /**
     * 使用Handler來實現
     * @param dy
     */
    private void smoothScrollByHandler(int dy){
        delayY=dy;
        count=0;
        scrollHandler.sendEmptyMessageDelayed(0,20);
    }

    private Handler scrollHandler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what){
                case 0:
                    count++;
                    if(count<=50){
                        float percent=count/50.0f;
                        int scrollY=(int)(delayY*(1.0f-percent));
                        Log.d("scrollY:",String.valueOf(scrollY));
                        scrollTo(0,scrollY);
                        scrollHandler.sendEmptyMessageDelayed(0,20);
                    }
                    break;
                default:
                    break;
            }
        }
    };

　　我們看到代碼思路和使用動畫類似。

總結

　　上面3種實現彈性滑動的方法，我們建議還是優先選擇Scroller來實現，其他兩種方法指示提供類似的思路。下面我貼出詳細的代碼，供各位朋友實驗學習。詳細代碼如下:

package com.research.gong.android_view_research.view;

import android.animation.ValueAnimator;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;

/**
 * 模擬下拉組件
 */
public final class PullView extends ViewGroup {

    private int mLastY;
    private Context mContext;
    private Scroller mScroller;
    //子View的個數
    private int mChildCount;

    public PullView(Context context){
        this(context,null);
    }

    public PullView(Context context, AttributeSet attributeSet){
        super(context,attributeSet);
        mContext=context;
        initView();
    }

    private void initView(){
        mScroller=new Scroller(mContext);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int y=(int)event.getY();
        switch (event.getAction()){
            //手指按下時,初始化按下位置的X,Y位置值
            case MotionEvent.ACTION_DOWN:
                mLastY=y;
                break;
            //計算滑動的偏移量,產生滑動效果
            case MotionEvent.ACTION_MOVE:
                //手指向下滑動delayY>0，向上滑動delayY<0
                int delayY=y-mLastY;
                delayY=delayY*-1;
                scrollBy(0,delayY);
                break;
            case MotionEvent.ACTION_UP:
                /**
                 * scrollY是指:View的上邊緣和View內容的上邊緣(其實就是第一個ChildView的上邊緣)的距離
                 * scrollY=上邊緣-View內容上邊緣，scrollTo/By方法滑動的知識View的內容
                 * 往下滑動scrollY是負值
                 */
                int scrollY=getScrollY();
                //smoothScrollByScroller(scrollY);
                //smoothScrollByAnim(scrollY);
                smoothScrollByHandler(scrollY);
                break;
        }
        mLastY=y;
        return true;
    }

    /**
     * 執行滑動效果
     * 使用scroller實現
     * @param dy
     */
    private void smoothScrollByScroller(int dy){
        mScroller.startScroll(0,dy,0,dy*-1,1000);
        invalidate();
    }

    @Override
    public void computeScroll() {
        if (mScroller.computeScrollOffset()) {
            scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            postInvalidate();
        }
    }

    /**
     * 使用動畫來實現
     * @param dy
     */
    private void smoothScrollByAnim(int dy){
        final float delayY=dy;
        ValueAnimator valueAnimator=ValueAnimator.ofInt(0,1).setDuration(1000);
        valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator animation) {
                //計算動畫完成的百分比
                float percent=animation.getAnimatedFraction();
                float dy=(1.0f-percent)*delayY;
                scrollTo(0,(int)dy);
            }
        });
        valueAnimator.start();
    }

    private int count;
    private int delayY;
    /**
     * 使用Handler來實現
     * @param dy
     */
    private void smoothScrollByHandler(int dy){
        delayY=dy;
        count=0;
        scrollHandler.sendEmptyMessageDelayed(0,20);
    }

    private Handler scrollHandler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            switch (msg.what){
                case 0:
                    count++;
                    if(count<=50){
                        float percent=count/50.0f;
                        int scrollY=(int)(delayY*(1.0f-percent));
                        Log.d("scrollY:",String.valueOf(scrollY));
                        scrollTo(0,scrollY);
                        scrollHandler.sendEmptyMessageDelayed(0,20);
                    }
                    break;
                default:
                    break;
            }
        }
    };

    /**
     * 重新計算子View的高度和寬度
     * @param widthMeasureSpec
     * @param heightMeasureSpec
     */
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int measuredWidth;
        int measureHeight;
        mChildCount = getChildCount();
        //測量子View
        measureChildren(widthMeasureSpec, heightMeasureSpec);
        int widthSpaceSize = MeasureSpec.getSize(widthMeasureSpec);
        int widthSpaceMode = MeasureSpec.getMode(widthMeasureSpec);
        int heightSpaceSize = MeasureSpec.getSize(heightMeasureSpec);
        int heightSpaceMode = MeasureSpec.getMode(heightMeasureSpec);

        //獲取橫向的padding值
        int paddingLeft=getPaddingLeft();
        int paddingRight=getPaddingRight();
        final View childView = getChildAt(0);
        /**
         * 如果子View的數量是0,就讀取LayoutParams中數據
         * 否則就對子View進行測量
         * 此處主要是針對wrap_content這種模式進行處理，因為默認情況下
         * wrap_content等於match_parent
         */
        if (mChildCount == 0) {
            ViewGroup.LayoutParams layoutParams=getLayoutParams();
            if(layoutParams!=null){
                setMeasuredDimension(layoutParams.width,layoutParams.height);
            }else {
                setMeasuredDimension(0, 0);
            }
        } else if (heightSpaceMode == MeasureSpec.AT_MOST && widthSpaceMode == MeasureSpec.AT_MOST) {
            measuredWidth = childView.getMeasuredWidth() * mChildCount;
            measureHeight = getChildMaxHeight();
            //將兩側的padding值加上去
            measuredWidth=paddingLeft+measuredWidth+paddingRight;
            setMeasuredDimension(measuredWidth, measureHeight);
        } else if (heightSpaceMode == MeasureSpec.AT_MOST) {
            measureHeight = getChildMaxHeight();
            setMeasuredDimension(widthSpaceSize, measureHeight);
        } else if (widthSpaceMode == MeasureSpec.AT_MOST) {
            measuredWidth = childView.getMeasuredWidth() * mChildCount;
            measuredWidth=paddingLeft+measuredWidth+paddingRight;
            setMeasuredDimension(measuredWidth, heightSpaceSize);
        }
    }


    /**
     * 獲取子View中最大高度
     * @return
     */
    private int getChildMaxHeight(){
        int maxHeight=0;
        for (int i = 0; i < mChildCount; i++) {
            View childView = getChildAt(i);
            if (childView.getVisibility() != View.GONE) {
                int height = childView.getMeasuredHeight();
                if(height>maxHeight){
                    maxHeight=height;
                }
            }
        }
        return maxHeight;
    }


    /**
     * 設置子View的布局
     * @param changed
     * @param l
     * @param t
     * @param r
     * @param b
     */
    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childLeft = 0;
        for (int i = 0; i < mChildCount; i++) {
            View childView = getChildAt(i);
            if (childView.getVisibility() != View.GONE) {
                int childWidth = childView.getMeasuredWidth();
                childView.layout(childLeft, 0, childLeft + childWidth, childView.getMeasuredHeight());
                childLeft += childWidth;
            }
        }
    }
}