Android PullToRefreshView自定义下拉刷新控件

MyPullToRefreshView继承自LinearLayout，布局为vertical，该容器中包含三个子view，这三个view从上到下依次排列在LinearLayout中。

效果图如下：

下图中蓝色部分是充满屏幕的，HeaderView在ListView的上方，在代码中动态添加进来，使其底部Y轴坐标刚好为0，FooterView在ListView的下方，也在代码中动态添加进来，该View的TopMargin刚好为整个布局的高度。

首先看一下该控件的使用：

1.在xml中配置

<span style="font-size:14px;"><com.example.testpulltorefreshview.PullToRefreshView 
        android:id="@+id/my_pull_to_refresh_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <ListView
            android:id="@+id/listView" 
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </ListView>
</com.example.testpulltorefreshview.PullToRefreshView></span>

<span style="font-size:14px;">ListView list=(ListView)findViewById(R.id.listView);
list.setAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,new String[]{"sss"}));</span>

在代码中动态添加HeaderView时，需要首先测量HeaderView的高度h，因为我们要是其TopMargin设置为0-h，这样才能使得HeaderView的底部刚好Y轴坐标为0。同理，FooterView的topMargin应该设置为整个控件的高度getHeight。为了简化添加FooterView的处理，只需使ListView充满整个控件后再添加FooterView。

在构造函数中强制设置LinearLayout排列方法为vertical，然后在构造函数中添加HeaderView，因为此时ListView还未被添加进来。

<span style="font-size:14px;">public MyPullToRefreshView(Context context,AttributeSet attrs){
  super(context,attrs);
  mContext=context;
  this.setOrientation(LinearLayout.VERTICAL);//强制设置控件的排列方向为vertical
  init();
}</span>

<span style="font-size:14px;">public void init(){
  inflater=LayoutInflater.from(mContext);
  ...
  此时创建动画资源，后面添加
  ...
  addHeaderView();
}</span>

<span style="font-size:14px;">public void addHeaderView(){
  mHeaderView=inflater.inflate(R.layout.refresh_header,this,false);
  ...
  执行findViewById，初始化layout中的View实例
  ...
  measureView(mHeaderView);//测量HeaderView的高度
  mHeaderHeight=mHeaderView.getMeasuredHeight();//获得测量的HeaderView高度
  LayoutParams params=new LayoutInflater(LayoutParams.MATCH_PARENT,mHeaderHeight);//创建HeaderView的布局参数LayoutParams
  params.topMargin=-mHeaderHeight;//设置HeaderView的topMargin为-mHeaderHeight，这样HeaderView的底部Y轴坐标为0。
  addView(mHeaderView,params);
}</span>

<span style="font-size:14px;"><?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/rv_pull_to_refresh_header"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingTop="8dp"
    android:paddingBottom="5dp">"
    
    <ImageView 
        android:id="@+id/iv_arrow"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_marginLeft="60dp"
        android:contentDescription="@string/app_name"
        android:src="@drawable/arrow_up"/>
    
    <ProgressBar
        android:id="@+id/pull_to_refresh_progress"
        style="?android:attr/progressBarStyleInverse"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="60dp"
        android:indeterminate="true"
        android:visibility="gone"/>

    <TextView
        android:id="@+id/tv_state"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_centerHorizontal="true"
        android:text="@string/pull_to_refresh" />

    <TextView
        android:id="@+id/tv_date"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/tv_state"
        android:layout_below="@+id/tv_state"
        android:text="更新于。。。。" 
        android:visibility="gone"/>

</RelativeLayout></span>

<span style="font-size:14px;"><RelativeLayout
   android:layout_width=match_parent
   android:layout_height="20dp"
   ...>
...
</RelativeLayout></span>

<span style="font-size:14px;"><RelativeLayout
   android:layout_width=match_parent
   android:layout_height="wrap_content"
   ...>
...
</RelativeLayout></span>

