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

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

(0)

相关推荐

  • Android自定义ScrollView实现放大回弹效果

    背景 在很多项目中我们都会用到ScrollView这个控件,因为ScrollView能够在屏幕内容多时下上滑动以适配加载的内容.但是ScrollView滑动时效果感觉太死板了,这个时候我们如果给它添加一个回弹的动画效果,会让界面交互更加舒服,提升用户体验效果. 自定义ScrollView 1.创建一个类,继承ScrollView并重写相应的构造函数 public class ZoomInScrollView extends ScrollView { public ZoomInScrollView

  • Android中ScrollView 滑到头部或尾部可伸缩放大效果

    最近做项目,想要这么一个效果,就是ScrollView 滑动到顶部,当不能在滑动的时候,图片可以下拉放大,松开又恢复.滑到底部没有内容的时候,也有伸缩效果,先看看效果图吧. 就是如上图这么个效果.系统提供的ScrollView 是不能做到这个效果的,所以需要自己自定义,网上找了一些资料.也参考了下其他人的做法.自己也整合了一下.希望对大家有所帮助. 核心的控件就是下面的这段代码: package com.kokjuis.travel.customView; import android.anim

  • 利用iOS手势与scrollView代理实现图片的放大缩小

    前言 对于图片拉伸是移动开发中很常见的需求,最近工作中就遇到了利用iOS实现对图片的放大和缩小效果,通过查找资料找到了两种解决方法,分别是用捏合手势和用scrollView的代理方法来实现,下面话不多说,来看看详细的方法介绍吧. 第一种方法:用捏合手势放大缩小 @interface ViewController () @property (strong, nonatomic) IBOutlet UIView *redView; @property (assign, nonatomic) CGFl

  • android 放大镜ShapeDrawable妙用分享

    首先,ShapeDrawable构造的时候可以指定描画的形状, 其次,可以通过shape.getPaint().setShader();指定Shader,shader可以接受一个图片和matrix 所以问题就顺利的解决了:) 具体实现如下:[java] 复制代码 代码如下: float scale = 1.2f; int cx = 224; int cy = 357; int r = 200; // 指定形状创建一个ShapeDrawable  ShapeDrawable shape=new S

  • android图像绘制(二)画布上放大缩小问题

    android中图像在画布上放大缩小时,图像的边框大小没有改变! 原图如下: 放大后:原来图片的边框没有改变,位置依旧! 所以如果要放置图片的位置的话,就需要做相应的位置移动才可以! 采用如下代码(全屏放置图片): 复制代码 代码如下: Matrix matrix = new Matrix(); matrix.postScale(canvas.getWidth()*1.01f/bmpBg.getWidth(), canvas.getHeight()*1.01f/bmpBg.getHeight()

  • android中Bitmap的放大和缩小实例代码

    复制代码 代码如下: /**Bitmap放大的方法*/ private static Bitmap big(Bitmap bitmap) { Matrix matrix = new Matrix(); matrix.postScale(1.5f,1.5f); //长和宽放大缩小的比例 Bitmap resizeBmp = Bitmap.createBitmap(bitmap,0,0,bitmap.getWidth(),bitmap.getHeight(),matrix,true); return

  • Android自定义ScrollView实现放大回弹效果实例代码

    1,刚刚在别人开源的项目中看到了一个挺不错的用户体验,效果图如下: 2,那下面我们就来实现一下,首先看一下布局,由于一般只是我们包含头像的那部分方法,所以这里我们要把布局分成两部分,对应的布局文件效果图如下: 3,自定义ScrollView 第一步:创建一个类,继承自ScrollView,重写相应的构造函数 public class ZoomInScrollView extends ScrollView { public ZoomInScrollView(Context context) { t

  • Android实现ImageView图片双击放大及缩小

    本文实例介绍了Android实现ImageView图片双击放大及缩小的相关技巧,分享给大家供大家参考,具体内容如下 public class DoubleScaleImageView extends ImageView implements OnTouchListener, OnGlobalLayoutListener { private boolean isFirst = false; private float doubleScale;// 双击放大的值 private Matrix mSc

  • Android实现图片反转、翻转、旋转、放大和缩小

    ********************************************************************** android 实现图片的翻转 ********************************************************************** Resources res = this.getContext().getResources(); img = BitmapFactory.decodeResource(res, R.

  • Android App中实现可以双击放大和缩小图片功能的实例

    先来看一个很简单的核心图片缩放方法: public static Bitmap scale(Bitmap bitmap, float scaleWidth, float scaleHeight) { int width = bitmap.getWidth(); int height = bitmap.getHeight(); Matrix matrix = new Matrix(); matrix.postScale(scaleWidth, scaleHeight); Log.i(TAG, "s

随机推荐