Android下拉刷新控件RefreshableView的实现

版权所有,禁止匿名转载;禁止商业使用。

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

 refreshable_a.png    refreshable_b.png

 refreshable_c.png   refreshable_d.png

源代码: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这里来。

 

0 0