閱讀365 返回首頁    go 阿裏雲 go 技術社區[雲棲]

android下拉加載更多

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

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

源代碼下載地址：https://download.csdn.net/detail/weidi1989/4588246

先來看一下效果圖：

 

下麵，就亮出關鍵代碼，自定義的一個MyListView：

[java] view plaincopy
  1. /** 
  2.  * 重寫一個ListView,主要是添加一個下拉事件 
  3.  *  
  4.  * @author way 
  5.  *  
  6.  */  
  7. public class MyListView extends ListView implements OnScrollListener {  
  8.   
  9.     private static final String TAG = "listview";  
  10.   
  11.     private final static int RELEASE_To_REFRESH = 0; // 鬆開刷新狀態  
  12.     private final static int PULL_To_REFRESH = 1;// 拉動刷新狀態  
  13.     private final static int REFRESHING = 2;// 正在刷新狀態  
  14.     private final static int DONE = 3;// 已經加載完畢狀態  
  15.     private final static int LOADING = 4;// 正在加載數據狀態  
  16.     private final static int RATIO = 3;// 實際的padding的距離與界麵上偏移距離的比例  
  17.   
  18.     private LayoutInflater inflater;  
  19.     private LinearLayout headView;// ListView頭部的View  
  20.   
  21.     private TextView tipsTextview;// 提示信息“下拉刷新”的TextView  
  22.     private TextView lastUpdatedTextView;// 上次更新時間的TextView  
  23.     private ImageView arrowImageView;// 箭頭的圖片  
  24.     private ProgressBar progressBar;// 刷新進度  
  25.   
  26.     private RotateAnimation animation;// 箭頭向下動畫  
  27.     private RotateAnimation reverseAnimation;// 逆向箭頭動畫  
  28.   
  29.     private boolean isRecored;// 用於保證startY的值在一個完整的touch事件中隻被記錄一次  
  30.   
  31.     private int headContentWidth;// 頭部View內容的寬度  
  32.     private int headContentHeight;// 頭部view內容的高度  
  33.   
  34.     private int startY;// 向下觸屏事件時的手指起始y軸位置  
  35.   
  36.     private int firstItemIndex;// ListView第一項的索引  
  37.   
  38.     private int state;// 刷新狀態  
  39.   
  40.     private boolean isBack;// 是否反彈  
  41.   
  42.     private OnRefreshListener refreshListener;// 給外麵預留的刷新的接口  
  43.   
  44.     private boolean isRefreshable;// 是否刷新的標誌位  
  45.   
  46.     /** 
  47.      * 第一個構造器 
  48.      *  
  49.      * @param context 
  50.      *            上下文對象 
  51.      */  
  52.     public MyListView(Context context) {  
  53.         super(context);  
  54.         init(context);  
  55.     }  
  56.   
  57.     /** 
  58.      * 第二個構造器 
  59.      *  
  60.      * @param context 
  61.      *            上下文對象 
  62.      * @param attrs 
  63.      *            屬性 
  64.      */  
  65.     public MyListView(Context context, AttributeSet attrs) {  
  66.         super(context, attrs);  
  67.         init(context);  
  68.     }  
  69.   
  70.     /** 
  71.      * 初始化數據 
  72.      *  
  73.      * @param context 
  74.      *            上下文對象 
  75.      */  
  76.     private void init(Context context) {  
  77.         // setCacheColorHint(context.getResources().getColor(R.color.transparent));  
  78.         inflater = LayoutInflater.from(context);  
  79.         headView = (LinearLayout) inflater.inflate(R.layout.head, null);// 獲取ListView頭部的view  
  80.   
  81.         arrowImageView = (ImageView) headView  
  82.                 .findViewById(R.id.head_arrowImageView);// 從頭部的View獲取箭頭圖片  
  83.         arrowImageView.setMinimumWidth(70);  
  84.         arrowImageView.setMinimumHeight(50);  
  85.         progressBar = (ProgressBar) headView  
  86.                 .findViewById(R.id.head_progressBar);// 獲取刷新進度條  
  87.         tipsTextview = (TextView) headView.findViewById(R.id.head_tipsTextView);// 提示信息的TextView  
  88.         lastUpdatedTextView = (TextView) headView  
  89.                 .findViewById(R.id.head_lastUpdatedTextView);// 最後刷新時間的TextView  
  90.   
  91.         measureView(headView);// 自己寫的一個方法，沒有很理解  
  92.         headContentHeight = headView.getMeasuredHeight();// 得到headView的原始高度  
  93.         headContentWidth = headView.getMeasuredWidth();  
  94.   
  95.         headView.setPadding(0, -1 * headContentHeight, 0, 0);// 設置內容的內部偏移量  
  96.         headView.invalidate();  
  97.   
  98.         Log.v("size", "width:" + headContentWidth + " height:"  
  99.                 + headContentHeight);  
  100.   
  101.         addHeaderView(headView, null, false);// 加到ListView的頭部view，ListView組件提供了兩個很實用的功能，那就是可以在頂部和底部添加自定義的視圖  
  102.         setOnScrollListener(this);  
  103.   
  104.         // 箭頭向下動畫  
  105.         animation = new RotateAnimation(0, -180,  
  106.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f,  
  107.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f);  
  108.         animation.setInterpolator(new LinearInterpolator());  
  109.         animation.setDuration(250);  
  110.         animation.setFillAfter(true);  
  111.   
  112.         // 逆向箭頭動畫  
  113.         reverseAnimation = new RotateAnimation(-180, 0,  
  114.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f,  
  115.                 RotateAnimation.RELATIVE_TO_SELF, 0.5f);  
  116.         reverseAnimation.setInterpolator(new LinearInterpolator());  
  117.         reverseAnimation.setDuration(200);  
  118.         reverseAnimation.setFillAfter(true);  
  119.   
  120.         state = DONE;// 第一次加載默認完成的狀態  
  121.         isRefreshable = false;// 刷新標誌位默認為false  
  122.     }  
  123.   
  124.     /** 
  125.      * 滑動時被調用 
  126.      */  
  127.     public void onScroll(AbsListView view, int firstVisiableItem,  
  128.             int visibleItemCount, int totalItemCount) {  
  129.         firstItemIndex = firstVisiableItem;// ListView第一個索引值為ListView數據中第一個可見項  
  130.     }  
  131.   
  132.     /** 
  133.      * 滑動狀態改變時被調用 
  134.      */  
  135.     public void onScrollStateChanged(AbsListView view, int scrollState) {  
  136.     }  
  137.   
  138.     /** 
  139.      * 觸摸事件 
  140.      */  
  141.     public boolean onTouchEvent(MotionEvent event) {  
  142.         if (isRefreshable) {// 如果刷新標誌為true  
  143.             switch (event.getAction()) {  
  144.             case MotionEvent.ACTION_DOWN:// 向下  
  145.                 if (firstItemIndex == 0 && !isRecored) {  
  146.                     isRecored = true;  
  147.                     startY = (int) event.getY();  
  148.                     Log.v(TAG, "在down時候記錄當前位置");  
  149.                 }  
  150.                 break;  
  151.   
  152.             case MotionEvent.ACTION_UP:// 向上  
  153.                 if (state != REFRESHING && state != LOADING) {  
  154.                     if (state == DONE) {  
  155.                         // 什麼都不做  
  156.                     }  
  157.                     if (state == PULL_To_REFRESH) {// 下拉刷新  
  158.                         state = DONE;  
  159.                         changeHeaderViewByState();// 更新頭部view  
  160.                         Log.v(TAG, "由下拉刷新狀態，到done狀態");  
  161.                     }  
  162.                     if (state == RELEASE_To_REFRESH) {// 釋放刷新  
  163.                         state = REFRESHING;  
  164.                         changeHeaderViewByState();  
  165.                         onRefresh();// 調用接口的方法，通知外麵  
  166.   
  167.                         Log.v(TAG, "由鬆開刷新狀態，到done狀態");  
  168.                     }  
  169.                 }  
  170.                 isRecored = false;  
  171.                 isBack = false;  
  172.                 break;  
  173.   
  174.             case MotionEvent.ACTION_MOVE:// 手指移動  
  175.                 int tempY = (int) event.getY();  
  176.                 if (!isRecored && firstItemIndex == 0) {  
  177.                     Log.v(TAG, "在move時候記錄下位置");  
  178.                     isRecored = true;  
  179.                     startY = tempY;  
  180.                 }  
  181.                 if (state != REFRESHING && isRecored && state != LOADING) {  
  182.   
  183.                     // 保證在設置padding的過程中，當前的位置一直是在head，否則如果當列表超出屏幕的話，當在上推的時候，列表會同時進行滾動  
  184.   
  185.                     // 可以鬆手去刷新了  
  186.                     if (state == RELEASE_To_REFRESH) {  
  187.                         setSelection(0);  
  188.                         // 往上推了，推到了屏幕足夠掩蓋head的程度，但是還沒有推到全部掩蓋的地步  
  189.                         if (((tempY - startY) / RATIO < headContentHeight)  
  190.                                 && (tempY - startY) > 0) {  
  191.                             state = PULL_To_REFRESH;  
  192.                             changeHeaderViewByState();  
  193.                             Log.v(TAG, "由鬆開刷新狀態轉變到下拉刷新狀態");  
  194.                         }  
  195.                         // 一下子推到頂了  
  196.                         else if (tempY - startY <= 0) {  
  197.                             state = DONE;  
  198.                             changeHeaderViewByState();  
  199.                             Log.v(TAG, "由鬆開刷新狀態轉變到done狀態");  
  200.                         }  
  201.                         // 往下拉了，或者還沒有上推到屏幕頂部掩蓋head的地步  
  202.                         else {  
  203.                             // 不用進行特別的操作，隻用更新paddingTop的值就行了  
  204.                         }  
  205.                     }  
  206.                     // 還沒有到達顯示鬆開刷新的時候,DONE或者是PULL_To_REFRESH狀態  
  207.                     if (state == PULL_To_REFRESH) {  
  208.                         setSelection(0);  
  209.                         // 下拉到可以進入RELEASE_TO_REFRESH的狀態  
  210.                         if ((tempY - startY) / RATIO >= headContentHeight) {  
  211.                             state = RELEASE_To_REFRESH;  
  212.                             isBack = true;  
  213.                             changeHeaderViewByState();  
  214.                             Log.v(TAG, "由done或者下拉刷新狀態轉變到鬆開刷新");  
  215.                         }  
  216.                         // 上推到頂了  
  217.                         else if (tempY - startY <= 0) {  
  218.                             state = DONE;  
  219.                             changeHeaderViewByState();  
  220.                             Log.v(TAG, "由DOne或者下拉刷新狀態轉變到done狀態");  
  221.                         }  
  222.                     }  
  223.                     // done狀態下  
  224.                     if (state == DONE) {  
  225.                         if (tempY - startY > 0) {  
  226.                             state = PULL_To_REFRESH;  
  227.                             changeHeaderViewByState();  
  228.                         }  
  229.                     }  
  230.                     // 更新headView的size  
  231.                     if (state == PULL_To_REFRESH) {  
  232.                         headView.setPadding(0, -1 * headContentHeight  
  233.                                 + (tempY - startY) / RATIO, 0, 0);  
  234.                     }  
  235.                     // 更新headView的paddingTop  
  236.                     if (state == RELEASE_To_REFRESH) {  
  237.                         headView.setPadding(0, (tempY - startY) / RATIO  
  238.                                 - headContentHeight, 0, 0);  
  239.                     }  
  240.                 }  
  241.                 break;  
  242.             }  
  243.         }  
  244.         return super.onTouchEvent(event);  
  245.     }  
  246.   
  247.     // 當狀態改變時候，調用該方法，以更新界麵  
  248.     private void changeHeaderViewByState() {  
  249.         switch (state) {  
  250.         case RELEASE_To_REFRESH:// 鬆開刷新狀態  
  251.             arrowImageView.setVisibility(View.VISIBLE);// 顯示箭頭  
  252.             progressBar.setVisibility(View.GONE);// 移除進度條  
  253.             tipsTextview.setVisibility(View.VISIBLE);// 顯示提示信息  
  254.             lastUpdatedTextView.setVisibility(View.VISIBLE);// 顯示最後刷新時間  
  255.             arrowImageView.clearAnimation();// 先移除所有動畫  
  256.             arrowImageView.startAnimation(animation);// 加載箭頭向下動畫  
  257.   
  258.             tipsTextview.setText("鬆開刷新");  
  259.   
  260.             Log.v(TAG, "當前狀態，鬆開刷新");  
  261.             break;  
  262.         case PULL_To_REFRESH:// 下拉刷新狀態  
  263.             progressBar.setVisibility(View.GONE);// 移除進度條  
  264.             tipsTextview.setVisibility(View.VISIBLE);// 顯示提示信息  
  265.             lastUpdatedTextView.setVisibility(View.VISIBLE);// 顯示最後刷新時間  
  266.             arrowImageView.clearAnimation();// 先移除所有動畫  
  267.             arrowImageView.setVisibility(View.VISIBLE);// 箭頭圖片可見  
  268.             // 如果是由RELEASE_To_REFRESH狀態轉變來的，就加載動畫  
  269.             if (isBack) {  
  270.                 isBack = false;  
  271.                 arrowImageView.clearAnimation();  
  272.                 arrowImageView.startAnimation(reverseAnimation);  
  273.                 tipsTextview.setText("下拉刷新");  
  274.             } else {  
  275.                 tipsTextview.setText("下拉刷新");  
  276.             }  
  277.             Log.v(TAG, "當前狀態，下拉刷新");  
  278.             break;  
  279.   
  280.         case REFRESHING:// 正在刷新狀態  
  281.             headView.setPadding(0, 0, 0, 0);// 無內部偏移  
  282.             progressBar.setVisibility(View.VISIBLE);// 進度條可見  
  283.             arrowImageView.clearAnimation();// 先清除動畫  
  284.             arrowImageView.setVisibility(View.GONE);// 再移除箭頭動畫  
  285.             tipsTextview.setText("正在刷新...");// 提示信息變成正在刷新...  
  286.             lastUpdatedTextView.setVisibility(View.VISIBLE);// 最後刷新時間可見  
  287.             Log.v(TAG, "當前狀態,正在刷新...");  
  288.             break;  
  289.         case DONE:// 完成狀態  
  290.             headView.setPadding(0, -1 * headContentHeight, 0, 0);  
  291.             progressBar.setVisibility(View.GONE);  
  292.             arrowImageView.clearAnimation();  
  293.             arrowImageView.setImageResource(R.drawable.arrow_down);  
  294.             tipsTextview.setText("下拉刷新");  
  295.             lastUpdatedTextView.setVisibility(View.VISIBLE);  
  296.   
  297.             Log.v(TAG, "當前狀態，done");  
  298.             break;  
  299.         }  
  300.     }  
  301.   
  302.     // 刷新完成  
  303.     public void onRefreshComplete() {  
  304.         state = DONE;  
  305.         SimpleDateFormat format = new SimpleDateFormat("yyyy年MM月dd日  HH:mm");  
  306.         String date = format.format(new Date());  
  307.         lastUpdatedTextView.setText("最近更新:" + date);  
  308.         changeHeaderViewByState();  
  309.     }  
  310.   
  311.     /** 
  312.      * 一個下拉刷新的監聽接口 
  313.      *  
  314.      */  
  315.     public interface OnRefreshListener {  
  316.         public void onRefresh();  
  317.     }  
  318.   
  319.     // 監聽方法  
  320.     public void setonRefreshListener(OnRefreshListener refreshListener) {  
  321.         this.refreshListener = refreshListener;  
  322.         isRefreshable = true;  
  323.     }  
  324.   
  325.     // 正在刷新  
  326.     private void onRefresh() {  
  327.         if (refreshListener != null) {  
  328.             refreshListener.onRefresh();  
  329.         }  
  330.     }  
  331.   
  332.     /** 
  333.      * 此方法是“估計”headView的width以及height 
  334.      *  
  335.      * @param child 
  336.      *            傳入進來的headView 
  337.      */  
  338.     private void measureView(View child) {  
  339.         ViewGroup.LayoutParams p = child.getLayoutParams();  
  340.         if (p == null) {  
  341.             p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,  
  342.                     ViewGroup.LayoutParams.WRAP_CONTENT);  
  343.         }  
  344.         int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0 + 0, p.width);  
  345.         int lpHeight = p.height;  
  346.         int childHeightSpec;  
  347.         if (lpHeight > 0) {  
  348.             childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight,  
  349.                     MeasureSpec.EXACTLY);  
  350.         } else {  
  351.             childHeightSpec = MeasureSpec.makeMeasureSpec(0,  
  352.                     MeasureSpec.UNSPECIFIED);  
  353.         }  
  354.         child.measure(childWidthSpec, childHeightSpec);  
  355.     }  
  356.   
  357.     // ListView添加Adapter方法  
  358.     public void setAdapter(BaseAdapter adapter) {  
  359.         SimpleDateFormat format = new SimpleDateFormat("yyyy年MM月dd日  HH:mm");  
  360.         String date = format.format(new Date());  
  361.         lastUpdatedTextView.setText("最近更新:" + date);  
  362.         super.setAdapter(adapter);  
  363.     }  
  364. }  

最後更新：2017-04-03 12:53:49

  上一篇：go android下拉加載更多
  下一篇：go 調度子係統6_負載均衡（三）