当前位置: 首页 > 编程笔记 >

Android ReboundScrollView仿IOS拖拽回弹效果

夏朗
2023-03-14
本文向大家介绍Android ReboundScrollView仿IOS拖拽回弹效果,包括了Android ReboundScrollView仿IOS拖拽回弹效果的使用技巧和注意事项,需要的朋友参考一下

初衷:

其实github上有很多这种ScrollView的项目,但是不得不说功能太多太乱了,我就只是想要一个简单效果的ScrollView,另外监听下滑动距离而已,想想还是自己写了个。

这里先说下思路吧,如果不愿意看的朋友可以直接跳过这一步,看下面的代码:

Android 原生的ScrollView是不支持拉出屏幕外,并且也没有回弹效果的,用户友好度却不不太好,不知道为什么不那么设计。

我想做的事情正如上面所述:

1.希望能拉出屏幕外
2.松手后希望控件回弹

我的思路是对ScrollView的子View进行操作

所有View的滑动控制肯定都受着onTouchEvent控制,所以,理所应当的,我要关注的重点,也就是onTouchEvent这个方法。

回弹的效果,就牵涉到位置的计算,这里我的想法就用简单的TranslateAnimation来实现。

大体思路就是这样了,先把思路确定了,然后代码总是磨出来的。

贴代码:

import android.content.Context;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import android.view.animation.TranslateAnimation;
import android.widget.ScrollView;

public class ReboundScrollView extends ScrollView {

 private static final float MOVE_DELAY = 0.3f;//当拉出屏幕时的拖拽系数
 private static final int ANIM_TIME = 300;//回弹耗时
 private static final int FLING = 2;//fling 系数

 private View childView;
 private boolean havaMoved;

 private Rect originalRect = new Rect();

 private float startY;

 @Override
 protected void onFinishInflate() {
 super.onFinishInflate();
 if (getChildCount() > 0) {
  childView = getChildAt(0);
 }
 }

 @Override
 public void fling(int velocityY) {
 super.fling(velocityY / 2);
 }

 @Override
 protected void onLayout(boolean changed, int l, int t, int r, int b) {
 super.onLayout(changed, l, t, r, b);

 if (childView == null)
  return;

 originalRect.set(childView.getLeft(), childView.getTop(),
  childView.getRight(), childView.getBottom());
 }


 public ReboundScrollView(Context context, AttributeSet attrs,
    int defStyle) {
 super(context, attrs, defStyle);
 }

 public ReboundScrollView(Context context, AttributeSet attrs) {
 super(context, attrs);
 }

 public ReboundScrollView(Context context) {
 super(context);
 }


 /**
 * 在触摸事件中, 处理上拉和下拉的逻辑
 */
 @Override
 public boolean dispatchTouchEvent(MotionEvent ev) {

 if (childView == null) {
  return super.dispatchTouchEvent(ev);
 }

 int action = ev.getAction();

 switch (action) {
  case MotionEvent.ACTION_DOWN:
  startY = ev.getY();
  break;

  case MotionEvent.ACTION_UP:
  case MotionEvent.ACTION_CANCEL:
  if (!havaMoved)
   break;

  TranslateAnimation anim = new TranslateAnimation(0, 0,
   childView.getTop(), originalRect.top);
  anim.setDuration(ANIM_TIME);

  childView.startAnimation(anim);
  // 将标志位设回false
  havaMoved = false;
  resetViewLayout();

  break;
  case MotionEvent.ACTION_MOVE:

  float nowY = ev.getY();
  int deltaY = (int) (nowY - startY);
  int offset = (int) (deltaY * MOVE_DELAY);
  childView.layout(originalRect.left, originalRect.top + offset,
   originalRect.right, originalRect.bottom + offset);

  havaMoved = true;

  break;
  default:
  break;
 }

 return super.dispatchTouchEvent(ev);
 }

 public void resetViewLayout() {
 childView.layout(originalRect.left, originalRect.top,
  originalRect.right, originalRect.bottom);
 }

}

把代码贴出来后,再来分析具体的实现:

首先是拉出屏幕,在MOVE的过程中,对于超出部分代码,我使用layout重置子View的位置。

第二个要实现的就是回弹了,拖出去总是要回来的:

这里我定义了一个Rect,在onLayout(boolean changed, int l, int t, int r, int b)方法中,记录下了ScrollView的初始位置,以便于重置回弹。

说了许多,看一下代码里的关键代码

MOVE的代码:

 float nowY = ev.getY();
  int deltaY = (int) (nowY - startY);
  int offset = (int) (deltaY * MOVE_DELAY);
  childView.layout(originalRect.left, originalRect.top + offset,
   originalRect.right, originalRect.bottom + offset);

  havaMoved = true;

