如何過度滾動自定義視圖（surfaceview）

Question

我有一個由工作線程管理的自定義SurfaceView。 我使用的代碼非常類似於以下博客文章中的代碼來管理SurfaceView：

http://android-coding.blogspot.com/2011/05/drawing-on-surfaceview.html

我的自定義SurfaceView是可滾動的，因為我會監聽觸摸事件，將它們發送到手勢檢測器，並實現onScroll。 我會跟蹤某些成員變量（x軸和y軸）中的滾動距離，並在繪制到畫布時將任何坐標轉換為適當的量。 我還可以夾緊滾動距離，並且可以在夾緊時輕松計算和存儲任何過量滾動量。

一切正常。

問題是我想在我的自定義SurfaceView上顯示標准的Android過度滾動效果。 我嘗試手動調用overScrollBy但它沒有工作，我最好的猜測是因為我從工作線程中繪制視圖，這意味着視圖的onDraw永遠不會被調用。

我發現以下有關自定義過卷效果的stackoverflow帖子：

如何在Android 2.3.1中更改OverScroll顏色？

該帖子不適用於SurfaceViews，但我可能會調整代碼。 那說，還有更好的方法嗎？ 我想展示其他地方顯示的完全相同的過度滾動效果。 復制過度滾動繪圖並嘗試復制過度滾動邏輯似乎......很難看。

Answer 1

好吧，我設法通過使用OverScroller在簡單的View中匯總了一個簡單的過度滾動示例：

package net.project.experimental;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.widget.OverScroller;

public class WorksheetView extends View
{
    protected static final int  OVERSCROLL_DISTANCE = 10;
    protected static final int  INVALID_POINTER_ID  = -1;

    private int                 fWorksheetWidth     = 2000;
    private int                 fWorksheetHeight    = 2000;

    private OverScroller        fScroller;
    private VelocityTracker     fVelocityTracker    = null;
    private int                 fMinimumVelocity;

    // The ‘active pointer’ is the one currently moving our object.
    private int                 fTranslatePointerId = INVALID_POINTER_ID;
    private PointF              fTranslateLastTouch = new PointF( );

    private boolean             fInteracting        = false;

    public WorksheetView(Context context, AttributeSet attrs)
    {
        super( context, attrs );
        this.initView( context, attrs );
    }

    public WorksheetView(Context context, AttributeSet attrs, int defStyle)
    {
        super( context, attrs, defStyle );
        this.initView( context, attrs );
    }

    protected void initView(Context context, AttributeSet attrs)
    {
        fScroller = new OverScroller( this.getContext( ) );

        this.setOverScrollMode( OVER_SCROLL_ALWAYS );

        final ViewConfiguration configuration = ViewConfiguration.get( getContext( ) );
        //fTouchSlop = configuration.getScaledTouchSlop( );
        fMinimumVelocity = configuration.getScaledMinimumFlingVelocity( );
    }

    @Override
    public boolean onTouchEvent(MotionEvent event)
    {
        if ( fVelocityTracker == null )
        {
            fVelocityTracker = VelocityTracker.obtain( );
        }
        fVelocityTracker.addMovement( event );

        final int action = event.getAction( );
        switch ( action & MotionEvent.ACTION_MASK )
        {
            case MotionEvent.ACTION_DOWN:
            {
                if ( !fScroller.isFinished( ) )
                    fScroller.abortAnimation( );

                final float x = event.getX( );
                final float y = event.getY( );

                fTranslateLastTouch.set( x, y );
                fTranslatePointerId = event.getPointerId( 0 );
                this.startInteracting( );
                break;
            }

            case MotionEvent.ACTION_MOVE:
            {
                final int pointerIndexTranslate = event.findPointerIndex( fTranslatePointerId );
                if ( pointerIndexTranslate >= 0 )
                {
                    float translateX = event.getX( pointerIndexTranslate );
                    float translateY = event.getY( pointerIndexTranslate );

                    this.overScrollBy(
                            (int) (fTranslateLastTouch.x - translateX),
                            (int) (fTranslateLastTouch.y - translateY),
                            this.getScrollX( ),
                            this.getScrollY( ),
                            fWorksheetWidth - this.getWidth( ),
                            fWorksheetHeight - this.getHeight( ),
                            OVERSCROLL_DISTANCE,
                            OVERSCROLL_DISTANCE,
                            true );

                    fTranslateLastTouch.set( translateX, translateY );

                    this.invalidate( );
                }

                break;
            }

            case MotionEvent.ACTION_UP:
            {
                final VelocityTracker velocityTracker = fVelocityTracker;
                velocityTracker.computeCurrentVelocity( 1000 );
                //velocityTracker.computeCurrentVelocity(1000, mMaximumVelocity);
                int initialXVelocity = (int) velocityTracker.getXVelocity( );
                int initialYVelocity = (int) velocityTracker.getYVelocity( );

                if ( (Math.abs( initialXVelocity ) + Math.abs( initialYVelocity ) > fMinimumVelocity) )
                {
                    this.fling( -initialXVelocity, -initialYVelocity );
                }
                else
                {
                    if ( fScroller.springBack( this.getScrollX( ), this.getScrollY( ), 0, fWorksheetWidth - this.getWidth( ), 0, fWorksheetHeight - this.getHeight( ) ) )
                        this.invalidate( );

                    this.stopInteracting( );
                }

                if ( fVelocityTracker != null )
                {
                    fVelocityTracker.recycle( );
                    fVelocityTracker = null;
                }


                fTranslatePointerId = INVALID_POINTER_ID;
                break;
            }

            case MotionEvent.ACTION_POINTER_DOWN:
            {
                break;
            }

            case MotionEvent.ACTION_POINTER_UP:
            {
                final int pointerIndex = (event.getAction( ) & MotionEvent.ACTION_POINTER_INDEX_MASK) >> MotionEvent.ACTION_POINTER_INDEX_SHIFT;
                final int pointerId = event.getPointerId( pointerIndex );
                if ( pointerId == fTranslatePointerId )
                {
                    // This was our active pointer going up. Choose a new
                    // active pointer and adjust accordingly.
                    final int newPointerIndex = pointerIndex == 0 ? 1 : 0;
                    fTranslateLastTouch.set( event.getX( newPointerIndex ), event.getY( newPointerIndex ) );
                    fTranslatePointerId = event.getPointerId( newPointerIndex );
                }

                break;
            }

            case MotionEvent.ACTION_CANCEL:
            {
                if ( fScroller.springBack( this.getScrollX( ), this.getScrollY( ), 0, fWorksheetWidth - this.getWidth( ), 0, fWorksheetHeight - this.getHeight( ) ) )
                    this.invalidate( );

                fTranslatePointerId = INVALID_POINTER_ID;
                break;
            }
        }

        return true;
    }

