Android ScrollView的顶部下拉和底部上拉回弹效果

要实现ScrollView的回弹效果,需要对其进行触摸事件处理。先来看一下简单的效果:

根据Android的View事件分发处理机制,下面对dispatchTouchEvent进行详细分析:

在加载布局完成之后,获取ScrollView的第一个子元素,保存它的参数,left top right bottom参数,根据顶部下拉操作和底部上拉操作进行子View的布局参数根据滑动距离改变,ACTION_UP的时候判断是否存在回弹,如果需要则进行动画回弹到原来的位置,可以添加一个回弹结束监听,比如监听回弹处理跳转到其他的页面的操作等。

具体的实现如下,添加了是否禁用顶部和底部回弹的参数设置,以及回弹效果结束监听。

/**
 * A Simple Rebound ScrollView
 * @author Denluoyia
 */
public class ReboundScrollView extends ScrollView{

  private boolean mEnableTopRebound = true;
  private boolean mEnableBottomRebound = true;
  private OnReboundEndListener mOnReboundEndListener;
  private View mContentView;
  private Rect mRect = new Rect();

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

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

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

  /** after inflating view, we can get the width and height of view */
  @Override
  protected void onFinishInflate() {
    super.onFinishInflate();
    mContentView = getChildAt(0);
  }

  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    if (mContentView == null) return;
    // to remember the location of mContentView
    mRect.set(mContentView.getLeft(), mContentView.getTop(), mContentView.getRight(), mContentView.getBottom());
  }

  public ReboundScrollView setOnReboundEndListener(OnReboundEndListener onReboundEndListener){
    this.mOnReboundEndListener = onReboundEndListener;
    return this;

  }

  public ReboundScrollView setEnableTopRebound(boolean enableTopRebound){
    this.mEnableTopRebound = enableTopRebound;
    return this;
  }

  public ReboundScrollView setEnableBottomRebound(boolean mEnableBottomRebound){
    this.mEnableBottomRebound = mEnableBottomRebound;
    return this;
  }

  private int lastY;
  private boolean rebound = false;
  private int reboundDirection = 0; //<0 表示下部回弹 >0 表示上部回弹 0表示不回弹

  @Override
  public boolean dispatchTouchEvent(MotionEvent ev) {
    if (mContentView == null){
      return super.dispatchTouchEvent(ev);
    }
    switch (ev.getAction()){
      case MotionEvent.ACTION_DOWN:
        lastY = (int) ev.getY();
        break;

      case MotionEvent.ACTION_MOVE:
        if (!isScrollToTop() && !isScrollToBottom()){
          lastY = (int) ev.getY();
          break;
        }
        //处于顶部或者底部
        int deltaY = (int) (ev.getY() - lastY);
        //deltaY > 0 下拉 deltaY < 0 上拉

        //disable top or bottom rebound
        if ((!mEnableTopRebound && deltaY > 0) || (!mEnableBottomRebound && deltaY < 0)){
          break;
        }

        int offset = (int) (deltaY * 0.48);
        mContentView.layout(mRect.left, mRect.top + offset, mRect.right, mRect.bottom + offset);
        rebound = true;
        break;

      case MotionEvent.ACTION_UP:
        if (!rebound) break;
        reboundDirection = mContentView.getTop() - mRect.top;
        TranslateAnimation animation = new TranslateAnimation(0, 0, mContentView.getTop(), mRect.top);
        animation.setDuration(300);
        animation.setAnimationListener(new Animation.AnimationListener() {
          @Override
          public void onAnimationStart(Animation animation) {

          }

          @Override
          public void onAnimationEnd(Animation animation) {
            if (mOnReboundEndListener != null){
              if (reboundDirection > 0){
                mOnReboundEndListener.onReboundTopComplete();
              }
              if (reboundDirection < 0){
                mOnReboundEndListener.onReboundBottomComplete();
              }
              reboundDirection = 0;
            }
          }

          @Override
          public void onAnimationRepeat(Animation animation) {

          }
        });
        mContentView.startAnimation(animation);
        mContentView.layout(mRect.left, mRect.top, mRect.right, mRect.bottom);
        rebound = false;
        break;
    }
    return super.dispatchTouchEvent(ev);
  }

  @Override
  public void setFillViewport(boolean fillViewport) {
    super.setFillViewport(true); //默认是填充ScrollView 或者再XML布局文件中设置fillViewport属性
  }

  /**
   * 判断当前ScrollView是否处于顶部
   */
  private boolean isScrollToTop(){
    return getScrollY() == 0;
  }

  /**
   * 判断当前ScrollView是否已滑到底部
   */
  private boolean isScrollToBottom(){
    return mContentView.getHeight() <= getHeight() + getScrollY();
  }

  /**
   * listener for top and bottom rebound
   * do your implement in the following methods
   */
  public interface OnReboundEndListener{

    void onReboundTopComplete();

    void onReboundBottomComplete();
  }
}

使用:

直接在XML布局文件中把ScrollView替换成ReboundScrollView就可以了。还可以拓展把回弹顶部和底部添加其他的动画效果(之后再拓展试下)。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:tools="http://schemas.android.com/tools"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical"
  tools:context=".TestActivity">

  <com.denluoyia.dtils.widget.ReboundScrollView
    android:id="@+id/reboundScrollView"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:background="#eefade"
      android:padding="16dp">

      <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="15sp"
        android:lineSpacingExtra="5dp"
        android:text="@string/content"/>
    </LinearLayout>
  </com.denluoyia.dtils.widget.ReboundScrollView>

