Android控件RefreshableView实现下拉刷新

2019-12-12 04:42:31

字体：大中小

来源：转载

供稿：网友

需求：自定义一个ViewGroup，实现可以下拉刷新的功能。下拉一定距离后（下拉时显示的界面可以自定义任何复杂的界面）释放手指可以回调刷新的功能，用户处理完刷新的内容后，可以调用方法onCompleteRefresh()通知刷新完毕，然后回归正常状态。效果如下：

源代码：RefreshableView（https://github.com/wangjiegulu/RefreshableView）

分析：

我们的目的是不管什么控件，只要在xml中外面包一层标签，那这个标签下面的所有子标签所在的控件都被支持可以下拉刷新了。所以，我们可以使用ViewGroup来实现，这里我选择的是继承LinearLayout，当然其他的（FrameLayout等）也一样了。

因为根据手指下滑，需要有一个刷新的view被显示出来，所以这里需要添加一个子view（称为refreshHeaderView），并放置在最顶部，使用LinearLayout的好处是可以设置为VERTICAL，这样可以直接“this.addView(refreshHeaderView, 0);”搞定了。然后就要根据手指滑动的距离，动态地去改变refreshHeaderView的高度。同时检测是否到达了可以刷新的高度了，如果达到了，更新当前的刷新状态。手指放开时，根据之前移动的刷新状态，执行刷新或者回归正常状态。

RefreshableView代码如下：