    private void fling(int velocityX, int velocityY)
    {
        int x = this.getScrollX( );
        int y = this.getScrollY( );

        this.startInteracting( );
        //fScroller.setFriction( ViewConfiguration.getScrollFriction( ) );
        fScroller.fling( x, y, velocityX, velocityY, 0, fWorksheetWidth - this.getWidth( ), 0, fWorksheetHeight - this.getHeight( ) );

        this.invalidate( );
    }

    private void startInteracting()
    {
        fInteracting = true;
    }

    private void stopInteracting()
    {
        fInteracting = false;
    }

    @Override
    public void computeScroll()
    {
        if ( fScroller != null && fScroller.computeScrollOffset( ) )
        {
            int oldX = this.getScrollX( );
            int oldY = this.getScrollY( );
            int x = fScroller.getCurrX( );
            int y = fScroller.getCurrY( );

            if ( oldX != x || oldY != y )
            {
                this.overScrollBy(
                        x - oldX,
                        y - oldY,
                        oldX,
                        oldY,
                        fWorksheetWidth - this.getWidth( ),
                        fWorksheetHeight - this.getHeight( ),
                        OVERSCROLL_DISTANCE,
                        OVERSCROLL_DISTANCE,
                        false );
            }

            if ( fScroller.isFinished( ) )
                this.stopInteracting( );

            this.postInvalidate( );
        }
    }

    @Override
    protected void onOverScrolled(int scrollX, int scrollY, boolean clampedX, boolean clampedY)
    {
        // Treat animating scrolls differently; see #computeScroll() for why.
        if ( !fScroller.isFinished( ) )
        {
            super.scrollTo( scrollX, scrollY );

            if ( clampedX || clampedY )
            {
                fScroller.springBack( this.getScrollX( ), this.getScrollY( ), 0, fWorksheetWidth - this.getWidth( ), 0, fWorksheetHeight - this.getHeight( ) );
            }
        }
        else
        {
            super.scrollTo( scrollX, scrollY );
        }
        awakenScrollBars( );
    }

    @Override
    protected int computeHorizontalScrollExtent()
    {
        return this.getWidth( );
    }

    @Override
    protected int computeHorizontalScrollRange()
    {
        return fWorksheetWidth;
    }

    @Override
    protected int computeHorizontalScrollOffset()
    {
        return this.getScrollX( );
    }

    @Override
    protected int computeVerticalScrollExtent()
    {
        return this.getHeight( );
    }

    @Override
    protected int computeVerticalScrollRange()
    {
        return fWorksheetHeight;
    }

    @Override
    protected int computeVerticalScrollOffset()
    {
        return this.getScrollY( );
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.drawColor( Color.BLACK );

        Paint paint = new Paint( );

        if ( fInteracting )
            ;

        paint.setColor( Color.WHITE );
        canvas.drawRect( 0, 0, fWorksheetWidth, fWorksheetHeight, paint );

        paint.setColor( Color.RED );
        for (int i = 0; i < 1500; i += 10)
        {
            canvas.drawLine( i, 0, i + 100, 500, paint );
        }

        canvas.drawRect( fWorksheetWidth - 50, 0, fWorksheetWidth, fWorksheetHeight, paint );
        canvas.drawRect( 0, fWorksheetHeight - 50, fWorksheetWidth, fWorksheetHeight, paint );
    }
}

Answer 2

