其他分享
首页 > 其他分享> > 【Android官方API翻译】Touch gestures的使用（三）动画滚动手势

【Android官方API翻译】Touch gestures的使用（三）动画滚动手势

作者：互联网

原文链接：https://developer.android.google.cn/training/gestures/scroll

目录

了解Scrolling术语Understand scrolling terminology

实现基于触摸的滚动Implement touch-based scrolling

在Android中，滚动通常是通过使用ScrollView 类实现的。任何可能超出其容器边界的标准布局都应嵌套在ScrollView 中，以提供由框架管理的可滚动视图。只有在特殊情况下才需要实现自定义滚动条。本博客描述了这样一个场景：使用滚动条显示滚动效果以响应触摸手势。

您可以使用滚动条（Scroller 或 OverScroller）来收集需要生成滚动动画以响应触摸事件的数据。它们是相似的，但OverScroller 包含了一些方法，用于向用户指示，在平移或翻转手势之后，它们已经到达了内容边缘。InteractiveChart 示例使用EdgeEffect 类（实际上是EdgeEffectCompat 类）在用户到达内容边缘时显示“发光”效果。

注意：我们建议您使用OverScroller 而不是Scroller 滚动动画。OverScroller 允许旧设备的最佳向后兼容性。另外请注意，在实现自己的滚动时，通常只需要使用滚动条。如果你把你的布局嵌套在它们里面ScrollView 和HorizontalScrollView将为您完成所有这些操作。

滚动条用于通过平台标准滚动物理（摩擦、速度等）来动态滚动一段时间。滚动条本身并不实际绘制任何内容。滚动条会随着时间的推移跟踪滚动偏移量，但不会自动将这些位置应用到视图中。您应获取和应用新的坐标以使滚动动画平稳的滑动。

请参阅以下相关资源：

了解Scrolling术语Understand scrolling terminology

“Scrolling”是一个可以在Android中呈现不同含义的词，具体取决于上下文。

Scrolling是移动视区的一般过程（即，您正在查看的内容的“窗口”）。当滚动在X轴和Y轴上时，它被称为平移。此类InteractiveChart提供的示例应用程序演示了两种不同类型的滚动、拖动和翻转：

通常将滚动器对象与翻转手势结合使用，但它们几乎可以用于希望UI显示滚动以响应触摸事件的任何上下文。例如，您可以覆盖onTouchEvent()来直接处理触摸事件，并生成滚动效果或响应这些触摸事件的“snapping to page”动画。

实现基于触摸的滚动Implement touch-based scrolling

本节介绍如何使用滚动条。下面显示的代码片段来自于随此类提供的InteractiveChart 示例。它使用一个GestureDetector，并覆盖GestureDetector.SimpleOnGestureListener的onFling()方法。它使用OverScroller 来跟踪投掷姿势。如果用户在甩动手势后到达内容边缘，应用程序将显示“发光”效果。

InteractiveChart 示例应用程序显示一个图表，您可以缩放、平移、滚动等。在下面的代码片段中，mContentRect 表示将绘制图表的视图中的矩形坐标。在任何给定的时间，总图表域和范围的一个子集被绘制到这个矩形区域。mCurrentViewport 表示当前在屏幕上可见的图表部分。因为像素偏移通常被视为整数，所以mContentRect 的类型为Rect。因为图形域和范围是十进制/浮点值，mCurrentViewport 是RectF类型。

片段的第一部分显示了onFling()的实现：

// The current viewport. This rectangle represents the currently visible
// chart domain and range. The viewport is the part of the app that the
// user manipulates via touch gestures.
private RectF mCurrentViewport =
        new RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX);

// The current destination rectangle (in pixel coordinates) into which the
// chart data should be drawn.
private Rect mContentRect;

private OverScroller mScroller;
private RectF mScrollerStartViewport;
...
private final GestureDetector.SimpleOnGestureListener mGestureListener
        = new GestureDetector.SimpleOnGestureListener() {
    @Override
    public boolean onDown(MotionEvent e) {
        // Initiates the decay phase of any active edge effects.
        releaseEdgeEffects();
        mScrollerStartViewport.set(mCurrentViewport);
        // Aborts any active scroll animations and invalidates.
        mScroller.forceFinished(true);
        ViewCompat.postInvalidateOnAnimation(InteractiveLineGraphView.this);
        return true;
    }
    ...
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2,
            float velocityX, float velocityY) {
        fling((int) -velocityX, (int) -velocityY);
        return true;
    }
};

private void fling(int velocityX, int velocityY) {
    // Initiates the decay phase of any active edge effects.
    releaseEdgeEffects();
    // Flings use math in pixels (as opposed to math based on the viewport).
    Point surfaceSize = computeScrollSurfaceSize();
    mScrollerStartViewport.set(mCurrentViewport);
    int startX = (int) (surfaceSize.x * (mScrollerStartViewport.left -
            AXIS_X_MIN) / (
            AXIS_X_MAX - AXIS_X_MIN));
    int startY = (int) (surfaceSize.y * (AXIS_Y_MAX -
            mScrollerStartViewport.bottom) / (
            AXIS_Y_MAX - AXIS_Y_MIN));
    // Before flinging, aborts the current animation.
    mScroller.forceFinished(true);
    // Begins the animation
    mScroller.fling(
            // Current scroll position
            startX,
            startY,
            velocityX,
            velocityY,
            /*
             * Minimum and maximum scroll positions. The minimum scroll
             * position is generally zero and the maximum scroll position
             * is generally the content size less the screen size. So if the
             * content width is 1000 pixels and the screen width is 200
             * pixels, the maximum scroll offset should be 800 pixels.
             */
            0, surfaceSize.x - mContentRect.width(),
            0, surfaceSize.y - mContentRect.height(),
            // The edges of the content. This comes into play when using
            // the EdgeEffect class to draw "glow" overlays.
            mContentRect.width() / 2,
            mContentRect.height() / 2);
    // Invalidates to trigger computeScroll()
    ViewCompat.postInvalidateOnAnimation(this);
}