/** * 下拉刷新控件 * Author: wangjie * Email: tiantian.china.2@gmail.com * Date: 12/13/14. */public class RefreshableView extends LinearLayout {  private static final String TAG = RefreshableView.class.getSimpleName();  public RefreshableView(Context context) {    super(context);    init(context);  }  public RefreshableView(Context context, AttributeSet attrs) {    super(context, attrs);    TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.refreshableView);    for (int i = 0, len = a.length(); i < len; i++) {      int attrIndex = a.getIndex(i);      switch (attrIndex) {        case R.styleable.refreshableView_interceptAllMoveEvents:          interceptAllMoveEvents = a.getBoolean(i, false);          break;      }    }    a.recycle();    init(context);  }  public RefreshableView(Context context, AttributeSet attrs, int defStyle) {    super(context, attrs, defStyle);    init(context);  }  /**   * 刷新状态   */  public static final int STATE_REFRESH_NORMAL = 0x21;  public static final int STATE_REFRESH_NOT_ARRIVED = 0x22;  public static final int STATE_REFRESH_ARRIVED = 0x23;  public static final int STATE_REFRESHING = 0x24;  private int refreshState;  // 刷新状态监听  private RefreshableHelper refreshableHelper;  public void setRefreshableHelper(RefreshableHelper refreshableHelper) {    this.refreshableHelper = refreshableHelper;  }  private Context context;  /**   * 刷新的view   */  private View refreshHeaderView;  /**   * 刷新的view的真实高度   */  private int originRefreshHeight;  /**   * 有效下拉刷新需要达到的高度   */  private int refreshArrivedStateHeight;  /**   * 刷新时显示的高度   */  private int refreshingHeight;  /**   * 正常未刷新高度   */  private int refreshNormalHeight;  /**   * 默认不允许拦截（即，往子view传递事件），该属性只有在interceptAllMoveEvents为false的时候才有效   */  private boolean disallowIntercept = true;  /**   * xml中可设置它的值为false，表示不把移动的事件传递给子控件   */  private boolean interceptAllMoveEvents;  private void init(Context context) {    this.context = context;    this.setOrientation(VERTICAL);//    Log.d(TAG, "[init]originRefreshHeight: " + refreshHeaderView.getMeasuredHeight());  }  @Override  protected void onSizeChanged(int w, int h, int oldw, int oldh) {    super.onSizeChanged(w, h, oldw, oldh);    if (null != refreshableHelper) {      refreshHeaderView = refreshableHelper.onInitRefreshHeaderView();    }//    refreshHeaderView = LayoutInflater.from(context).inflate(R.layout.refresh_head, null);    if (null == refreshHeaderView) {      Log.e(TAG, "refreshHeaderView is null!");      return;    }    this.removeView(refreshHeaderView);    this.addView(refreshHeaderView, 0);    // 计算refreshHeadView尺寸    int width = View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED);    int expandSpec = View.MeasureSpec.makeMeasureSpec(Integer.MAX_VALUE >> 2, View.MeasureSpec.AT_MOST);    refreshHeaderView.measure(width, expandSpec);    Log.d(TAG, "[onSizeChanged]w: " + w + ", h: " + h);    Log.d(TAG, "[onSizeChanged]oldw: " + oldw + ", oldh: " + oldh);    Log.d(TAG, "[onSizeChanged]child counts: " + this.getChildCount());    originRefreshHeight = refreshHeaderView.getMeasuredHeight();    boolean isUseDefault = true;    if (null != refreshableHelper) {      isUseDefault = refreshableHelper.onInitRefreshHeight(originRefreshHeight);    }    // 初始化各个高度    if (isUseDefault) {      refreshArrivedStateHeight = originRefreshHeight;      refreshingHeight = originRefreshHeight;      refreshNormalHeight = 0;    }    Log.d(TAG, "[onSizeChanged]refreshHeaderView origin height: " + originRefreshHeight);    changeViewHeight(refreshHeaderView, refreshNormalHeight);    // 初始化为正常状态    setRefreshState(STATE_REFRESH_NORMAL);  }  @Override  public boolean dispatchTouchEvent(MotionEvent ev) {    Log.d(TAG, "[dispatchTouchEvent]ev action: " + ev.getAction());    return super.dispatchTouchEvent(ev);  }  @Override  public boolean onInterceptTouchEvent(MotionEvent ev) {    Log.d(TAG, "[onInterceptTouchEvent]ev action: " + ev.getAction());    if (!interceptAllMoveEvents) {      return !disallowIntercept;    }    // 如果设置了拦截所有move事件，即interceptAllMoveEvents为true    if (MotionEvent.ACTION_MOVE == ev.getAction()) {      return true;    }    return false;  }  @Override  public void requestDisallowInterceptTouchEvent(boolean disallowIntercept) {    if (this.disallowIntercept == disallowIntercept) {      return;    }    this.disallowIntercept = disallowIntercept;    super.requestDisallowInterceptTouchEvent(disallowIntercept);  }  private float downY = Float.MAX_VALUE;  @Override  public boolean onTouchEvent(MotionEvent event) {//    super.onTouchEvent(event);    Log.d(TAG, "[onTouchEvent]ev action: " + event.getAction());    switch (event.getAction()) {      case MotionEvent.ACTION_DOWN:        downY = event.getY();        Log.d(TAG, "Down --> downY: " + downY);        requestDisallowInterceptTouchEvent(true); // 保证事件可往下传递        break;      case MotionEvent.ACTION_MOVE:        float curY = event.getY();        float deltaY = curY - downY;        // 是否是有效的往下拖动事件（则需要显示加载header）        boolean isDropDownValidate = Float.MAX_VALUE != downY;        /**         * 修改拦截设置         * 如果是有效往下拖动事件，则事件需要在本ViewGroup中处理，所以需要拦截不往子控件传递，即不允许拦截设为false         * 如果是有效往下拖动事件，则事件传递给子控件处理，所以不需要拦截，并往子控件传递，即不允许拦截设为true         */        requestDisallowInterceptTouchEvent(!isDropDownValidate);        downY = curY;        Log.d(TAG, "Move --> deltaY(curY - downY): " + deltaY);        int curHeight = refreshHeaderView.getMeasuredHeight();        int exceptHeight = curHeight + (int) (deltaY / 2);        // 如果当前没有处在正在刷新状态，则更新刷新状态        if (STATE_REFRESHING != refreshState) {          if (curHeight >= refreshArrivedStateHeight) { // 达到可刷新状态            setRefreshState(STATE_REFRESH_ARRIVED);          } else { // 未达到可刷新状态            setRefreshState(STATE_REFRESH_NOT_ARRIVED);          }        }        if (isDropDownValidate) {          changeViewHeight(refreshHeaderView, Math.max(refreshNormalHeight, exceptHeight));        } else { // 防止从子控件修改拦截后引发的downY为Float.MAX_VALUE的问题          changeViewHeight(refreshHeaderView, Math.max(curHeight, exceptHeight));        }        break;      case MotionEvent.ACTION_UP:        downY = Float.MAX_VALUE;        Log.d(TAG, "Up --> downY: " + downY);        requestDisallowInterceptTouchEvent(true); // 保证事件可往下传递        // 如果是达到刷新状态，则设置正在刷新状态的高度        if (STATE_REFRESH_ARRIVED == refreshState) { // 达到了刷新的状态          startHeightAnimation(refreshHeaderView, refreshHeaderView.getMeasuredHeight(), refreshingHeight);          setRefreshState(STATE_REFRESHING);        } else if (STATE_REFRESHING == refreshState) { // 正在刷新的状态          startHeightAnimation(refreshHeaderView, refreshHeaderView.getMeasuredHeight(), refreshingHeight);        } else {          // 执行动画后回归正常状态          startHeightAnimation(refreshHeaderView, refreshHeaderView.getMeasuredHeight(), refreshNormalHeight, normalAnimatorListener);        }        break;      case MotionEvent.ACTION_CANCEL:        Log.d(TAG, "cancel");        break;    }    return true;  }  /**   * 刷新完毕后调用此方法   */  public void onCompleteRefresh() {    if (STATE_REFRESHING == refreshState) {      setRefreshState(STATE_REFRESH_NORMAL);      startHeightAnimation(refreshHeaderView, refreshHeaderView.getMeasuredHeight(), refreshNormalHeight);    }  }  /**   * 修改当前的刷新状态   *   * @param expectRefreshState   */  private void setRefreshState(int expectRefreshState) {    if (expectRefreshState != refreshState) {      refreshState = expectRefreshState;      if (null != refreshableHelper) {        refreshableHelper.onRefreshStateChanged(refreshHeaderView, refreshState);      }    }  }  /**   * 改变某控件的高度   *   * @param view   * @param height   */  private void changeViewHeight(View view, int height) {    Log.d(TAG, "[changeViewHeight]change Height: " + height);    ViewGroup.LayoutParams lp = view.getLayoutParams();    lp.height = height;    view.setLayoutParams(lp);  }  /**   * 改变某控件的高度动画   *   * @param view   * @param fromHeight   * @param toHeight   */  private void startHeightAnimation(final View view, int fromHeight, int toHeight) {    startHeightAnimation(view, fromHeight, toHeight, null);  }  private void startHeightAnimation(final View view, int fromHeight, int toHeight, Animator.AnimatorListener animatorListener) {    if (toHeight == view.getMeasuredHeight()) {      return;    }    ValueAnimator heightAnimator = ValueAnimator.ofInt(fromHeight, toHeight);    heightAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {      @Override      public void onAnimationUpdate(ValueAnimator valueAnimator) {        Integer value = (Integer) valueAnimator.getAnimatedValue();        if (null == value) return;        changeViewHeight(view, value);      }    });    if (null != animatorListener) {      heightAnimator.addListener(animatorListener);    }    heightAnimator.setInterpolator(new LinearInterpolator());    heightAnimator.setDuration(300/*ms*/);    heightAnimator.start();  }  AnimatorListenerAdapter normalAnimatorListener = new AnimatorListenerAdapter() {    @Override    public void onAnimationEnd(Animator animation) {      super.onAnimationEnd(animation);      setRefreshState(STATE_REFRESH_NORMAL); // 回归正常状态    }  };  public void setRefreshArrivedStateHeight(int refreshArrivedStateHeight) {    this.refreshArrivedStateHeight = refreshArrivedStateHeight;  }  public void setRefreshingHeight(int refreshingHeight) {    this.refreshingHeight = refreshingHeight;  }  public void setRefreshNormalHeight(int refreshNormalHeight) {    this.refreshNormalHeight = refreshNormalHeight;  }  public int getOriginRefreshHeight() {    return originRefreshHeight;  }

