listView下拉刷新(仿sina微博Android客户端效果)

  这个下拉效果在网上最早的例子恐怕就是Johan Nilsson的实现，http://johannilsson.com/2011/03/13/android-pull-to-refresh-update.html。

      后面的很多例子应该都是仿照这个写的，下面的这个例子就是对这个例子的修改，先看下一个点击的效果，我看到其他的分析博客里面没有谈到这一点，在这个代码中，我们一直看到是listview的第二项，而listview的第一项被遮挡了起来，滑动至第一项：

       点击头条，头条会变成以下：

然后，过一段时间，刷新完成以后，listview又setSelection(1),增加一条数据，同时，把顶部给遮挡住：

这是点击刷新，然后是下拉刷新：

最后结果和点击刷新相同。那现在开始看下代码：

首先看下所用到的控件和变量：

[java] view
plaincopy

1. // 状态  
2.     private static final int TAP_TO_REFRESH = 1;//点击刷新  
3.     private static final int PULL_TO_REFRESH = 2;  //拉动刷新   
4.     private static final int RELEASE_TO_REFRESH = 3; //释放刷新  
5.     private static final int REFRESHING = 4;  //正在刷新  
6.     // 当前滑动状态  
7.     private int mCurrentScrollState;  
8.     // 当前刷新状态   
9.     private int mRefreshState;  
10.     //头视图的高度  
11.     private int mRefreshViewHeight;  
12.     //头视图 原始的top padding 属性值  
13.     private int mRefreshOriginalTopPadding;  
14.     private int mLastMotionY;  
15.     // 监听对listview的滑动动作  
16.     private OnRefreshListener mOnRefreshListener;  
17.     //箭头图片  
18.     private static  int REFRESHICON = R.drawable.goicon;      
19.     //listview 滚动监听器  
20.     private OnScrollListener mOnScrollListener;  
21.     private LayoutInflater mInflater;  
22.     private RelativeLayout mRefreshView;  
23.     //顶部刷新时出现的控件  
24.     private TextView mRefreshViewText;  
25.     private ImageView mRefreshViewImage;  
26.     private ProgressBar mRefreshViewProgress;  
27.     private TextView mRefreshViewLastUpdated;  
28.     // 箭头动画效果  
29.     //变为向下的箭头  
30.     private RotateAnimation mFlipAnimation;  
31.     //变为逆向的箭头  
32.     private RotateAnimation mReverseFlipAnimation;  
33.     //是否反弹  
34.     private boolean mBounceHack;  

看下点击刷新的代码过程：

在init()方法中初始化各个控件及设置监听：

[java] view
plaincopy

1. private void init(Context context) {  
2.         // Load all of the animations we need in code rather than through XML     
3.         mFlipAnimation = new RotateAnimation(0, -180,RotateAnimation.RELATIVE_TO_SELF,   
4.                 0.5f,RotateAnimation.RELATIVE_TO_SELF, 0.5f);  
5.         mFlipAnimation.setInterpolator(new LinearInterpolator());  
6.         mFlipAnimation.setDuration(250);  
7.         mFlipAnimation.setFillAfter(true);  
8.                        
9.         mReverseFlipAnimation = new RotateAnimation(-180, 0,RotateAnimation.RELATIVE_TO_SELF, 0.5f,RotateAnimation.RELATIVE_TO_SELF, 0.5f);  
10.         mReverseFlipAnimation.setInterpolator(new LinearInterpolator());  
11.         mReverseFlipAnimation.setDuration(250);  
12.         mReverseFlipAnimation.setFillAfter(true);  
13.   
14.         mInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
15.         mRefreshView = (RelativeLayout) mInflater.inflate(R.layout.pull_to_refresh_header, this, false);  
16.         mRefreshViewText =(TextView) mRefreshView.findViewById(R.id.pull_to_refresh_text);  
17.         mRefreshViewImage =(ImageView) mRefreshView.findViewById(R.id.pull_to_refresh_image);  
18.         mRefreshViewProgress =(ProgressBar) mRefreshView.findViewById(R.id.pull_to_refresh_progress);  
19.         mRefreshViewLastUpdated =(TextView) mRefreshView.findViewById(R.id.pull_to_refresh_updated_at);  
20.   
21.         mRefreshViewImage.setMinimumHeight(50);  
22.         mRefreshView.setOnClickListener(new OnClickRefreshListener());  
23.         mRefreshOriginalTopPadding = mRefreshView.getPaddingTop();  
24.         mRefreshState = TAP_TO_REFRESH;  
25.         //为listview头部增加一个view    
26.         addHeaderView(mRefreshView);  
27.         super.setOnScrollListener(this);  
28.         measureView(mRefreshView);  
29.         mRefreshViewHeight = mRefreshView.getMeasuredHeight();    
30.     }  