这是MotionEvent.ACTION_MOVE的时候要做的,对chlidView的位置重新设置也就是lauout方法,这是基于originalRect的值来的,设定了相应的滑动系数,不然感觉实在是太灵敏了。

回弹的代码:

 if (!havaMoved)
   break;

  TranslateAnimation anim = new TranslateAnimation(0, 0,
   childView.getTop(), originalRect.top);
  anim.setDuration(ANIM_TIME);

  childView.startAnimation(anim);
  // 将标志位设回false
  havaMoved = false;
  resetViewLayout();
...
...
 public void resetViewLayout() {
 childView.layout(originalRect.left, originalRect.top,
  originalRect.right, originalRect.bottom);
 }

当手指 MotionEvent.ACTION_UP或者MotionEvent.ACTION_CANCEL的时候把clildView置于原位,然后设置动画,这就是回弹了。

补充:

这是个非常简单的回弹ScrollView,需要注意的是,我这里没有对在屏幕内正常移动和屏幕外移动作区分,那样就需要判断当前的移动是否需要我们重写了,也就是是否处于上拉,下拉的部分。没有做判断,我现在的代码就会导致你手势移动的距离和控件滚动的距离是不一样的。我是感觉如果你正常使用是不会注意到这一点的。但是不排除有这种需求。

下拉其实不太好判断,因为我这里操作的是ChildView,ScrollView在上拉过程中getScrollY()肯定是0,所以这一点,我也还没想好。不过上拉倒是比较简单。当childView.height <= ScrollView.height + getScrollY的时候就是上拉出屏幕的点了,这个应该能想通吧。

git地址:https://github.com/cjhandroid/ReboundScrollView

源码下载:http://xiazai.jb51.net/201611/yuanma/androidReboundScrollView(jb51.net).rar

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持小牛知识库。

 类似资料:
  • 本文向大家介绍Android仿qq消息拖拽效果,包括了Android仿qq消息拖拽效果的使用技巧和注意事项,需要的朋友参考一下 本文实例为大家分享了Android仿qq消息拖拽效果展示的具体代码,供大家参考,具体内容如下 这是一个仿qq消息拖拽效果,View和拖拽实现了分离,TextView、Button、Imageview等都可以实现相应的拖拽效果;在触发的地方调用 就可以了,第一个参数需要传入

  • 拖拽效果,和调整窗口大小其实差不多,首先我们来看一张图。 黑色的小圆点,是我们鼠标单击的点。 红线的距离,可以通过e.pageX获得。 蓝线的距离,可以通过可以移动的这个Div盒子的 offsetLeft拿到。 此时我们就可以拿到,黄线的长度,当鼠标,也就是小圆点往右移动的时候,黄线是不会变的,而红线会变长,我们再次通过e.pageX拿到这个红线的长,我们通过红线的长度,减去不变的黄线的长度,得到

  • 本文向大家介绍jquery实现可拖拽弹出层特效,包括了jquery实现可拖拽弹出层特效的使用技巧和注意事项,需要的朋友参考一下 功能很简单,却非常的实用,代码更加的简洁,这里就不多废话了 奉上源码:

  • 本文向大家介绍Vue.Draggable实现拖拽效果,包括了Vue.Draggable实现拖拽效果的使用技巧和注意事项,需要的朋友参考一下 快速实现Vue.Draggable的拖拽效果,供大家参考,具体内容如下 1.下载包:npm install vuedraggable 配置:package.json 2.在你的组件中引进依赖: 3.注册:draggable这个组件 4.使用html模板中使用该

  • 本文向大家介绍vue实现拖拽效果,包括了vue实现拖拽效果的使用技巧和注意事项,需要的朋友参考一下 vue中实现拖拽效果,供大家参考,具体内容如下 首先要搞明白分清clientY pageY screenY layerY offsetY的区别 作用3(事件对象中记录的鼠标位置) 语法 解释 evt.screenX 相对于屏幕的左上角为原点 evt.screenY evt.clientX 相对于浏览

  • 本文向大家介绍JavaScript简单拖拽效果(1),包括了JavaScript简单拖拽效果(1)的使用技巧和注意事项,需要的朋友参考一下 拖拽在前端开发中是很常见的功能,也是基本功之一,本文是不限制范围的拖拽也就是最简单的拖拽,鼠标按下对象,拖拽,松开停止! 1,onmousedown事件 2,onmousemove事件 3,onmouseup事件 因为在按下时拖动,所以onmousemove事