其中：

originRefreshHeight，表示头部刷新view的实际高度。

refreshArrivedStateHeight，表示下拉多少距离可以执行刷新了

refreshingHeight，表示刷新的时候显示的高度时多少

refreshNormalHeight，表示正常状态下refreshHeaderView显示的高度是多少

主要的核心代码应该是在onTouchEvent方法中，先简单分析里面的主要代码：在ACTION_DOWN的时候，纪录当前手指下落的y坐标，然后再ACTION_MOVE的时候，去计算滑动的距离，并且判断如果滑动的距离大于refreshArrivedStateHeight，更新处于已经达到可刷新的状态，反之就更新处于未达到可刷新的状态。然后再ACTION_UP中，如果已经达到了可刷新的状态，则更新当前状态为正在刷新状态，并且回调状态改变的方法。

如果里面有ScrollView等可以滚动的控件的时候，应该怎么处理里面的事件呢？

就以https://github.com/wangjiegulu/RefreshableView 为例

xml布局如下：

<com.wangjie.refreshableview.RefreshableView      xmlns:rv="http://schemas.android.com/apk/res/com.wangjie.refreshableview"      android:id="@+id/main_refresh_view"      android:layout_width="match_parent"      android:layout_height="match_parent"      rv:interceptAllMoveEvents="false"      >    <com.wangjie.refreshableview.NestScrollView android:layout_width="match_parent" android:layout_height="wrap_content"        android:fillViewport="true"        >      <TextView          android:id="@+id/main_tv"          android:layout_width="fill_parent"          android:layout_height="wrap_content"          android:gravity="center"          android:padding="20dp"          android:textSize="18sp"          android:text="Drop Down For Refresh/n/n/n/n/n/n/n/n/n/n/nDrop Down For Refresh/nDrop Down For Refresh/n/n/n/n/n/n/n/n/n/n/nDrop Down For Refresh/nDrop Down For Refresh/n/n/n/n/n/n/n/n/n/n/nDrop Down For Refresh/nDrop Down For Refresh/n/n/n/n/n/n/n/n/n/n/nDrop Down For Refresh"          />    </com.wangjie.refreshableview.NestScrollView>  </com.wangjie.refreshableview.RefreshableView>

