Android手势处理：深入理解滚动手势动画实现-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00560/article/details/148416626

Android手势处理：深入理解滚动手势动画实现

android-training-course-in-chinese Android官方培训课程中文版项目地址: https://gitcode.com/gh_mirrors/an/android-training-course-in-chinese

前言

在Android应用开发中，滚动(Scrolling)是最常见的手势交互之一。本文将基于Android培训课程中文版项目中的手势处理章节，深入讲解如何实现自定义的滚动手势动画，特别是针对快速滑动(fling)效果的处理。

滚动的基本概念

在Android开发中，"滚动"一词根据上下文有不同的含义：

基本滚动(Scrolling)：指移动视窗(viewport)的一般过程
平移(Panning)：在x轴和y轴方向同时滚动
拖拽(Dragging)：用户在触摸屏上拖动手指时发生的滚动
快速滑动(Fling)：用户快速拖拽后抬起手指时发生的惯性滚动

Scroller与OverScroller的选择

Android提供了两个主要的滚动辅助类：

Scroller：基础滚动类
OverScroller：Scroller的增强版，增加了边缘效果处理

推荐使用OverScroller，因为它：

提供了更好的向后兼容性
支持边缘发光效果
在内容边界处有更好的视觉效果

注意：如果只是简单的内容滚动，直接使用ScrollView或HorizontalScrollView即可，无需手动实现滚动逻辑。

实现快速滑动效果

1. 初始化设置

首先需要设置基本的视图和滚动相关对象：

// 当前可视区域(数值范围)
private RectF mCurrentViewport = new RectF(AXIS_X_MIN, AXIS_Y_MIN, AXIS_X_MAX, AXIS_Y_MAX);

// 绘制区域(像素坐标)
private Rect mContentRect;

// 滚动控制器
private OverScroller mScroller;
private RectF mScrollerStartViewport;

// 边缘效果
private EdgeEffectCompat mEdgeEffectTop;
private EdgeEffectCompat mEdgeEffectBottom;
private EdgeEffectCompat mEdgeEffectLeft;
private EdgeEffectCompat mEdgeEffectRight;

2. 处理手势事件

通过GestureDetector检测手势，特别是onFling事件：

private final GestureDetector.SimpleOnGestureListener mGestureListener = 
    new GestureDetector.SimpleOnGestureListener() {
    
    @Override
    public boolean onDown(MotionEvent e) {
        // 重置边缘效果和滚动状态
        releaseEdgeEffects();
        mScrollerStartViewport.set(mCurrentViewport);
        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;
    }
};

3. 实现fling方法

fling方法是实现快速滑动的核心：

private void fling(int velocityX, int velocityY) {
    releaseEdgeEffects();
    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));
    
    // 停止当前动画并开始新的fling
    mScroller.forceFinished(true);
    mScroller.fling(
        startX, startY, // 当前位置
        velocityX, velocityY, // 速度
        0, surfaceSize.x - mContentRect.width(), // x范围
        0, surfaceSize.y - mContentRect.height(), // y范围
        mContentRect.width() / 2, // overscroll距离
        mContentRect.height() / 2);
    
    ViewCompat.postInvalidateOnAnimation(this);
}

4. 计算滚动表面尺寸

这个方法计算可滚动内容的总尺寸(以像素为单位)：

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()));
}

5. 处理滚动动画

在computeScroll()中更新滚动位置并处理边缘效果：

@Override
public void computeScroll() {
    super.computeScroll();
    boolean needsInvalidate = false;

    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 (canScrollX && currX < 0 && mEdgeEffectLeft.isFinished() && !mEdgeEffectLeftActive) {
            mEdgeEffectLeft.onAbsorb((int)OverScrollerCompat.getCurrVelocity(mScroller));
            mEdgeEffectLeftActive = true;
            needsInvalidate = true;
        } 
        // 处理右边缘效果
        else if (canScrollX && currX > (surfaceSize.x - mContentRect.width()) && 
                mEdgeEffectRight.isFinished() && !mEdgeEffectRightActive) {
            mEdgeEffectRight.onAbsorb((int)OverScrollerCompat.getCurrVelocity(mScroller));
            mEdgeEffectRightActive = true;
            needsInvalidate = true;
        }

        // 类似处理上下边缘...
        
        if (needsInvalidate) {
            ViewCompat.postInvalidateOnAnimation(this);
        }
    }
}