我们看到，mRefreshView控件既是listview用于刷新的头控件，这里它设置了监听事件：

[java] view
plaincopy

1. mRefreshView.setOnClickListener(new OnClickRefreshListener());  

我们再来看下监听事件的定义：

[java] view
plaincopy

1. private class OnClickRefreshListener implements OnClickListener {  
2.         @Override  
3.         public void onClick(View v) {  
4.             if (mRefreshState != REFRESHING) {  
5.                 prepareForRefresh();    
6.                 onRefresh();   
7.             }  
8.         }  
9.     }  

调用了preparForRefresh()（准备刷新）和onRefresh()（刷新）两个方法，然后在查看这两个方法的定义：

[java] view
plaincopy

1. public void prepareForRefresh() {  
2.         resetHeaderPadding();   // 恢复header的边距   
3.         mRefreshViewImage.setVisibility(View.GONE);  
4.         // We need this hack, otherwise it will keep the previous drawable.  
5.         // 注意加上，否则仍然显示之前的图片    
6.         mRefreshViewImage.setImageDrawable(null);  
7.         mRefreshViewProgress.setVisibility(View.VISIBLE);  
8.         // Set refresh view text to the refreshing label  
9.        mRefreshViewText.setText(R.string.pull_to_refresh_refreshing_label);  
10.         mRefreshState = REFRESHING;  
11.     }  
12.     public void onRefresh() {  
13.         if (mOnRefreshListener != null) {  
14.             mOnRefreshListener.onRefresh();  
15.         }  
16.     }  

其中，后者还是回调方法。

我们看下preparForRefresh()方法中，引用了resetHeadPadding()方法：

[java] view
plaincopy

1. /**  
2.      * Sets the header padding back to original size. 
3.      * 将head的边距重置为初始的数值  
4.      */   
5.     private void resetHeaderPadding() {  
6.         mRefreshView.setPadding(  
7.                 mRefreshView.getPaddingLeft(),  
8.                 mRefreshOriginalTopPadding,  
9.                 mRefreshView.getPaddingRight(),  
10.                 mRefreshView.getPaddingBottom());  
11.     }      

从新设置下header距上下左右的距离。

最重要的方法应该是：onScroll()和onTouchEvent()方法，先看下onTouchEvent()方法：

[java] view
plaincopy

1. @Override  
2.     public boolean onTouchEvent(MotionEvent event) {  
3.         //当前手指的Y值  
4.         final int y = (int) event.getY();  
5.         mBounceHack = false;     
6.         switch (event.getAction()) {  
7.             case MotionEvent.ACTION_UP:  
8.                 //将垂直滚动条设置为可用状态  
9.                 if (!isVerticalScrollBarEnabled()) {  
10.                     setVerticalScrollBarEnabled(true);  
11.                 }  
12.                 if (getFirstVisiblePosition() == 0 && mRefreshState != REFRESHING) {  
13.                     // 拖动距离达到刷新需要  
14.                     if ((mRefreshView.getBottom() >= mRefreshViewHeight  
15.                             || mRefreshView.getTop() >= 0)  
16.                             && mRefreshState == RELEASE_TO_REFRESH) {    
17.                         // 把状态设置为正在刷新  
18.                         // Initiate the refresh  
19.                         mRefreshState = REFRESHING; //将标量设置为，正在刷新  
20.                         // 准备刷新  
21.                         prepareForRefresh();    
22.                         // 刷新    
23.                         onRefresh();    
24.                     } else if (mRefreshView.getBottom() < mRefreshViewHeight  
25.                             || mRefreshView.getTop() <= 0) {  
26.                         // Abort refresh and scroll down below the refresh view  
27.                         //停止刷新，并且滚动到头部刷新视图的下一个视图  
28.                         resetHeader();  
29.                         setSelection(1); //定位在第二个列表项  
30.                     }  
31.                 }  
32.                 break;  
33.             case MotionEvent.ACTION_DOWN:  
34.                 // 获得按下y轴位置   
35.                 mLastMotionY = y;    
36.                 break;              
37.             case MotionEvent.ACTION_MOVE:  
38.                 //更行头视图的toppadding 属性  
39.                 applyHeaderPadding(event);  
40.                 break;  
41.         }  
42.         return super.onTouchEvent(event);  
43.     }  

