閱讀686 返回首頁    go 技術社區[雲棲]

android listivew 下拉回彈刷新

該效果是一名國外工程師（johannilsson）的代碼，拿來研究了下，自己整合了一下，現在拿出來，跟大家一起分享。

再次感謝這位國外工程師（johannilsson），謝謝！

新浪微博，和QQ空間裏麵，都有那個下拉刷新的效果，另很多人眼前一亮，細細分析，原理原來如此。

在原作者的基礎上，寫了一些注釋，和幫助大家更好的閱讀理解，（可能其中有些地方注釋不準，歡迎指正，謝謝）

下麵，就亮出關鍵代碼：

 ****  自定義listivew   （關鍵代碼）

[java] view plaincopy
  1. public class PullToRefreshListView extends ListView implements OnScrollListener {  
  2.    
  3.     private static final int TAP_TO_REFRESH = 1;     // 初始狀態  
  4.     private static final int PULL_TO_REFRESH = 2;    //拉動刷新  
  5.     private static final int RELEASE_TO_REFRESH = 3;  //釋放刷新  
  6.     private static final int REFRESHING = 4;    //正在刷新  
  7.    
  8.     private static final String TAG = "PullToRefreshListView";  
  9.     //刷新接口  
  10.     private OnRefreshListener mOnRefreshListener;  
  11.    
  12.     //箭頭圖片  
  13.     private static  int REFRESHICON = R.drawable.goicon;  
  14.     
  15.     /** 
  16.      * listview 滾動監聽器 
  17.      */  
  18.     private OnScrollListener mOnScrollListener;  
  19.      
  20.     //視圖索引器  
  21.     private LayoutInflater mInflater;  
  22.     /** 
  23.      * 頭部視圖  內容  -- start 
  24.      */  
  25.     private RelativeLayout mRefreshView;  
  26.     private TextView mRefreshViewText;  
  27.     private ImageView mRefreshViewImage;  
  28.     private ProgressBar mRefreshViewProgress;  
  29.     private TextView mRefreshViewLastUpdated;  
  30.     /** 
  31.      * 頭部視圖  內容  -- end 
  32.      */  
  33.     //當前listivew 的滾動狀態  
  34.     private int mCurrentScrollState;  
  35.      
  36.     //當前listview 的刷新狀態  
  37.     private int mRefreshState;  
  38.    
  39.     //動畫效果  
  40.     //變為向下的箭頭  
  41.     private RotateAnimation mFlipAnimation;  
  42.     //變為逆向的箭頭  
  43.     private RotateAnimation mReverseFlipAnimation;  
  44.     //頭視圖的高度  
  45.     private int mRefreshViewHeight;  
  46.     //頭視圖 原始的top padding 屬性值  
  47.     private int mRefreshOriginalTopPadding;  
  48.     //  
  49.     private int mLastMotionY;  
  50.     //是否反彈  
  51.     private boolean mBounceHack;  
  52.    
  53.     public PullToRefreshListView(Context context) {  
  54.         super(context);  
  55.         init(context);  
  56.     }  
  57.    
  58.     public PullToRefreshListView(Context context, AttributeSet attrs) {  
  59.         super(context, attrs);  
  60.         init(context);  
  61.     }  
  62.    
  63.     public PullToRefreshListView(Context context, AttributeSet attrs, int defStyle) {  
  64.         super(context, attrs, defStyle);  
  65.         init(context);  
  66.     }  
  67.    
  68.     private void init(Context context) {  
  69.         // Load all of the animations we need in code rather than through XML  
  70.      //初始化動畫  
  71.      //  
  72.         mFlipAnimation = new RotateAnimation(0, -180,  
  73.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f,  
  74.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f);  
  75.         mFlipAnimation.setInterpolator(new LinearInterpolator());  
  76.         mFlipAnimation.setDuration(250);  
  77.         mFlipAnimation.setFillAfter(true);  
  78.   
  79.         mReverseFlipAnimation = new RotateAnimation(-180, 0,  
  80.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f,  
  81.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f);  
  82.         mReverseFlipAnimation.setInterpolator(new LinearInterpolator());  
  83.         mReverseFlipAnimation.setDuration(250);  
  84.         mReverseFlipAnimation.setFillAfter(true);  
  85.    
  86.         mInflater = (LayoutInflater) context.getSystemService(  
  87.                 Context.LAYOUT_INFLATER_SERVICE);  
  88.    
  89.   mRefreshView = (RelativeLayout) mInflater.inflate(R.layout.pull_to_refresh_header, this, false);//(R.layout.pull_to_refresh_header, null);  
  90.     mRefreshViewText =  
  91.             (TextView) mRefreshView.findViewById(R.id.pull_to_refresh_text);  
  92.         mRefreshViewImage =  
  93.             (ImageView) mRefreshView.findViewById(R.id.pull_to_refresh_image);  
  94.         mRefreshViewProgress =  
  95.             (ProgressBar) mRefreshView.findViewById(R.id.pull_to_refresh_progress);  
  96.         mRefreshViewLastUpdated =  
  97.             (TextView) mRefreshView.findViewById(R.id.pull_to_refresh_updated_at);  
  98.    
  99.         mRefreshViewImage.setMinimumHeight(50);  
  100.         mRefreshView.setOnClickListener(new OnClickRefreshListener());  
  101.         mRefreshOriginalTopPadding = mRefreshView.getPaddingTop();  
  102.    
  103.         mRefreshState = TAP_TO_REFRESH;  
  104.    
  105.         addHeaderView(mRefreshView);  
  106.    
  107.         super.setOnScrollListener(this);  
  108.    
  109.         measureView(mRefreshView);  
  110.         mRefreshViewHeight = mRefreshView.getMeasuredHeight();  //獲取頭文件的測量高度  
  111.     }  
  112.    
  113.     @Override  
  114.     protected void onAttachedToWindow() {  
  115.         setSelection(1);  
  116.     }  
  117.    
  118.     @Override  
  119.     public void setAdapter(ListAdapter adapter) {  
  120.         super.setAdapter(adapter);  
  121.         setSelection(1);  
  122.     }  
  123.    
  124.     /** 
  125.      * Set the listener that will receive notifications every time the list 
  126.      * scrolls. 
  127.      * 
  128.      * @param l The scroll listener. 
  129.      */  
  130.     @Override  
  131.     public void setOnScrollListener(AbsListView.OnScrollListener l) {  
  132.         mOnScrollListener = l;  
  133.     }  
  134.    
  135.     /** 
  136.      * Register a callback to be invoked when this list should be refreshed. 
  137.      * 
  138.      * @param onRefreshListener The callback to run. 
  139.      */  
  140.     public void setOnRefreshListener(OnRefreshListener onRefreshListener) {  
  141.         mOnRefreshListener = onRefreshListener;  
  142.     }  
  143.    
  144.     /** 
  145.      * Set a text to represent when the list was last updated. 
  146.      * @param lastUpdated Last updated at. 
  147.      */  
  148.     public void setLastUpdated(CharSequence lastUpdated) {  
  149.         if (lastUpdated != null) {  
  150.             mRefreshViewLastUpdated.setVisibility(View.VISIBLE);  
  151.             mRefreshViewLastUpdated.setText(lastUpdated);  
  152.         } else {  
  153.             mRefreshViewLastUpdated.setVisibility(View.GONE);  
  154.         }  
  155.     }  
  156.    
  157.     @Override  
  158.     public boolean onTouchEvent(MotionEvent event) {  
  159.      //當前手指的Y值  
  160.         final int y = (int) event.getY();  
  161.          
  162.         //Log.i(TAG, "觸屏的Y值"+y);  
  163.         mBounceHack = false;  //不反彈  
  164.          
  165.         switch (event.getAction()) {  
  166.             case MotionEvent.ACTION_UP:  
  167.              //將垂直滾動條設置為可用狀態  
  168.                 if (!isVerticalScrollBarEnabled()) {  
  169.                     setVerticalScrollBarEnabled(true);  
  170.                 }  
  171.                  
  172.                 //如果頭部刷新條出現，並且不是正在刷新狀態  
  173.                 if (getFirstVisiblePosition() == 0 && mRefreshState != REFRESHING) {  
  174.                     if ((mRefreshView.getBottom() >= mRefreshViewHeight  
  175.                             || mRefreshView.getTop() >= 0)  
  176.                             && mRefreshState == RELEASE_TO_REFRESH) {   //如果頭部視圖處於拉離頂部的情況  
  177.                         // Initiate the refresh  
  178.                         mRefreshState = REFRESHING;  //將標量設置為，正在刷新  
  179.                         prepareForRefresh();  //準備刷新  
  180.                         onRefresh();   //刷新  
  181.                     } else if (mRefreshView.getBottom() < mRefreshViewHeight  
  182.                             || mRefreshView.getTop() <= 0) {  
  183.                         // Abort refresh and scroll down below the refresh view  
  184.                      // 停止刷新，並且滾動到頭部刷新視圖的下一個視圖  
  185.                         resetHeader();  
  186.                         setSelection(1);  //定位在第二個列表項  
  187.                     }  
  188.                 }  
  189.                 break;  
  190.             case MotionEvent.ACTION_DOWN:  
  191.                 mLastMotionY = y;  //跟蹤手指的Y值  
  192.                 break;  
  193.              
  194.             case MotionEvent.ACTION_MOVE:  
  195.              //更行頭視圖的toppadding 屬性  
  196.                 applyHeaderPadding(event);  
  197.                 break;  
  198.         }  
  199.         return super.onTouchEvent(event);  
  200.     }  
  201.    
  202.     /**** 
  203.      * 不斷的頭部的top padding 屬性 
  204.      * @param ev 
  205.      */  
  206.     private void applyHeaderPadding(MotionEvent ev) {  
  207.         //獲取累積的動作數  
  208.         int pointerCount = ev.getHistorySize();  
  209.        // Log.i(TAG, "獲取累積的動作數"+pointerCount);  
  210.         for (int p = 0; p < pointerCount; p++) {  
  211.             if (mRefreshState == RELEASE_TO_REFRESH) {    //如果是釋放將要刷新狀態  
  212.                 if (isVerticalFadingEdgeEnabled()) {    
  213.                     setVerticalScrollBarEnabled(false);  
  214.                 }  
  215.                 //曆史累積的高度  
  216.                 int historicalY = (int) ev.getHistoricalY(p);  
  217.                 //Log.i(TAG, "單個動作getHistoricalY值："+historicalY);  
  218.                 // Calculate the padding to apply, we divide by 1.7 to  
  219.                 // simulate a more resistant effect during pull.  
  220.                 int topPadding = (int) (((historicalY - mLastMotionY)  
  221.                         - mRefreshViewHeight) / 1.7);  
  222.                  
  223.                 mRefreshView.setPadding(  
  224.                         mRefreshView.getPaddingLeft(),  
  225.                         topPadding,  
  226.                         mRefreshView.getPaddingRight(),  
  227.                         mRefreshView.getPaddingBottom());  
  228.             }  
  229.         }  
  230.     }  
  231.    
  232.     /** 
  233.      * Sets the header padding back to original size. 
  234.      * 使頭部視圖的toppadding 恢複到初始值 
  235.      */  
  236.     private void resetHeaderPadding() {  
  237.         mRefreshView.setPadding(  
  238.                 mRefreshView.getPaddingLeft(),  
  239.                 mRefreshOriginalTopPadding,  
  240.                 mRefreshView.getPaddingRight(),  
  241.                 mRefreshView.getPaddingBottom());  
  242.     }  
  243.    
  244.     /** 
  245.      * Resets the header to the original state.  
  246.      *  初始化頭部視圖 狀態 
  247.      */  
  248.     private void resetHeader() {  
  249.         if (mRefreshState != TAP_TO_REFRESH) {  
  250.             mRefreshState = TAP_TO_REFRESH; //初始刷新狀態  
  251.             //使頭部視圖的toppadding 恢複到初始值  
  252.             resetHeaderPadding();  
  253.             // Set refresh view text to the pull label  
  254.             //將文字初始化  
  255.             mRefreshViewText.setText(R.string.pull_to_refresh_tap_label);  
  256.             // Replace refresh drawable with arrow drawable  
  257.             //設置初始圖片  
  258.             mRefreshViewImage.setImageResource(REFRESHICON);  
  259.             // Clear the full rotation animation  
  260.             // 清除動畫  
  261.             mRefreshViewImage.clearAnimation();  
  262.             // Hide progress bar and arrow.  
  263.             //隱藏頭視圖  
  264.             mRefreshViewImage.setVisibility(View.GONE);  
  265.             //隱藏進度條  
  266.             mRefreshViewProgress.setVisibility(View.GONE);  
  267.         }  
  268.     }  
[java] view plaincopy
  1. //測量視圖的高度  
  2. private void measureView(View child) {  
  3.  //獲取頭部視圖屬性  
  4.     ViewGroup.LayoutParams p = child.getLayoutParams();  
  5.     if (p == null) {  
  6.         p = new ViewGroup.LayoutParams(  
  7.                 ViewGroup.LayoutParams.FILL_PARENT,  
  8.                 ViewGroup.LayoutParams.WRAP_CONTENT);  
  9.     }  
  10.      
  11.     int childWidthSpec = ViewGroup.getChildMeasureSpec(0,  
  12.             0 + 0, p.width);  
  13.     int lpHeight = p.height;  
  14.     int childHeightSpec;  
  15.      
  16.     //不懂MeasureSpec------------------------------------------------------------------------------------------  
  17.     if (lpHeight > 0) {  //如果視圖的高度大於0  
  18.         childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight, MeasureSpec.EXACTLY);   
  19.     } else {  
  20.         childHeightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);  
  21.     }  
  22.     child.measure(childWidthSpec, childHeightSpec);  
  23.     //不懂MeasureSpec------------------------------------------------------------------------------------------  
  24. }  
  25.   
  26. /**** 
  27.  * 滑動事件 
  28.  */  
  29. @Override  
  30. public void onScroll(AbsListView view, int firstVisibleItem,  
  31.         int visibleItemCount, int totalItemCount) {  
  32.     // When the refresh view is completely visible, change the text to say  
  33.     // "Release to refresh..." and flip the arrow drawable.  
  34.     if (mCurrentScrollState == SCROLL_STATE_TOUCH_SCROLL   //如果是接觸滾動狀態,並且不是正在刷新的狀態  
  35.             && mRefreshState != REFRESHING) {  
  36.         if (firstVisibleItem == 0) {    //如果顯示出來了第一個列表項  
  37.          //顯示刷新圖片  
  38.             mRefreshViewImage.setVisibility(View.VISIBLE);  
  39.             if ((mRefreshView.getBottom() >= mRefreshViewHeight + 20  
  40.                     || mRefreshView.getTop() >= 0)  
  41.                     && mRefreshState != RELEASE_TO_REFRESH) {  //如果下拉了listiview,則顯示上拉刷新動畫  
  42.                 mRefreshViewText.setText(R.string.pull_to_refresh_release_label);  
  43.                 mRefreshViewImage.clearAnimation();  
  44.                 mRefreshViewImage.startAnimation(mFlipAnimation);  
  45.                 mRefreshState = RELEASE_TO_REFRESH;  
  46.                  
  47.                 Log.i(TAG, "現在處於下拉狀態");  
  48.                  
  49.             } else if (mRefreshView.getBottom() < mRefreshViewHeight + 20  
  50.                     && mRefreshState != PULL_TO_REFRESH) {    //如果沒有到達，下拉刷新距離，則回歸原來的狀態  
  51.                 mRefreshViewText.setText(R.string.pull_to_refresh_pull_label);  
  52.                 if (mRefreshState != TAP_TO_REFRESH) {  
  53.                     mRefreshViewImage.clearAnimation();  
  54.                     mRefreshViewImage.startAnimation(mReverseFlipAnimation);  
  55.                      
  56.                     Log.i(TAG, "現在處於回彈狀態");  
  57.                      
  58.                 }  
  59.                 mRefreshState = PULL_TO_REFRESH;  
  60.             }  
  61.         } else {    
  62.             mRefreshViewImage.setVisibility(View.GONE);  //隱藏刷新圖片  
  63.             resetHeader();   //初始化，頭部  
  64.         }  
  65.     } else if (mCurrentScrollState == SCROLL_STATE_FLING  //如果是自己滾動狀態+ 第一個視圖已經顯示+ 不是刷新狀態  
  66.             && firstVisibleItem == 0  
  67.             && mRefreshState != REFRESHING) {  
  68.         setSelection(1);  
  69.         mBounceHack = true;   //狀態為回彈  
  70.         Log.i(TAG, "現在處於自由滾動到頂部的狀態");  
  71.     } else if (mBounceHack && mCurrentScrollState == SCROLL_STATE_FLING) {  
  72.         setSelection(1);  
  73.         Log.i(TAG, "現在處於自由滾動到頂部的狀態");  
  74.     }  
  75.   
  76.     if (mOnScrollListener != null) {  
  77.         mOnScrollListener.onScroll(view, firstVisibleItem,  
  78.                 visibleItemCount, totalItemCount);  
  79.     }  
  80. }  
  81.   
  82.   
  83. //滾動狀態改變  
  84. @Override  
  85. public void onScrollStateChanged(AbsListView view, int scrollState) {  
  86.     mCurrentScrollState = scrollState;  
  87.   
  88.     if (mCurrentScrollState == SCROLL_STATE_IDLE) {   //如果滾動停頓  
  89.         mBounceHack = false;  
  90.     }  
  91.   
  92.     if (mOnScrollListener != null) {  
  93.         mOnScrollListener.onScrollStateChanged(view, scrollState);  
  94.     }  
  95. }  
  96.   
  97.   
  98.   
  99. //準備刷新  
  100. public void prepareForRefresh() {  
  101.     resetHeaderPadding();   //初始化，頭部文件  
  102.   
  103.     mRefreshViewImage.setVisibility(View.GONE);  
  104.     // We need this hack, otherwise it will keep the previous drawable.  
  105.     mRefreshViewImage.setImageDrawable(null);  
  106.     mRefreshViewProgress.setVisibility(View.VISIBLE);  
  107.   
  108.     // Set refresh view text to the refreshing label  
  109.    mRefreshViewText.setText(R.string.pull_to_refresh_refreshing_label);  
  110.   
  111.     mRefreshState = REFRESHING;  
  112. }  
  113.   
  114. //刷新  
  115. public void onRefresh() {  
  116.     Log.d(TAG, "執行刷新");  
  117.   
  118.     if (mOnRefreshListener != null) {  
  119.         mOnRefreshListener.onRefresh();  
  120.     }  
  121. }  
  122.   
  123. /** 
  124.  * 刷新完成 的回調函數 
  125.  * Resets the list to a normal state after a refresh. 
  126.  * @param lastUpdated Last updated at. 
  127.  */  
  128. public void onRefreshComplete(CharSequence lastUpdated) {  
  129.     setLastUpdated(lastUpdated);  
  130.     onRefreshComplete();  
  131. }  
  132.   
  133. /** 
  134.  *  刷新完成回調函數 
  135.  * Resets the list to a normal state after a refresh. 
  136.  */  
  137. public void onRefreshComplete() {         
  138.     Log.d(TAG, "onRefreshComplete");  
  139.   
  140.     resetHeader();  
  141.   
  142.     // If refresh view is visible when loading completes, scroll down to  
  143.     // the next item.  
  144.     if (mRefreshView.getBottom() > 0) {  
  145.         invalidateViews();  //重繪視圖  
  146.         setSelection(1);  
  147.     }  
  148. }  
  149.   
  150. /** 
  151.  * Invoked when the refresh view is clicked on. This is mainly used when 
  152.  * there's only a few items in the list and it's not possible to drag the 
  153.  * list. 
  154.  */  
  155. private class OnClickRefreshListener implements OnClickListener {  
  156.   
  157.     @Override  
  158.     public void onClick(View v) {  
  159.         if (mRefreshState != REFRESHING) {  
  160.             //準備刷新  
  161.             prepareForRefresh();   
  162.             //刷新    
  163.             onRefresh();  
  164.         }  
  165.     }  
  166.   
  167. }  
  168.   
  169. /** 
  170.  * 刷新方法接口 
  171.  */  
  172. public interface OnRefreshListener {  
  173.      
  174.     public void onRefresh();  
  175. }  

  

---------


------


 

* 如果你還是沒有弄明白的話，那就點擊下麵的鏈接，來下載整個demo項目: 

 https://download.csdn.net/detail/zjl5211314/3775209

 原作者：johannilsson

 選自：https://github.com/johannilsson/android-pulltorefresh

最後更新：2017-04-02 22:16:35

  上一篇：go Android 中Base64的操作
  下一篇：go 添加一個係統服務sytem service