好的，要真正回答Android風格過度滾動的問題。 您可以比我的上一個答案（代碼）更進一步使用OverScroller通過繪圖實現過度滾動后，您可以限制頁面移動，因此頁面不會過度滾動。 相反，您可以為Android風格的過度滾動繪制資源 - 這就是您所謂的'手動'。

請參閱下面的示例，該示例是我昨天發布的代碼的補充。 現在，'onDraw'不會讓頁面在視覺上過度滾動。 然后'displatchDraw'將繪制一個可繪制的資源來表示Android風格的過度滾動。

注意，我是一個記憶狂，所以我在所有四個角上使用相同的資源，並在畫布上渲染時通過矩陣手動旋轉它。

    private void compensateForOverscroll(Canvas canvas)
    {
        int x = this.getScrollX( );
        int y = this.getScrollY( );

        Matrix matrix = canvas.getMatrix( );

        int maxX = fWorksheetWidth - this.getWidth( );
        int maxY = fWorksheetHeight - this.getHeight( );

        if ( x < 0 || x > maxX || y < 0 || y > maxY )
        {
            if ( x < 0 )
                matrix.postTranslate( x, 0 );
            else if ( x > maxX )
                matrix.postTranslate( (x - maxX), 0 );

            if ( y < 0 )
                matrix.postTranslate( 0, y );
            else if ( y > maxY )
                matrix.postTranslate( 0, (y - maxY) );

            canvas.setMatrix( matrix );
        }
    }

    @Override
    protected void dispatchDraw(Canvas canvas)
    {
        int width = this.getWidth( );
        int height = this.getHeight( );
        int maxX = fWorksheetWidth - width;
        int maxY = fWorksheetHeight - height;

        int x = this.getScrollX( );
        int y = this.getScrollY( );


        if ( x < 0 || x > maxX )
        {
            canvas.save( );
            Matrix canvasMatrix = canvas.getMatrix( );

            if ( x < 0 )
            {
                fOverScrollDrawable.setBounds( 0, x, height, x - x );
                canvasMatrix.preRotate( -90 );
                canvasMatrix.preTranslate( - y - height, 0 );
            }
            else if ( x > maxX )
            {
                fOverScrollDrawable.setBounds( 0, maxX, height, x );
                canvasMatrix.preRotate( 90 );
                canvasMatrix.preTranslate( y, - x - fWorksheetWidth );
            }

            canvas.setMatrix( canvasMatrix );
            fOverScrollDrawable.draw( canvas );

            canvas.restore( );
        }

        if ( y < 0 || y > maxY )
        {
            canvas.save( );
            Matrix canvasMatrix = canvas.getMatrix( );

            if ( y < 0 )
            {
                fOverScrollDrawable.setBounds( x, y, x + width, y - y );
            }
            else if ( y > maxY )
            {
                fOverScrollDrawable.setBounds( 0, maxY, width, y );
                canvasMatrix.preRotate( 180 );
                canvasMatrix.preTranslate( - x - width, - y - fWorksheetHeight );
            }

            canvas.setMatrix( canvasMatrix );
            fOverScrollDrawable.draw( canvas );

            canvas.restore( );
        }
    }

    @Override
    protected void onDraw(Canvas canvas)
    {
        canvas.save( );

        this.compensateForOverscroll( canvas );

        canvas.drawColor( Color.BLACK );        

        Paint paint = new Paint( );

        if ( fInteracting )
            ;

        paint.setColor( Color.WHITE );
        canvas.drawRect( 0, 0, fWorksheetWidth, fWorksheetHeight, paint );

        paint.setColor( Color.RED );
        for (int i = 0; i < 1500; i += 10)
        {
            canvas.drawLine( i, 0, i + 100, 500, paint );
        }

        canvas.drawRect( fWorksheetWidth - 50, 0, fWorksheetWidth, fWorksheetHeight, paint );
        canvas.drawRect( 0, fWorksheetHeight - 50, fWorksheetWidth, fWorksheetHeight, paint );

        canvas.restore( );
    }

drawable初始化如下：

Drawable fOverScrollDrawable;

...

Resources rsr = context.getResources( );
fOverScrollDrawable = rsr.getDrawable( R.drawable.overscroll_glow );

過度滾動的圖像資源發光，我在sdk中拍攝了兩張圖像，並將它們組合成一個可繪制的資源：

• \\ Android的SDK \\平台\\機器人-11 \\數據\\水庫\\抽拉-HDPI \\ overscroll_edge.png
• \\ Android的SDK \\平台\\機器人-11 \\數據\\水庫\\抽拉-HDPI \\ overscroll_glow.png

Answer 3

好吧，我有同樣的問題。

我查看了android視圖的實現，在'onOverScrolled'里面只有注釋“故意為空”。

看看ListView實現，我可以看到他們通過獲取drawables的'com.android.internal.R.styleable.ListView_overScrollHeader'和'com.android.internal.R.styleable.ListView_overScrollFooter'來手動實現它。從外面使用。 不幸的是，我無法在消息來源中找到這些資源。

因為看起來我們必須手動進行過度滾動...