</LinearLayout>

如果需要禁用回弹,可以直接设置enableTopRebound和enableBottomRebound参数,同样设置回弹结束(或开始)监听。

 public class TestActivity extends AppCompatActivity {

  private ReboundScrollView reboundScrollView;

  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_test);

    reboundScrollView = findViewById(R.id.reboundScrollView);
    //reboundScrollView.setEnableTopRebound(false);
    //reboundScrollView.setEnableBottomRebound(false);
    reboundScrollView.setOnReboundEndListener(new ReboundScrollView.OnReboundEndListener() {
      @Override
      public void onReboundTopComplete() {
        Toast.makeText(TestActivity.this, "顶部回弹", Toast.LENGTH_SHORT).show();
      }

      @Override
      public void onReboundBottomComplete() {
        Toast.makeText(TestActivity.this, "底部回弹", Toast.LENGTH_SHORT).show();
      }
    });
  }
}

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

(0)

相关推荐

  • Android 实现ViewPager边界回弹效果实例代码

    废话不多说了,直接给大家贴代码了,具体代码如下所示: public class BounceBackViewPager extends ViewPager { private int currentPosition = 0; private Rect mRect = new Rect();//用来记录初始位置 private boolean handleDefault = true; private float preX = 0f; private static final float RATI

  • Android仿IOS回弹效果 支持任何控件

    本文实例为大家分享了Android仿IOS回弹效果的具体代码,供大家参考,具体内容如下 效果图: 导入依赖: dependencies { // ... compile 'me.everything:overscroll-decor-android:1.0.4' } RecyclerView 支持线性布局和网格布局管理器(即所有原生Android布局).可以轻松适应支持自定义布局管理器. RecyclerView recyclerView = (RecyclerView) findViewByI

  • Android自定义控件仿ios下拉回弹效果

    网上有很多类似的文章,大多数还是继承listview来实现(主要是listview.addHeaderView()和listview.addFooterView在listview的首尾添加view,也可以用上面的两个listview自带函数实现下拉刷新的功能,在这里不准备介绍,有兴趣的朋友可以去自己试试). 在本文主要是给android的线性布局(相对布局.帧布局)加上下拉或者上拉回弹得效果.在ios中我们经常能看到,在一个页面中即使是只有一个控件,这一个控件只占整个页面的1/10不到,但是当我

  • Android ReboundScrollView仿IOS拖拽回弹效果

    初衷: 其实github上有很多这种ScrollView的项目,但是不得不说功能太多太乱了,我就只是想要一个简单效果的ScrollView,另外监听下滑动距离而已,想想还是自己写了个. 这里先说下思路吧,如果不愿意看的朋友可以直接跳过这一步,看下面的代码: Android 原生的ScrollView是不支持拉出屏幕外,并且也没有回弹效果的,用户友好度却不不太好,不知道为什么不那么设计. 我想做的事情正如上面所述: 1.希望能拉出屏幕外 2.松手后希望控件回弹 我的思路是对ScrollView的子

  • Android编程ViewPager回弹效果实例分析

    本文实例讲述了Android编程ViewPager回弹效果.分享给大家供大家参考,具体如下: 其实在我们很多应用中都看到当ViewPager滑到第一页或者最后一页的时候,如果再滑动的时候,就会有一个缓冲的过程,也就是回弹效果.之前在研究回弹效果的时候,也顺便实现了ViewPager的回弹效果,其实也很简单,一下是实现代码,注释比较少: package com.freesonfish.viewpager_2; import android.content.Context; import andro

  • Android界面上拉下拉的回弹效果实例代码

    废话不多说,具体代码如下所示: public class MyScrollView extends ScrollView { private View childView; public MyScrollView(Context context) { super(context); } public MyScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public MyScrollView(Co

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

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

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

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

  • Android RecyclerView上拉加载更多功能回弹实现代码

    实现原理是使用RecyclerView的OnTouchListener方法监听滑动 在adapter里面增加两项footview 其中date.size为显示的加载条,可以自定义,date.size+1为空白的View,我们设置其高度为0 我们通过LinearLayoutManager的 findLastVisibleItemPosition判断显示的最后一条数据,如果是空白view,表示加载条已经完全展示,松开即可刷新. 回弹效果是通过在滑动时动态改变空白view的高度,达到阻尼效果 ,回弹时

  • android仿QQ个人主页下拉回弹效果

    先看效果: 效果不错吧! 进入主题之前,先了解ImageView的scaleType的center_crop,网络上说的已经很清楚了 : 以下抄自网络: 1.Android:scaleType="centerCrop" 以填满整个ImageView为目的,将原图的中心对准ImageView的中心,等比例放大原图,直到填满ImageView为止(指的是ImageView的宽和高都要填满),原图超过ImageView的部分作裁剪处理. 均衡的缩放图像(保持图像原始比例),使图片的两个坐标(

  • Android ScrollView实现横向和竖向拖动回弹效果

    本文实例为大家分享了Android ScrollView实现拖动回弹效果的具体代码,供大家参考,具体内容如下 原理 在android2.3版本中,View类中新增了一个方法:overScrollBy.通过覆盖该方法,就可以达到阻尼回弹的效果. 示例1.竖向滚动 public class ReboundScrollView extends ScrollView{ private static final int MAX_SCROLL = 200; private static final floa

随机推荐