閱讀263 返回首頁    go 小米 go 小米6

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

  這個下拉效果在網上最早的例子恐怕就是Johan Nilsson的實現，https://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)。完成!

最後更新：2017-04-02 17:09:29

  上一篇：go ANDROID開發之-類似IPHONE彈性效果的BOUNCELISTVIEW
  下一篇：go 基於Lucene的圖書全文搜索引擎