如上，最外面是一个RefreshableView，然后里面是一个NestScrollView，NestScrollView里面是TextView，其中TextView中因为文字较多，所以使用NestScrollView来实现滚动（NestScrollView扩展自ScrollView，下面会讲到）。这个时候的逻辑应该是，当NestScrollView处于顶部的时候，手指向下滑动，这时这个touch事件应该交给RefreshableView处理；当手指向上滑动时，也就是ScrollView向下滚动，这时，需要把touch事件给RefreshableView来处理。

下面分析里面的代码：

RefreshableView的interceptAllMoveEvents表示是否需要RefreshableView阻止所有MOVE的事件（也就是说由RefreshableView自己处理所有MOVE事件），如果自控件中没有ScrollView等需要处理MOVE事件的控件，则可以设置为true；如果有类似ScrollView等控件，则需要设置为false，这样的话，RefreshableView会把MOVE事件传递给子类，由子类去处理。显然，现在例子中的情况是需要把interceptAllMoveEvents设置为false。设置的方法可以看上面的xml文件，使用rv:interceptAllMoveEvents="false"这个属性即可。

onInterceptTouchEvent()方法中，我们返回的是disallowIntercept，这个disallowIntercept是根据requestDisallowInterceptTouchEvent()方法的调用来动态变化的，这样可以做到切换touch事件的处理对象。

在手指落下的时候，先调用requestDisallowInterceptTouchEvent()方法，保证当前的事件可以正常往子控件传递，也就是现在的ScrollView。然后手指会开始移动，在ACTION_MOVE中，先计算出当前滑动的距离。

如果是有效往下拖动事件，则事件需要在RefreshableView中处理，所以需要拦截不往子控件传递，即不允许拦截设为false；如果不是有效往下拖动事件，则事件传递给子控件处理，所以不需要拦截，并往子控件传递，即不允许拦截设为true。

怎么去判断是否有效呢？根据downY，如果downY是原来的初始值Float.MAX_VALUE，说明，这个MOVE事件刚开始DOWN的时候是被子控件处理的，而不是RefreshableView处理的，说明对于RefreshableView来说，是一个无效的往下拖动事件；如果downY不是原来的初始值Float.MAX_VALUE，说明，这个MOVE事件在DOWN的时候就已经是RefreshableView处理的了，所以是有效的。