<span style="font-size:14px;">public void measureView(View child){
  ViewGroup.LayoutParams params=child.getLayoutParams();
  if(params==null){
    params=new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,ViewGroup.LayoutParams.WRAP_CONTENT);
  }
  //如果params的值不是具体的dp值，那么等价于MeasureSpec.makeMeasureSpec(0,MeasureSpec.UNSPECIFIED),如果params为具体的dp值，那么等价于MeasureSpec.makeMeasureSpec(dp值，MesureSpec.EXACTLY)
  int widthMeasureSpec=getChildMeasureSpec(0,0+0,params.width);
  int heightMeasureSpec;
  if(params.height>0){//为具体的dp值
    heightMeasureSpec=MeasureSpec.makeMeasureSpec(params.height,MeasureSpec.EXACTLY);
  }
  else{
    heightMeasureSpec=MeasureSpec.makeMeasureSpec(0,MeasureSpec.UNSPECIFIED);
  }
  child.measure(widthMeasureSpec,heightMeasureSpec);
}</span>

<span style="font-size:14px;">@Override
protected void onFinishInflate(){
  super.onFinishInflate();
  addFooterView();
  initContentAdapterView();
}
public void addFooterView(){
  mFooterView=inflater.inflate(R.layout.refresh_footer,this,false);
  ...
  实例化view变量
  ...
  measureView(mFooterView);
  mFooterHeight=mFooterView.getMeasuredHeight();
  LayoutParams params=new LayoutParams(LayoutParams.MATCH_PARENT,mFooterHeight);
  addFooterView(mFooterView,params);
}</span>

上面完成了控件中View的添加和布局，下面需要实现整个控件的触摸分发模块了。

下面先简单总结Android的触摸分发机制。
public boolean dispatchTouchEvent(MotionEvent ev)    分发触摸
public boolean onInterceptTouchEvent(MotionEvent ev) 拦截触摸
public boolean onTouchEvent(MotionEvent ev)          处理触摸

ViewGroup包含以上三个函数，Activity和View只包含dispatchTouchEvent和onTouchEvent两个函数。触摸事件的分发是从Activity开始的，再到ViewGroup，ViewGroup在向下传到View中。

<span style="font-size:14px;">//Activity.java
public boolean dispatchTouchEvent(MotionEvent ev){
  if(ev.getAction()==MotionEvent.ACTION_DOWN){
    onUserInteraction();//该方法内部是空的，当每次传入触摸事件Action_down时，都会调用该方法，后续的action_move和action_up不会调用该方法。我们可以重载该方法
  }
  if(getWindow().superDispatchTouchEvent(ev)){
     return true;
  }
  return onTouchEvent(ev);
}</span>

<span style="font-size:14px;">//View.java
public boolean dispatchTouchEvent(MotionEvent event){
  ...
  if(li!=null && li.mOnTouchListener!=null &&...&& li.mOnTouchListener.onTouch(this,event)){
    result=true;
  }
  if(!result && onTouchEvent(event)){
    result=true;
  }
  ...
}</span>

我们现在需要先分析清楚在什么情况下需要拦截触摸，不让触摸传递子View中。

1.滑动位移过小，小于5，那么不会拦截触摸。

2.当ListView未被滑到最顶端或最底端的情况下，是不需要拦截触摸的，这时要让ListView可以自由滑动。

3.当ListView被滑动到最顶端，并且继续滑动的方向是向下的，那么就需要拦截触摸，然后在ViewGroup的onTouchEvent中使HeaderView向下移动。

4.当Listview被滑动到最底端，并且继续滑动的方向是向上的，那么就需要拦截触摸，然后在VrewGroup的onTouchEvent中使FooterView向上移动。

在这里我们要讨论一下填充控件的滑动视图ListView和ScrollView。

<span style="font-size:14px;">private AdapterView<?> mAdapterView;
private ScrollView mSrollView;</span>

<span style="font-size:14px;">@Override
protected void onFinishInflate(){
  ...
  int childCount=this.getChildCount();
  if(childCount<3){
	//IllegalArgumentException继承自RuntimeException
	throw new IllegalArgumentException("this layout must contain 3 child views,and AdapterView or"
				+ " ScrollView must in the second position! ");
    }
    //instanceof是一个二元操作符，作用是判断操作符左侧的对象是否是右侧的类的实例
	if(this.getChildAt(1) instanceof AdapterView<?>){
		mAdapterView=(AdapterView<?>) this.getChildAt(1);
	}
	else if(this.getChildAt(1) instanceof ScrollView){
		mScrollView=(ScrollView) this.getChildAt(1);
	}
	if(mAdapterView==null && mScrollView==null){
		throw new IllegalArgumentException("must contain a AdapterView or ScrollView in the layout");
	}
}</span>

