android中橡皮筋回彈效果的實現

來自： http://www.jcodecraeer.com//a/anzhuokaifa/androidkaifa/2014/0312/1590.html

ios中對可以滾動的視圖都在系統層面上實現了觸碰到邊緣的阻尼回彈效果，用戶一看便知自己的操作已經到了邊界。android中也有類似的方案，不過當到達邊界的時候不是用阻尼的方式，而是逐漸顯示一個漸變顏色。ios的那種體驗無疑會友好很多，也許是當初ios吵著要把這個設計申請專利的緣故吧，android不得不放棄橡皮筋效果，至少在系統層面。

但這不意味著安卓中無法實現和ios一樣的效果，這里介紹兩種實現的方法。

第一種簡單，但是效果不如意，而且必須要在api level大于9的情況下使用：

比如我是要給listview加上阻尼回彈效果，那么只需如下重寫listview：

package com.thinkfeed.bouncelistview;
import android.content.Context;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.widget.ListView;
public class BounceListView extends ListView{
    private static final int MAX_Y_OVERSCROLL_DISTANCE = 200;
    private static final float SCROLL_RATIO = 0.5f;// 阻尼系數  
    private Context mContext;
    private int mMaxYOverscrollDistance;

    public BounceListView(Context context){
        super(context);
        mContext = context;
        initBounceListView();
    }

    public BounceListView(Context context, AttributeSet attrs){
        super(context, attrs);
        mContext = context;
        initBounceListView();
    }

    public BounceListView(Context context, AttributeSet attrs, int defStyle){
        super(context, attrs, defStyle);
        mContext = context;
        initBounceListView();
    }

    private void initBounceListView(){
        //get the density of the screen and do some maths with it on the max overscroll distance
        //variable so that you get similar behaviors no matter what the screen size

        final DisplayMetrics metrics = mContext.getResources().getDisplayMetrics();
            final float density = metrics.density;

        mMaxYOverscrollDistance = (int) (density * MAX_Y_OVERSCROLL_DISTANCE);
    }

    @Override
    protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent){
        //This is where the magic happens, we have replaced the incoming maxOverScrollY with our own custom variable mMaxYOverscrollDistance;

        int newDeltaY = deltaY;
        int delta = (int) (deltaY * SCROLL_RATIO);
        if (delta != 0) newDeltaY = delta;
        return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, mMaxYOverscrollDistance, isTouchEvent);
    }

}

其中deltaX,deltaY為本次滑動偏移，scrollX，scrollY為當前總偏移，為了達到阻尼效果，我們增加了阻尼系數SCROLL_RATIO。

但是這個方法受限于api 而且效果并不是很好。

在github上看到有人完全重寫了ScrollView將橡皮筋效果完美的移植在其中。

項目地址：https://github.com/EverythingMe/OverScrollView

用法和ScrollView一模一樣，因為其實就是將系統的ScrollView修改而來。

<me.everything.android.widget.OverScrollView
       android:id="@+id/OverScroller"
       android:layout_width="match_parent"
       android:layout_height="match_parent" >
    <.../>
</me.everything.android.widget.OverScrollView>

這個OverScrollView需要稍作修改才能用，不然在第一次加載的時候顯示不出來。

將原來的onLayout方法替換成下面的代碼：

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b)
{
    super.onLayout(changed, l, t, r, b);
    mIsLayoutDirty = false;
    // Give a child focus if it needs it
    if (mChildToScrollTo != null && isViewDescendantOf(mChildToScrollTo, this))
    {
        scrollToChild(mChildToScrollTo);
    }
    mChildToScrollTo = null;
    // Calling this with the present values causes it to re-clam them
    scrollTo(getScrollX(), getScrollY());
    post(new Runnable()
    {
        public void run()
        {
            scrollTo(0, child.getPaddingTop());
        }
    });    
}