当按下的时候，记录按下y轴的位置，然后在move中调用了applyHeaderPadding()方法，我们再看下这个方法：

[java] view
plaincopy

1. // 获得header距离   
2.     private void applyHeaderPadding(MotionEvent ev) {  
3.         //获取累积的动作数  
4.         int pointerCount = ev.getHistorySize();  
5.         for (int p = 0; p < pointerCount; p++) {  
6.             //如果是释放将要刷新状态  
7.             if (mRefreshState == RELEASE_TO_REFRESH) {     
8.                 if (isVerticalFadingEdgeEnabled()) {     
9.                     setVerticalScrollBarEnabled(false);  
10.                 }  
11.                 //历史累积的高度  
12.                 int historicalY = (int) ev.getHistoricalY(p);  
13.                 // Calculate the padding to apply, we divide by 1.7 to  
14.                 // simulate a more resistant effect during pull.  
15.                 // 计算申请的边距，除以1.7使得拉动效果更好  
16.                 int topPadding = (int) (((historicalY - mLastMotionY)- mRefreshViewHeight) / 1.7);  
17.                 mRefreshView.setPadding(  
18.                         mRefreshView.getPaddingLeft(),  
19.                         topPadding,  
20.                         mRefreshView.getPaddingRight(),  
21.                         mRefreshView.getPaddingBottom());  
22.             }  
23.         }  
24.     }  

通过记录滑动距离，实时变化头部mRefreshView的上下左右的距离。

最后，看下手指松开的ACTION_UP：

[java] view
plaincopy

1. case MotionEvent.ACTION_UP:  
2.                 //将垂直滚动条设置为可用状态  
3.                 if (!isVerticalScrollBarEnabled()) {  
4.                     setVerticalScrollBarEnabled(true);  
5.                 }  
6.                 if (getFirstVisiblePosition() == 0 && mRefreshState != REFRESHING) {  
7.                     // 拖动距离达到刷新需要  
8.                     if ((mRefreshView.getBottom() >= mRefreshViewHeight  
9.                             || mRefreshView.getTop() >= 0)  
10.                             && mRefreshState == RELEASE_TO_REFRESH) {    
11.                         // 把状态设置为正在刷新  
12.                         // Initiate the refresh  
13.                         mRefreshState = REFRESHING; //将标量设置为：正在刷新  
14.                         // 准备刷新  
15.                         prepareForRefresh();    
16.                         // 刷新    
17.                         onRefresh();    
18.                     } else if (mRefreshView.getBottom() < mRefreshViewHeight  
19.                             || mRefreshView.getTop() <= 0) {  
20.                         // Abort refresh and scroll down below the refresh view  
21.                         //停止刷新，并且滚动到头部刷新视图的下一个视图  
22.                         resetHeader();  
23.                         setSelection(1); //定位在第二个列表项  
24.                     }  
25.                 }  
26.                 break;  

当滑动距离大于一个item的距离时，添加一个item，否则，弹回。

看完onTouchEvent()，然后再看一下onScroll()方法：

[java] view
plaincopy