当onFling()回调postInvalidateOnAnimation()时，它会触发computeScroll()更新x和y的值。这通常是在视图子级使用滚动器对象为滚动动画时完成的，如本例中所示。

大多数视图将滚动条对象的X和Y位置直接传递给scrollTo()。computeScroll()的以下实现采用了不同的方法，它调用 computeScrollOffset()来获取x和y的当前位置。当满足显示屏幕边界“发光”边缘效果的条件时（显示被放大，X或Y超出界限，并且应用程序还没有显示超过屏幕），代码设置超屏幕发光效果和回调postInvalidateOnAnimation()以触发视图上的无效视图：

// Edge effect / overscroll tracking objects.
private EdgeEffectCompat mEdgeEffectTop;
private EdgeEffectCompat mEdgeEffectBottom;
private EdgeEffectCompat mEdgeEffectLeft;
private EdgeEffectCompat mEdgeEffectRight;

private boolean mEdgeEffectTopActive;
private boolean mEdgeEffectBottomActive;
private boolean mEdgeEffectLeftActive;
private boolean mEdgeEffectRightActive;

@Override
public void computeScroll() {
    super.computeScroll();

    boolean needsInvalidate = false;

    // The scroller isn't finished, meaning a fling or programmatic pan
    // operation is currently active.
    if (mScroller.computeScrollOffset()) {
        Point surfaceSize = computeScrollSurfaceSize();
        int currX = mScroller.getCurrX();
        int currY = mScroller.getCurrY();

        boolean canScrollX = (mCurrentViewport.left > AXIS_X_MIN
                || mCurrentViewport.right < AXIS_X_MAX);
        boolean canScrollY = (mCurrentViewport.top > AXIS_Y_MIN
                || mCurrentViewport.bottom < AXIS_Y_MAX);

        /*
         * If you are zoomed in and currX or currY is
         * outside of bounds and you are not already
         * showing overscroll, then render the overscroll
         * glow edge effect.
         */
        if (canScrollX
                && currX < 0
                && mEdgeEffectLeft.isFinished()
                && !mEdgeEffectLeftActive) {
            mEdgeEffectLeft.onAbsorb((int)mScroller.getCurrVelocity());
            mEdgeEffectLeftActive = true;
            needsInvalidate = true;
        } else if (canScrollX
                && currX > (surfaceSize.x - mContentRect.width())
                && mEdgeEffectRight.isFinished()
                && !mEdgeEffectRightActive) {
            mEdgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            mEdgeEffectRightActive = true;
            needsInvalidate = true;
        }

        if (canScrollY
                && currY < 0
                && mEdgeEffectTop.isFinished()
                && !mEdgeEffectTopActive) {
            mEdgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            mEdgeEffectTopActive = true;
            needsInvalidate = true;
        } else if (canScrollY
                && currY > (surfaceSize.y - mContentRect.height())
                && mEdgeEffectBottom.isFinished()
                && !mEdgeEffectBottomActive) {
            mEdgeEffectRight.onAbsorb((int)mScroller.getCurrVelocity());
            mEdgeEffectBottomActive = true;
            needsInvalidate = true;
        }
        ...
    }

下面是执行实际缩放的代码部分：

// Custom object that is functionally similar to Scroller
Zoomer mZoomer;
private PointF mZoomFocalPoint = new PointF();
...

// If a zoom is in progress (either programmatically or via double
// touch), performs the zoom.
if (mZoomer.computeZoom()) {
    float newWidth = (1f - mZoomer.getCurrZoom()) *
            mScrollerStartViewport.width();
    float newHeight = (1f - mZoomer.getCurrZoom()) *
            mScrollerStartViewport.height();
    float pointWithinViewportX = (mZoomFocalPoint.x -
            mScrollerStartViewport.left)
            / mScrollerStartViewport.width();
    float pointWithinViewportY = (mZoomFocalPoint.y -
            mScrollerStartViewport.top)
            / mScrollerStartViewport.height();
    mCurrentViewport.set(
            mZoomFocalPoint.x - newWidth * pointWithinViewportX,
            mZoomFocalPoint.y - newHeight * pointWithinViewportY,
            mZoomFocalPoint.x + newWidth * (1 - pointWithinViewportX),
            mZoomFocalPoint.y + newHeight * (1 - pointWithinViewportY));
    constrainViewport();
    needsInvalidate = true;
}
if (needsInvalidate) {
    ViewCompat.postInvalidateOnAnimation(this);
}

这是在上述代码段中调用的computeScrollSurfaceSize()方法。它以像素为单位计算当前可滚动的表面大小。例如，如果整个图表区可见，则这只是mContentRect的当前大小。如果图表在两个方向上都以200%的比例缩放，则返回的大小将是水平和垂直方向的两倍。

private Point computeScrollSurfaceSize() {
    return new Point(
            (int) (mContentRect.width() * (AXIS_X_MAX - AXIS_X_MIN)
                    / mCurrentViewport.width()),
            (int) (mContentRect.height() * (AXIS_Y_MAX - AXIS_Y_MIN)
                    / mCurrentViewport.height()));
}

有关滚动条用法的另一个示例，请参见ViewPager 类的源代码。它会根据翻转进行滚动，并使用滚动来实现“snapping to page”动画。

标签：滚动,int,private,gestures,API,mContentRect,Touch,true,AXIS
来源： https://blog.csdn.net/crazywolfteam/article/details/99943249