<span style="font-size:14px;">public boolean onInterceptTouchEvent(MotionEvent event){
  int y=(int)e.getRawY();                       //getRawX/getRawY是相对于屏幕的绝对距离，getX/getY是相对于View的相对距离
  switch(e.getAction){
  case MotionEvent.ACTION_DOWN:
     mLastActionDown=y;                         //mLastActionDown记录了上一次ACTION_DOWN的Y轴值
     break;
  case MotionEvent.ACTION_MOVE:
     int delta=y-mLastActionDown;
	 if(delta>=-5 && delta<=5){return false;}   //滑动位移过小，不消费该触摸
	 if(isRefreshViewScroll(delta)){            //在isRefreshViewSrcoll函数中判断是否符合上述情况：ListView已滑到最顶端或最底端
	   return true;
	 }
     break;
  case MotionEvent.ACTION_UP:
  case MotionEvent.ACTION_CANCEL:
     break;
  }
  return false;
}</span>

       1.下拉时HeaderView未完全显示出来，此时释放不会导致刷新；

        2.下拉时HeaderView已完全显示出来，此时释放会导致刷新；

         3.释放，正在刷新。

在滑动方向上又分下拉刷新和上拉加载两种。

private static int PULL_DOWN_STATE=0;  //两种方向

private static int PULL_UP_STATE=1;

pribate int mPullState;//当前滑动的方向

private static int PULL_TO_REFRESH=2;//滑动时状态

private static int RELEASE_TO_REFRESH=3;

private static int REFRESHING=4;

private int mHeaderState;//Headerview当前的状态

private int mFooterState;//FooterView当前的状态

<span style="font-size:14px;">boolean isRefreshViewScroll(int delta){
  if(mHeaderState==REFRESHING || mFooterState==REFRESHING){
     return false;  //正在刷新时是否可以滑动控件识实际情况而定。
  }
  if(delta>0){
     mPullState=PULL_DOWN_STATE;
  }else{
     mPullState=PULL_UP_STATE;
  }
  if(mAdapterView!=NULL){
    if(delta>0){
	   View child=mAdapterView.getChildAt(0);
	   if(child==null){
	     //listview中无数据，不拦截
		 return false;
	   }
	   if(child.getTop()==0 && mAdapterView.getFirstVisiblePosition()==0){
	     mPullState=PULL_DOWN_STATE;
		 return ture;
	   }
	   //如果设置了ListView的padding或item的top，在此处添加对其的处理
	}
	else if(delta<0){
		View lastChild=mAdapterView.getChildAt(mAdapterView.getChildCount()-1);
        if(lastChild==null){
		   return false;
		}
		if(lastChild.getBottom()<=getHeight() mAdapterView.getLastVisiblePosition()==mAdapterView.getChildCount()-1){
		   mPullState=PULL_UP_STATE;
		   return true;
		}
		//如果设置了ListView的padding或item的bottom，在此处添加对其的处理
	}
  }
  if(mScrollView!=null){
     if(delta>0 && mScrollView.getScrollY()==0){
	   mPullState=PULL_UP_STATE;
	   return true;
	 }
	 else if(delta<0 && mScrollView.getScrollY<=getHeight()-mScrollView.getChildAt(0).getHeight()){
	   mPullState=PULL_DOWN_STATE;
	   return true;
	 }
  }
  return false;
}</span>

<span style="font-size:14px;">@Override
public boolean onTouchEvent(MotionEvent event){
  int y=event.getRawY();
  switch(event.getAction()){
  case MotionEvent.ACTION_DOWN:
      //在onInterceptTouchEvent中已经记录
      break;
  case MotionEvent.ACTION_MOVE:
      int delta=y-mLastActionDown;
	  if(mPullState==PULL_DOWN_STATE){
	     headerPrepareToRefresh(delta);
	  }
	  else if(mPullState==PULL_UP_STATE){
	     footerPrepareToRefresh(delta)	  
	  }
	  mLastActionDown=y;
      break;
  case MotionEvent.ACTION_UP:
  case MotionEvent.ACTION_CANCEL:
      .....
      break;
  }
}</span>

首先来看一下如何改变HeaderView或FooterView的位置。