1. @Override  
2.     public void onScroll(AbsListView view, int firstVisibleItem,int visibleItemCount, int totalItemCount) {  
3.         // When the refresh view is completely visible, change the text to say  
4.         // "Release to refresh..." and flip the arrow drawable.  
5.         // 在refreshview完全可见时，设置文字为松开刷新，同时翻转箭头   
6.         //如果是接触滚动状态,并且不是正在刷新的状态  
7.         if (mCurrentScrollState == SCROLL_STATE_TOUCH_SCROLL&& mRefreshState != REFRESHING) {  
8.             if (firstVisibleItem == 0) {    
9.                 //如果显示出来了第一个列表项，显示刷新图片  
10.                 mRefreshViewImage.setVisibility(View.VISIBLE);  
11.                 //如果下拉了listiview,则显示上拉刷新动画  
12.                 if ((mRefreshView.getBottom() >= mRefreshViewHeight + 20|| mRefreshView.getTop() >= 0)  
13.                         && mRefreshState != RELEASE_TO_REFRESH) {   
14.                     mRefreshViewText.setText(R.string.pull_to_refresh_release_label);  
15.                     mRefreshViewImage.clearAnimation();  
16.                     mRefreshViewImage.startAnimation(mFlipAnimation);  
17.                     mRefreshState = RELEASE_TO_REFRESH;     
18.                   //如果下拉距离不够，则回归原来的状态  
19.                 } else if (mRefreshView.getBottom() < mRefreshViewHeight + 20  
20.                         && mRefreshState != PULL_TO_REFRESH) {      
21.                     mRefreshViewText.setText(R.string.pull_to_refresh_pull_label);  
22.                     if (mRefreshState != TAP_TO_REFRESH) {  
23.                         mRefreshViewImage.clearAnimation();  
24.                         mRefreshViewImage.startAnimation(mReverseFlipAnimation);  
25.                     }  
26.                     mRefreshState = PULL_TO_REFRESH;  
27.                 }  
28.             } else {     
29.                 mRefreshViewImage.setVisibility(View.GONE);    
30.                 resetHeader();     
31.             }  
32.           //如果是滚动状态+ 第一个视图已经显示+ 不是刷新状态  
33.         } else if (mCurrentScrollState == SCROLL_STATE_FLING  && firstVisibleItem == 0  
34.                 && mRefreshState != REFRESHING) {  
35.             setSelection(1);  
36.             mBounceHack = true;     
37.         } else if (mBounceHack && mCurrentScrollState == SCROLL_STATE_FLING) {  
38.             setSelection(1);         
39.         }  
40.         if (mOnScrollListener != null) {  
41.             mOnScrollListener.onScroll(view, firstVisibleItem,visibleItemCount, totalItemCount);  
42.         }  
43.     }  

该方法是在滑动过程中，各种状况的处理。

       onScroll()方法和onTouchEvent()方法的执行过程应该是，先onTouchEvent()的ACTION_DOWN，然后是ACTION_MOVE和onScroll()方法同时进行，最后是onTouchEvent()的ACTION_UP。也可以自己打log看一下。这样在onTouchEvent()处理header，就是mRefreshView的外部的各个熟悉，onScroll()里面处理header（mRefreshView）里面内部的控件变化，从逻辑上来说比较清晰。

       在onScroll()中，引用方法resetHeader()方法：

[java] view
plaincopy

1. /**  
2.      * Resets the header to the original state. 
3.      * 重置header为之前的状态  
4.      */   
5.     private void resetHeader() {  
6.         if (mRefreshState != TAP_TO_REFRESH) {  
7.             mRefreshState = TAP_TO_REFRESH;   
8.             resetHeaderPadding();  
9.             // 将刷新图标换成箭头   
10.             // Set refresh view text to the pull label  
11.             mRefreshViewText.setText(R.string.pull_to_refresh_tap_label);  
12.             // Replace refresh drawable with arrow drawable  
13.             // 清除动画   
14.             mRefreshViewImage.setImageResource(REFRESHICON);  
15.             // Clear the full rotation animation  
16.             mRefreshViewImage.clearAnimation();  
17.             // Hide progress bar and arrow.  
18.             // 隐藏图标和进度条   
19.             mRefreshViewImage.setVisibility(View.GONE);  
20.             mRefreshViewProgress.setVisibility(View.GONE);  
21.         }  
22.     }  

resetHead就是header（mRefreshView）的内部的具体操作。

       当一切都完成以后，就可以调用onRefreshComplete()方法：

[java] view
plaincopy

1. /**  
2.      * Resets the list to a normal state after a refresh. 
3.      * 重置listview为普通的listview 
4.      * @param lastUpdated  
5.      * Last updated at.  
6.      */    
7.       
8.     public void onRefreshComplete(CharSequence lastUpdated) {  
9.         setLastUpdated(lastUpdated);  
10.         onRefreshComplete();   
11.     }  
12.     /**  
13.      * Resets the list to a normal state after a refresh. 
14.      * 重置listview为普通的listview， 
15.      */  
16.     public void onRefreshComplete() {          
17.         resetHeader();  
18.         // If refresh view is visible when loading completes, scroll down to  
19.         // the next item.  
20.         if (mRefreshView.getBottom() > 0) {  
21.             invalidateViews();  //重绘视图  
22.             setSelection(1);  
23.         }  
24.     }  

重新绘制listivew,然后setSelection(1)。完成!