然后，计算refreshHeaderView的高度，根据滑动的差量对refreshHeaderView的高度进行变换。

如果当前的状态是正在刷新，那MOVE事件直接无效。

否则，再去判断当前的高度是不是达到了可刷新状态，或者没有达到可刷新状态，更新状态值。

在UP的时候，还是先保证事件往下传递。并重置downY。然后根据当前的状态，如果达到了刷新的状态，则开始刷新，并更新当前的额状态时正在刷新状态；如果没有达到刷新状态，则执行动画返回到正常状态；如果本来就是正在刷新状态，也执行动画回归到正在刷新的高度。

然后分析下NestScrollView：

/** * Author: wangjie * Email: tiantian.china.2@gmail.com * Date: 12/13/14. */public class NestScrollView extends ScrollView {  private static final String TAG = NestScrollView.class.getSimpleName();  public NestScrollView(Context context) {    super(context);  }  public NestScrollView(Context context, AttributeSet attrs) {    super(context, attrs);  }  public NestScrollView(Context context, AttributeSet attrs, int defStyle) {    super(context, attrs, defStyle);  }  @Override  public boolean dispatchTouchEvent(MotionEvent ev) {    Log.d(TAG, "___[dispatchTouchEvent]ev action: " + ev.getAction());    return super.dispatchTouchEvent(ev);  }  @Override  public boolean onInterceptTouchEvent(MotionEvent ev) {    super.onInterceptTouchEvent(ev);    Log.d(TAG, "___[onInterceptTouchEvent]ev action: " + ev.getAction());    if (MotionEvent.ACTION_MOVE == ev.getAction()) {      return true;    }    return false;  }  float lastDownY;  @Override  public boolean onTouchEvent(MotionEvent event) {    super.onTouchEvent(event);    switch (event.getAction()) {      case MotionEvent.ACTION_DOWN:        lastDownY = event.getY();        parentRequestDisallowInterceptTouchEvent(true); // 保证事件可往下传递        Log.d(TAG, "___Down");        return true;//        break;      case MotionEvent.ACTION_MOVE:        Log.d(TAG, "___move, this.getScrollY(): " + this.getScrollY());        boolean isTop = event.getY() - lastDownY > 0 && this.getScrollY() == 0;        if (isTop) { // 允许父控件拦截，即不允许父控件拦截设为false          parentRequestDisallowInterceptTouchEvent(false);          return false;        } else { // 不允许父控件拦截，即不允许父控件拦截设为true          parentRequestDisallowInterceptTouchEvent(true);          return true;        }//        break;      case MotionEvent.ACTION_UP:        Log.d(TAG, "___up, this.getScrollY(): " + this.getScrollY());        parentRequestDisallowInterceptTouchEvent(true); // 保证事件可往下传递        break;      case MotionEvent.ACTION_CANCEL:        Log.d(TAG, "___cancel");        break;    }    return false;  }  /**   * 是否允许父控件拦截事件   * @param disallowIntercept   */  private void parentRequestDisallowInterceptTouchEvent(boolean disallowIntercept) {    ViewParent vp = getParent();    if (null == vp) {      return;    }    vp.requestDisallowInterceptTouchEvent(disallowIntercept);  }}

如上所示，也需要重写onInterceptTouchEvent()方法，它需要把除了MOVE事件外的所有事件传递下去，这样最里面的TextView才有OnClick等事件。

在onTouchEvent方法中，在ACTION_DOWN的时候，先纪录down的y坐标，然后保证parent（即，RefreshableView）的事件可以传递过来，所以需要调用getParent().requestDisallowInterceptTouchEvent()方法。因为下拉刷新只能发生在ScrollView滚动条在顶部的时候，所以在MOVE中，如果当前状态在顶部，那就需要让父控件（RefreshableView）拦截，然后直接返回false，让当前的事件传递到RefreshableView中的onTouchEvent方法中处理。如果不是在top，那就屏蔽调用父控件（RefreshableView）的处理，直接自己处理。最后在UP的时候再确保事件可以传递到ScrollView这里来。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：Android 实现界面刷新的几种方法

下一篇：Android ReboundScrollView仿IOS拖拽回弹效果