【高级UI】【026】手动为RecyclerView添加橡皮筋拉伸回弹效果
实现思路
-
控件拉伸回弹，可通过缩放画布来达到，我们只要计算出控件在拉伸时的缩放比例即可
-
缩放比例可通过手指移动距离来计算，当控件滑动到边界时，手指继续滑动，额外滑动距离/控件总高度，即可作为拉伸比例
-
控件状态可分为三类，正常滑动状态，手越界滑动时的拉伸状态，手松开时的回弹状态，第一种状态我们使用RecyclerView默认的滑动处理即可
-
手松开时，我们可以通过一个渐变值动画，来让额外滑动距离逐渐减少到0
-
回弹过程中欧冠，如果手指重新按下，我们则立刻取消渐变值动画，并让控件重新进入到拉伸状态
-
控件滑动的临界值，可以通过computeVerticalScrollRange、computeVerticalScrollExtent、computeVerticalScrollOffset这三个方法来计算
核心代码
package com.android.architecture;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Interpolator;
import android.view.animation.Transformation;
import androidx.core.view.MotionEventCompat;
import androidx.recyclerview.widget.LinearLayoutManager;
import androidx.recyclerview.widget.RecyclerView;
//实现橡皮筋拉伸回弹效果
//支持多指操控，一只手指滑到屏幕边界时，可以通过其它手指继续滑动
@SuppressWarnings("all")
public class ElasticListView extends RecyclerView {
//正常状态
private static final int STATE_NORMAL = 0;
//沿顶部拉伸
private static final int STATE_STRETCHING_TOP = 1;
//沿底部拉伸
private static final int STATE_STRETCHING_BOTTOM = 2;
//回弹
private static final int STATE_BOUNCING_BACK = 3;
//滑动状态
int state = STATE_NORMAL;
//当前起作用的手指
int activePointerId = -1;
//记录上次手指位置
float preY;
//记录手指松开时的拉伸距离
float maxOffset;
//记录当前的拉伸距离，用于回弹动画
float nowOffset;
//回弹动画
Animation bounceBackAnimation;
Interpolator bounceBackInterpolator;
public ElasticListView(Context context) {
this(context, null);
}
public ElasticListView(Context context, AttributeSet attributeSet) {
super(context, attributeSet);
init(context, attributeSet);
}
protected void init(Context context, AttributeSet attributeSet) {
//设置竖向布局
LinearLayoutManager layoutManager = new LinearLayoutManager(context);
layoutManager.setOrientation(RecyclerView.VERTICAL);
setLayoutManager(layoutManager);
//启用默认的越界滚动效果，即滚动到边界时，继续滚动会产生一个水纹效果
//手动滚动到边界时，使用橡皮筋拉伸效果，通过惯性自动滚动到边界时，仍然使用默认的水纹效果
setOverScrollMode(View.OVER_SCROLL_ALWAYS);
//创建回弹动画
bounceBackAnimation = new Animation() {
@Override
protected void applyTransformation(float progress, Transformation transformation) {
nowOffset = maxOffset * progress;
if (hasEnded()) {
nowOffset = 0;
state = STATE_NORMAL;
}
invalidate();
}
};
//设置动画插值器
bounceBackInterpolator = new Interpolator() {
@Override
public float getInterpolation(float timePercent) {
float progress = (float) Math.cos(Math.PI * timePercent / 2);
return progress;
}
};
bounceBackAnimation.setInterpolator(bounceBackInterpolator);
bounceBackAnimation.setDuration(300);
}
@Override
public void draw(Canvas canvas) {
//普通状态下，正常绘制
if (state == STATE_NORMAL) {
super.draw(canvas);
return;
}
//拉伸或回弹状态下，拉伸画布
int saveCount = canvas.save();
int height = getHeight();
float scale = 1 + Math.abs(nowOffset) / height * 0.3F;
canvas.scale(1, scale, 0, nowOffset >= 0 ? 0 : height);
super.draw(canvas);
canvas.restoreToCount(saveCount);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent e) {
if (onInterceptTouchEventInternal(e))
return true;
return super.onInterceptTouchEvent(e);
}
protected boolean onInterceptTouchEventInternal(MotionEvent e) {
int action = MotionEventCompat.getActionMasked(e);
switch (action) {
case MotionEvent.ACTION_DOWN: {
preY = e.getY();
activePointerId = e.getPointerId(0);
//暂停回弹状态，或恢复到正常状态
if (state == STATE_BOUNCING_BACK) {
//回弹动画已结束，则恢复到正常状态
if (nowOffset == 0) {
state = STATE_NORMAL;
invalidate();
break;
}
//回弹动画尚未结束，切换到拉伸状态
//如果此时立刻将手松开，会开始一个新的回弹动画，从上次位置继续回弹
clearAnimation();
state = nowOffset > 0 ? STATE_STRETCHING_TOP : STATE_STRETCHING_BOTTOM;
invalidate();
}
break;
}
}
//如果处于拉伸状态，则自己处理该事件，不分发给子节点
//如果处于普通状态，则调用基类方法去处理
boolean stretching = isStretching();
return stretching;
}
@Override
public boolean onTouchEvent(MotionEvent e) {
if (onTouchEventInternal(e))
return true;
return super.onTouchEvent(e);
}
protected boolean onTouchEventInternal(MotionEvent e) {
int action = MotionEventCompat.getActionMasked(e);
switch (action) {
case MotionEvent.ACTION_MOVE: {
int pointerIndex = e.findPointerIndex(activePointerId);
float nowY = e.getY(pointerIndex);
float deltaY = nowY - preY;
preY = nowY;
//非拉伸状态下，需要处理切换到拉伸状态的case
if (!isStretching()) {
//判断控件能不能滑动，有没有到达边界
boolean canScrollUp = false;
boolean canScrollDown = false;
//computeVerticalScrollRange返回控件全部内容的高度
//computeVerticalScrollExtent返回控件在屏幕上可展示区域的高度
//computeVerticalScrollOffset返回控件已滑过的距离
int range = computeVerticalScrollRange() - computeVerticalScrollExtent();
if (range == 0) {
//内容较少，已经全部展示，不需要滑动
canScrollUp = false;
canScrollDown = false;
} else {
int offset = computeVerticalScrollOffset();
canScrollUp = offset > 0;
canScrollDown = offset < range;
}
//未到达边界，上下都可以滑动
if (canScrollUp && canScrollDown)
break;
//达到边界时，再继续滑动，即进入越界滚动状态
if (!canScrollUp && deltaY > 0)
state = STATE_STRETCHING_TOP;
if (!canScrollDown && deltaY < 0)
state = STATE_STRETCHING_BOTTOM;
}
//拉伸状态下，需要处理重绘控件，和切换到非拉伸状态的case
if (isStretching()) {
nowOffset = nowOffset + deltaY;
if ((state == STATE_STRETCHING_TOP && nowOffset < 0) || (state == STATE_STRETCHING_BOTTOM && nowOffset > 0)) {
state = STATE_NORMAL;
nowOffset = 0;
}
invalidate();
}
break;
}
case MotionEventCompat.ACTION_POINTER_DOWN: {
int index = MotionEventCompat.getActionIndex(e);
preY = e.getY(index);
activePointerId = e.getPointerId(index);
break;
}
case MotionEventCompat.ACTION_POINTER_UP: {
onPointerUp(e);
int pointerIndex = e.findPointerIndex(activePointerId);
preY = e.getY(pointerIndex);
break;
}
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL: {
if (nowOffset != 0) {
maxOffset = nowOffset;
startAnimation(bounceBackAnimation);
state = STATE_BOUNCING_BACK;
}
}
}
//如果处于拉伸状态，则自己处理该事件，不分发给子节点
//如果处于普通状态，则调用基类方法去处理
boolean stretching = isStretching();
return stretching;
}
//多指触控时，有一只手指松开
protected void onPointerUp(MotionEvent e) {
int pointerIndex = e.getActionIndex();
int pointerId = e.getPointerId(pointerIndex);
if (pointerId == activePointerId) {
//选取一个新的有效手指
int newPointerIndex = pointerIndex == 0 ? 1 : 0;
activePointerId = e.getPointerId(newPointerIndex);
}
}
//判断控件是否处于拉伸状态
protected boolean isStretching() {
return state == STATE_STRETCHING_TOP || state == STATE_STRETCHING_BOTTOM;
}
}
源码下载
带橡皮筋效果的RecyclerView