<span style="font-size:14px;">public int changingHeaderViewTopMargin(int delta){
    LayoutParams params=(LayoutParams)mHeaderView.getLayoutParams();
	int newTopMargin=(int) (params.topMargin+deltaY*0.6);
	params.topMargin=newTopMargin;
	mHeaderView.setLayoutParams(params);
	invalidate();
	return newTopMargin;
}</span>

当HeaderView完全显示出来后要将Headerview中的箭头旋转向上，此时通过旋转动画RotateAnimation来实现。

我们在构造函数中调用init来初始化动画资源。

<span style="font-size:14px;">public void init(){
	inflater=LayoutInflater.from(mContext);
	mFlipAnimation=new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
	mFlipAnimation.setInterpolator(new LinearInterpolator());
	mFlipAnimation.setDuration(250);
	mFlipAnimation.setFillAfter(true);//这样动画播放完会停留在最后一帧
	mReverseFlipAnimation=new RotateAnimation(180,0,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
	mReverseFlipAnimation.setInterpolator(new LinearInterpolator());
	mReverseFlipAnimation.setDuration(250);
	mReverseFlipAnimation.setFillAfter(true);
	addHeaderView();//在构造函数中addView，可以保证是第一个添加到LinearLayout中的，此时xml中设置的子View还未被添加到LinearLayout中
}

public void headerPrepareToRefresh(int delta){
	int newTopMargin=changingHeaderViewTopMargin(delta);
	//根据newTopMargin的值判断是否播放动画
	if(newTopMargin>=0 && mHeaderState!=RELEASE_TO_REFRESH){
		mHeaderText.setText("释放完成刷新");
		mHeaderImage.clearAnimation();
		mHeaderImage.startAnimation(mFlipAnimation);
		mHeaderState=RELEASE_TO_REFRESH;
	}else if(newTopMargin<0 && mHeaderState!=PULL_TO_REFRESH){
		mHeaderText.setText("下拉刷新");
		mHeaderImage.clearAnimation();
		mHeaderImage.startAnimation(mReverseFlipAnimation);
		mHeaderState=PULL_TO_REFRESH;
	}
}
public void footerPrepareToRefresh(int delta){
	int newTopMargin=changingHeaderViewTopMargin(delta);
	//根据newTopMargin的值判断是否播放动画
	if(Math.abs(newTopMargin)>=(mHeaderHeight+mFooterHeight) && mFooterState!=RELEASE_TO_REFRESH){
		mFooterText.setText("释放完成刷新");
		mFooterState=RELEASE_TO_REFRESH;
	}
	else if(Math.abs(newTopMargin)<(mHeaderHeight+mFooterHeight) && mFooterState!=PULL_TO_REFRESH){
		mFooterText.setText("上拉刷新");
		mFooterState=PULL_TO_REFRESH;
	}
}</span>

<span style="font-size:14px;">@Override
public boolean onTouchEvent(MotionEvent event){
  int y=event.getRawY();
  switch(event.getAction()){
  case MotionEvent.ACTION_DOWN:
      //在onInterceptTouchEvent中已经记录
      break;
  case MotionEvent.ACTION_MOVE:
      ....
      break;
  case MotionEvent.ACTION_UP:
  case MotionEvent.ACTION_CANCEL:
      //首先要通过TopMargin来查看HeaderView或FooterView是否显示完全了，否则不刷新
	  int topMargin=mHeaderView.getTopMargin();
	  if(topMargin>0 && mPullState==PULL_DOWN_STATE){
	     onHeaderRefreshing();
	  }
	  else if(topMargin<-mHeaderHeight-mFooterHeight && mPullState==PULL_UP_STATE){
	     onFooterRefreshing();
	  }else{
	     mHeaderView.setTopMargin(-mHeaderHeight);//不刷新
	  }
      break;
  }
}</span>

<span style="font-size:14px;">public void onHeaderRefreshing(){
	mHeaderState=REFRESHING;
	setHeaderTopMargin(0);
	mHeaderImage.setVisibility(View.GONE);
	mHeaderImage.clearAnimation();
	mHeaderProgress.setVisibility(View.VISIBLE);
	mHeaderText.setText("正在刷新...");
	if(mOnHeaderViewListener!=null){
		mOnHeaderViewListener.onHeaderRefreshing(this);
	}
}
	
public void onFooterRefreshing(){
	mFooterState=REFRESHING;
	setHeaderTopMargin(-mHeaderHeight-mFooterHeight);
	mFooterImage.setVisibility(View.GONE);
	mFooterImage.clearAnimation();
	mFooterProgress.setVisibility(View.VISIBLE);
	mFooterText.setText("正在加载中...");
	if(mOnFooterViewListener!=null){
		mOnFooterViewListener.onFooterRefreshing(this);
	}
}</span>

我们的下拉刷新控件是观察者模式中的主题，当在下拉和上拉释放时会通知观察者。观察者会进行一些耗时处理，然后回调主题，通知其完成刷新。

1.创建接口类（该接口类可以作为控件的内部类）

<span style="font-size:14px;">interface OnHeaderViewListener{
   public void onHeaderRefreshing(MyPullToRefreshView v);
}
interface OnFooterViewListener{
   public void onFooterRefreshing(MyPullToRefreshView v);
}</span>

<span style="font-size:14px;">        //首先创建保存监听器（观察者）的变量
	private OnHeaderViewListener mOnHeaderViewListener;
	private OnFooterViewListener mOnFooterViewListener;
	//外界可通过该函数来添加观察者
	public void setOnHeaderViewListenr(OnHeaderViewListener listener){
	   mOnHeaderViewListener=listener;
	}
	public void setOnFooterViewListener(OnFooterViewListener listener){
	   mOnFooterViewListener=listener;
	}</span>

<span style="font-size:14px;">if(mOnHeaderViewListener!=null){
	   mOnHeaderViewListener.onHeaderRefreshing(this);//将事件源封装在参数中，传给外界，让外界完成耗时任务后回调MyPullToRefreshView.onRefreshComplete结束刷新。
	}
	if(mOnFooterViewListener!=null){
	   mOnFooterViewListener.OnFooterViewListener(this);
	}</span>

<span style="font-size:14px;">public void onHeaderRefreshComplete() { // 完成刷新
	setHeaderTopMargin(-mHeaderViewHeight);
	mHeaderImage.setVisibility(View.VISIBLE);
	mHeaderImage.setImageResource(R.drawable.ic_pulltorefresh_arrow);
	mHeaderText.setText(R.string.pull_to_refresh_pull_label);
	mHeaderProgressBar.setVisibility(View.GONE);
	mHeaderState = PULL_TO_REFRESH;
	if (mScrollView != null) {
		mScrollView.smoothScrollTo(0, 0);
	}
}
public void onFooterRefreshComplete() {
	setHeaderTopMargin(-mHeaderViewHeight);
	mFooterImage.setVisibility(View.VISIBLE);
	mFooterImage.setImageResource(R.drawable.icon_host_pull);
	mFooterText.setText(R.string.pull_to_refresh_footer_pull_label);
	mFooterProgressBar.setVisibility(View.GONE);
	mFooterState = PULL_TO_REFRESH;
}</span>

<span style="font-size:14px;">public class MainActivity extends Activity implements OnFooterViewListener,OnHeaderViewListener {
	
	private MyPullToRefreshView mPullToRefreshView;
	private ListView mListView;
	private ArrayAdapter<String> arrayAdapter;
	private String[] strs={"1111","2222","3333"};
	
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		init();
	}
	
	public void init(){
		mPullToRefreshView=(MyPullToRefreshView)findViewById(R.id.my_pull_to_refresh_view);
		mListView=(ListView)findViewById(R.id.listView);
		arrayAdapter=new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,strs);
		mListView.setAdapter(arrayAdapter);
		mPullToRefreshView.setOnHeaderViewListener(this);
		mPullToRefreshView.setOnFooterViewListener(this);
	}

	@Override
	public void onFooterRefreshing(final MyPullToRefreshView v) {
		//向UI的消息队列中投递一个runnable,投递成功返回true，并不代表runnable成功执行，looper可能退出导致runnable被丢弃
		v.postDelayed(new Runnable(){
			@Override
			public void run() {
				try {
					Thread.sleep(3000);
					v.onFooterRefreshComplete();
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
			}
		}, 0);
	}

	@Override
	public void onHeaderRefreshing(final MyPullToRefreshView v) {
		v.postDelayed(new Runnable(){
			@Override
			public void run(){
				try {
					Thread.sleep(3000);
					v.onHeaderRefreshComplete();
				} catch (InterruptedException e) {
					e.printStackTrace();
				}
			}
		},0);
	}

}</span>