前言: 很久以前就在以前前辈的项目中用到一个控件叫BounceScrollView,那个时候觉得有点高大上的感觉,就是可以上下弹性拉动的ScrollView,也就是仿ios那种效果,一直想去研究一下,苦逼老说自己没时间,所以就一直搁在那里,这几天刚好在研究VDH,于是想用VDH做一下.
代码不要太简单啊,我直接贴代码了,因为比较少
package com.yqy.canvasdemo.back.demo;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.widget.ScrollView;
import com.yqy.canvasdemo.back.ViewDragHelper;
/** * @author yqy * @version [Android PABank C01, @2016-10-18] * @date 2016-10-18 * @description http://blog.csdn.net/vv_bug */
public class MyScrollView extends ScrollView {
private ViewDragHelper mDragHelper;
public MyScrollView(Context context) {
this(context,null);
}
public MyScrollView(Context context, AttributeSet attrs) {
this(context, attrs,0);
}
public MyScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
mDragHelper=ViewDragHelper.create(this, 1.0f, new ViewDragHelper.Callback() {
//因为scollview就一个子类,所以当捕捉到是子类的时候,直接返回true了
@Override
public boolean tryCaptureView(View child, int pointerId) {
return true;
}
//当手指松开的时候,使其子类恢复到原来位置
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
mDragHelper.settleCapturedViewAt(getLeft()+getPaddingLeft(),getTop()+getPaddingTop());
invalidate();
}
});
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return mDragHelper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
mDragHelper.processTouchEvent(ev);
return super.onTouchEvent(ev);
}
@Override
public void computeScroll() {
super.computeScroll();
if(mDragHelper.continueSettling(true)){
invalidate();
}
}
}
很少的代码就可以玩起来了,但是我发现了一个问题,就是ScrollView本身的滑动事件跟子类的拖动貌似有点冲突啊,(^__^) 嘻嘻……所以感觉怪怪的。
还是推荐大家用下面这种方式哈,上面的用VDH实现的不推荐哦,
下面说说BounceScrollView的实现思路:
大致跟VDH的方式一样,首先记录下contentView的初始位置,然后当ScrollView滑动到顶部或底部的时候,开始处理滑动事件,根据滑动的距离开始动态设置contentView的layout位置,当手指抬起的时候,给一个平移动画,让contentView回到初始位置。
稍微有难度点的地方就是怎么判断ScrollView滑动到了顶部还是底部的代码了,先看看几张图:
1、当我们滑动ScrollView的时候图形大概是这样的(画板画的图,太丑了,不要喷啊!(^__^) ):
当我们的:getScrollY+scrollView.getHeight>=contentView.getHeight的时候,也就是滑动到了底部了
当我们的:getScrollY=0的时候,也就是ScorllView到达顶部了。
2、当我们到达了ScorllView的底部跟底部的时候,我们就根据手指滑动的距离,开始设置contentView拖出ScorllView的位置。
3、当我们手指释放的时候,回到contentView初始位置。
好了!根据我们上面的思路,我们一步一步的实现一下这个看似高大上的控件:
首先,创建一个叫BounceScrollView去继承ScrollView,然后获取contentView(也就是ScrollView中的第一个子View)。
package com.yqy.canvasdemo.back.demo;
import android.content.Context;
import android.util.AttributeSet;
import android.view.View;
import android.widget.ScrollView;
/** * @author EX_YINQINGYANG * @version [Android PABank C01, @2016-11-08] * @date 2016-11-08 * @description */
public class BounceScrollView extends ScrollView {
/** * ScrollView的contentView */
private View mContentView;
public BounceScrollView(Context context) {
this(context,null);
}
public BounceScrollView(Context context, AttributeSet attrs) {
super(context,attrs);
}
public BounceScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
/** * 在Inflate完毕后获取mContentView * */
@Override
protected void onFinishInflate() {
super.onFinishInflate();
if(getChildCount()>0)mContentView=getChildAt(0);
}
}
获取了到contentView后,我们要获取到contentView的原始位置:
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if(changed){
originRect.set(
mContentView.getLeft(),mContentView.getTop(),
mContentView.getRight(),mContentView.getBottom()
);
}
}
接下来就是我们的核心代码了,处理事件:
private float lastY;
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if(mContentView==null){
return super.dispatchTouchEvent(ev);
}
int action=ev.getAction();
switch (action){
case MotionEvent.ACTION_MOVE:
canPullUp = canPullUp();
canPullDown = canPullDown();
if(!canPullDown&&!canPullUp){
lastY=ev.getY();
break;
}
int durY= (int) (ev.getY()-lastY);
/** * 判断是上拉或者下拉 */
if(isMoved=(mContentView!=null&&(durY>0&&canPullDown)||(durY<0&&canPullUp))){
durY*=MOVE_FACTOR;//起一个阻尼的效果
mContentView.layout(
originRect.left,originRect.top+durY,
originRect.right,originRect.bottom+durY
);
}
break;
case MotionEvent.ACTION_UP:
if(!isMoved) break;//如果没有移动的话,就不执行动画
/** * 平移动画从当前contentView的top移动到contentView的最初高度 */
TranslateAnimation anim = new TranslateAnimation(0, 0, mContentView.getTop(),
originRect.top);
anim.setDuration(ANIMA_TIME);
anim.setInterpolator(new AccelerateDecelerateInterpolator());
mContentView.startAnimation(anim);
/** * 重置所有状态 */
reset();
break;
}
return super.dispatchTouchEvent(ev);
}
/** * 重置所有状态 */
private void reset() {
//将contentView设置为原始位置
mContentView.layout(originRect.left, originRect.top,
originRect.right, originRect.bottom);
canPullDown = false;
canPullUp = false;
isMoved = false;
}
没有好的手机录屏工具就不看效果了,感兴趣的童鞋可以自己运行看看效果额,感觉比VDH效果好,也可以能是我还没有彻底理解VDH,不管怎样,加油吧!!!!!
最后附上全部代码:
package com.yqy.canvasdemo.back.demo;
import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;
/** * @author yqy * @version [Android PABank C01, @2016-11-08] * @date 2016-11-08 * @description http://blog.csdn.net/vv_bug */
public class BounceScrollView2 extends ScrollView {
/** * 阻尼系数 */
private static final float MOVE_FACTOR = 0.618f;
/** * 松开手指回来时候的动画事件 */
private static final long ANIMA_TIME =300 ;
/** * ScrollView的contentView */
private View mContentView;
/** * contentView的原始位置 */
private Rect originRect;
/** * 是否到达了顶部 */
private boolean canPullDown;
/** * 是否到达了底部 */
private boolean canPullUp;
/** * contentview有无移动,有移动松手就执行动画 */
private boolean isMoved;
public BounceScrollView2(Context context) {
super(context);
init();
}
public BounceScrollView2(Context context, AttributeSet attrs) {
super(context,attrs);
init();
}
public BounceScrollView2(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
originRect=new Rect();
}
/** * 在Inflate完毕后获取mContentView * */
@Override
protected void onFinishInflate() {
super.onFinishInflate();
if(getChildCount()>0)mContentView=getChildAt(0);
}
/** * 获取contentView的初始位置 */
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
if(changed){
originRect.set(
mContentView.getLeft(),mContentView.getTop(),
mContentView.getRight(),mContentView.getBottom()
);
}
}
/** * 在拖动之前的Y坐标值 */
private float lastY;
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if(mContentView==null){
return super.dispatchTouchEvent(ev);
}
int action=ev.getAction();
switch (action){
case MotionEvent.ACTION_MOVE:
canPullUp = canPullUp();
canPullDown = canPullDown();
if(!canPullDown&&!canPullUp){
lastY=ev.getY();
break;
}
int durY= (int) (ev.getY()-lastY);
/** * 判断是上拉或者下拉 */
if(isMoved=(mContentView!=null&&(durY>0&&canPullDown)||(durY<0&&canPullUp))){
durY*=MOVE_FACTOR;//起一个阻尼的效果
mContentView.layout(
originRect.left,originRect.top+durY,
originRect.right,originRect.bottom+durY
);
}
break;
case MotionEvent.ACTION_UP:
if(!isMoved) break;//如果没有移动的话,就不执行动画
/** * 平移动画从当前contentView的top移动到contentView的最初高度 */
TranslateAnimation anim = new TranslateAnimation(0, 0, mContentView.getTop(),
originRect.top);
anim.setDuration(ANIMA_TIME);
anim.setInterpolator(new AccelerateDecelerateInterpolator());
mContentView.startAnimation(anim);
/** * 重置所有状态 */
reset();
break;
}
return super.dispatchTouchEvent(ev);
}
/** * 重置所有状态 */
private void reset() {
//将contentView设置为原始位置
mContentView.layout(originRect.left, originRect.top,
originRect.right, originRect.bottom);
canPullDown = false;
canPullUp = false;
isMoved = false;
}
/** * scrollView是不是到达了顶部,或者contentView高度<ScrollView高度 * @return boolean */
private boolean canPullDown(){
return getScrollY()==0||(mContentView!=null&&mContentView.getHeight()<=getHeight());
}
/** * scrollView是不是到达了底部 * @return boolean */
private boolean canPullUp(){
return (mContentView!=null&&mContentView.getHeight()<=getHeight()+getScrollY());
}
}