自定义具有拉伸阻尼效果的ScrollerView
引言
一切的自定义都是来自于需求，而在项目开发中由于界面条目太多，所以自然而然的使用到了ScrollerView，当把效果给产品经理的时候呢，ios和Android的效果完全不一样，ios自带的上下拉伸回弹的效果，而Android没有，所以自定义一个具有拉伸效果的ScrollerView迫在眉睫啊.
首先来看一下效果图，妹子很漂亮，但是注意重点！！！
这里写图片描述
好了，下面进入正题，通过继承ScrollerView来进行相关滑动回弹的效果实现，先来定义几个变量：
private View childView;// 子View（ScrollerView的唯一子类）
private int y;// 点击时y坐标
private Rect rect = new Rect();// 矩形(用来保存inner的初始状态，判断是够需要动画回弹效果)
注释打的也很清楚，然后我们先在该ScrollerView的xml布局加载完成后获取ScrollerView的唯一子布局赋值给上面定义的childView：
/**
* 在xml布局绘制为界面完成时调用，
* 获取ScrollerView中唯一的直系子布局（ScrollerView中不许包含一层ViewGroup，有且只有一个）
*/
@Override
protected void onFinishInflate() {
if (getChildCount() > 0) {
childView = getChildAt(0);
}
super.onFinishInflate();
}
下面就是处理Touch事件了：
/**
* touch 事件处理
**/
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (childView != null) {
handleTouchEvent(ev);
}
return super.onTouchEvent(ev);
}
/***
* 触摸事件
*
* @param ev
*/
public void handleTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
y = (int) ev.getY();//按下的时候获取到y坐标
break;
case MotionEvent.ACTION_MOVE:
int nowY = (int) ev.getY(); // 移动时的实时y坐标
int delayY = y - nowY; // 移动时的间隔
y = nowY; // 将本次移动结束时的y坐标赋值给下次移动的起始坐标（也就是nowY）
if (isNeedMove()) {
if (rect.isEmpty()) {
//rect保存childView的初始位置信息
rect.set(childView.getLeft(), childView.getTop(), childView.getRight(), childView.getBottom());
}
//移动布局（屏幕移动的距离等于手指滑动距离的一般）
childView.layout(childView.getLeft(), childView.getTop() - delayY / 2, childView.getRight(), childView.getBottom() - delayY / 2);
}
break;
case MotionEvent.ACTION_UP:
if (isNeedAnimation()) {// 判断rect是否为空，也就是是否被重置了
startAnim();//开始回弹动画
}
break;
default:
break;
}
}
对于Touch事件的处理，我注释说的应该很清楚，但是里面有需要调用的四个方法：
- 判断布局是否需要移动
/**
* 判断布局是否需要移动
* @return
*/
private boolean isNeedMove() {
int offset = childView.getMeasuredHeight() - getHeight();
int scrollY = getScrollY();
// 0是顶部，后面那个是底部（需要仔细想一下这个过程）
if (scrollY == 0 || scrollY == offset) {
return true;
}
return false;
}
其中childView.getMeasuredHeight()为获取到该布局的实际高度，getHeight是该布局在屏幕中显示的高度，getScrollY()是滑动的时候相对于起始位置的距离。
- 判断rect是否为空
在加载布局的时候rect进行了初始化，当确定需要滑动时，再判断一下rect是否为空，因为该rect在布局执行动画回弹之后就会被置空，如果当Scroller顶部对其或者底部对其，未在回弹过程就会将该时刻Scroller的位置信息传入到rect，方便回弹的时候根据rect保存的scrollerview的位置信息完成回弹作用。
- 判断是否需要动画
public boolean isNeedAnimation() {
return !rect.isEmpty();
}
- 执行动画回弹
private void startAnim() {
TranslateAnimation anim = new TranslateAnimation(0, 0, childView.getTop(), rect.top);
anim.setDuration(200);
anim.setInterpolator(new OvershootInterpolator());//加速器
childView.startAnimation(anim);
// 将inner布局重新回到起始位置
childView.layout(rect.left, rect.top, rect.right, rect.bottom);
rect.setEmpty();
}
在执行完动画回弹后即ScrollerView回归了原始状态，于是rect也就置空，方便下一次继续记录，好了，下面直接贴一份完整代码吧：
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.OvershootInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;
/**
* Author : luweicheng on 2017/7/20 0020 15:15
* E-mail ：1769005961@qq.com
* GitHub : https://github.com/luweicheng24
* funcation: 具有拉伸效果的ScrollerView
*/
public class CustomScroller extends ScrollView {
private View childView;// 子View（ScrollerView的唯一子类）
private int y;// 点击时y坐标
private Rect rect = new Rect();// 矩形(用来保存inner的初始状态，判断是够需要动画回弹效果)
public CustomScroller(Context context, AttributeSet attrs) {
super(context, attrs);
}
/**
* 在xml布局绘制为界面完成时调用，
* 获取ScrollerView中唯一的直系子布局（ScrollerView中不许包含一层ViewGroup，有且只有一个）
*/
@Override
protected void onFinishInflate() {
if (getChildCount() > 0) {
childView = getChildAt(0);
}
super.onFinishInflate();
}
/**
* touch 事件处理
**/
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (childView != null) {
handleTouchEvent(ev);
}
return super.onTouchEvent(ev);
}
/***
* 触摸事件
*
* @param ev
*/
public void handleTouchEvent(MotionEvent ev) {
int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_DOWN:
y = (int) ev.getY();//按下的时候获取到y坐标
break;
case MotionEvent.ACTION_MOVE:
int nowY = (int) ev.getY(); // 移动时的实时y坐标
int delayY = y - nowY; // 移动时的间隔
y = nowY; // 将本次移动结束时的y坐标赋值给下次移动的起始坐标（也就是nowY）
if (isNeedMove()) {
if (rect.isEmpty()) {
//rect保存childView的初始位置信息
rect.set(childView.getLeft(), childView.getTop(), childView.getRight(), childView.getBottom());
}
//移动布局（屏幕移动的距离等于手指滑动距离的一般）
childView.layout(childView.getLeft(), childView.getTop() - delayY / 2, childView.getRight(), childView.getBottom() - delayY / 2);
}
break;
case MotionEvent.ACTION_UP:
if (isNeedAnimation()) {// 判断rect是否为空，也就是是否被重置了
startAnim();//开始回弹动画
}
break;
default:
break;
}
}
private void startAnim() {
TranslateAnimation anim = new TranslateAnimation(0, 0, childView.getTop(), rect.top);
anim.setDuration(200);
anim.setInterpolator(new OvershootInterpolator());//加速器
childView.startAnimation(anim);
// 将inner布局重新回到起始位置
childView.layout(rect.left, rect.top, rect.right, rect.bottom);
rect.setEmpty();
}
/**
* 判断布局是否需要移动
* @return
*/
private boolean isNeedMove() {
int offset = childView.getMeasuredHeight() - getHeight();
int scrollY = getScrollY();
// 0是顶部，后面那个是底部（需要仔细想一下这个过程）
if (scrollY == 0 || scrollY == offset) {
return true;
}
return false;
}
public boolean isNeedAnimation() {
return !rect.isEmpty();
}
}
如果有问题，在下面留言，共同探讨。
