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

仿新浪微博的ListView下拉更新功能

https://blog.csdn.net/wangkuifeng0118/article/details/7463594

    

      OK，今天我們要實現的就是上麵的下拉刷新功能。

      首先實現下拉刷新的布局文件 layout/head.xml

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2.   
  3. <!-- ListView的頭部 -->  
  4.   
  5. <LinearLayout  
  6.   xmlns:android="https://schemas.android.com/apk/res/android"  
  7.   android:layout_width="fill_parent"  
  8.   android:layout_height="wrap_content"  
  9.   android:background="#ffffff"  
  10.  >  
  11.     
  12.   <!-- 內容 -->  
  13.   <RelativeLayout  
  14.   android:layout_width="fill_parent"  
  15.   android:layout_height="wrap_content"  
  16.   android:id="@+id/head_contentLayout"  
  17.   android:paddingLeft="30dp"  
  18.   >  
  19.     
  20.   <!-- 箭頭圖像、進度條 -->  
  21.   <FrameLayout  
  22.   android:layout_width="wrap_content"  
  23.   android:layout_height="wrap_content"  
  24.   android:layout_alignParentLeft="true"  
  25.   android:layout_centerVertical="true"  
  26.   >  
  27.     
  28.   <!-- 箭頭 -->  
  29.   <ImageView  
  30.   android:layout_width="wrap_content"  
  31.   android:layout_height="wrap_content"  
  32.   android:layout_gravity="center"  
  33.   android:src="@drawable/arrow_down"  
  34.   android:id="@+id/head_arrowImageView"  
  35.   />  
  36.     
  37.   <!-- 進度條 -->  
  38.   <ProgressBar  
  39.   android:layout_width="wrap_content"  
  40.   android:layout_height="wrap_content"  
  41.   style="?android:attr/progressBarStyleSmall"  
  42.   android:layout_gravity="center"  
  43.   android:id="@+id/head_progressBar"  
  44.     
  45.   android:visibility="gone"  
  46.   />  
  47.     
  48.   </FrameLayout>  
  49.     
  50.   <!-- 提示、最近更新 -->  
  51.   <LinearLayout  
  52.   android:layout_width="wrap_content"  
  53.   android:layout_height="wrap_content"  
  54.   android:layout_centerHorizontal="true"  
  55.   android:orientation="vertical"  
  56.   android:gravity="center_horizontal"  
  57.   >  
  58.     
  59.   <!-- 提示 -->  
  60.   <TextView  
  61.   android:layout_width="wrap_content"  
  62.   android:layout_height="wrap_content"  
  63.   android:text="下拉刷新"  
  64.   android:textSize="15dp"  
  65.   android:id="@+id/head_tipsTextView"  
  66.   />  
  67.     
  68.   <!-- 最近更新 -->  
  69.   <TextView  
  70.   android:layout_width="wrap_content"  
  71.   android:layout_height="wrap_content"  
  72.   android:id="@+id/head_lastUpdatedTextView"  
  73.   android:text="上次更新"  
  74.   android:textSize="12dp"  
  75.   />  
  76.     
  77.   </LinearLayout>  
  78.     
  79.     
  80.   </RelativeLayout>  
  81.     
  82.     
  83. </LinearLayout>  
        然後設置item的布局模板item.xml：

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="wrap_content"  
  5.     android:gravity="center_vertical"  
  6.     android:background="#ffffff"  
  7.     android:orientation="horizontal" >  
  8.   
  9.     <ImageView  
  10.         android:id="@+id/imageView_item"  
  11.         android:layout_width="wrap_content"  
  12.         android:layout_height="wrap_content"  
  13.         android:layout_marginLeft="10dp"  
  14.         android:src="@drawable/ic_launcher" />  
  15.   
  16.     <TextView  
  17.         android:id="@+id/textView_item"  
  18.         android:layout_width="wrap_content"  
  19.         android:layout_height="wrap_content"  
  20.         android:layout_marginLeft="10dp"  
  21.         android:text="TextView" />  
  22.   
  23. </LinearLayout>  
     接下來是main.xml布局：

 

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  
  3.     android:layout_width="fill_parent"  
  4.     android:layout_height="fill_parent"  
  5.     android:orientation="vertical" >  
  6.       
  7.     <cn.com.karl.list.MyListView  
  8.     android:layout_width="fill_parent"  
  9.     android:layout_height="fill_parent"  
  10.     android:id="@+id/listView"  
  11.     />  
  12.       
  13.   
  14. </LinearLayout>  

   這裏的MyListView是我們自定義的ListView，因為頂部的下拉刷新係統的ListView不能夠實現，所以我們需要自定義ListView。

   布局文件搞定，下麵看下自定義的MyListView：

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

最後在MainActivity中添加內容：

[html] view plaincopy
  1. public class MainActivity extends Activity {  
  2.   
  3.     private LinkedList<String> data;  
  4.     private BaseAdapter adapter;  
  5.   
  6.     public void onCreate(Bundle savedInstanceState) {  
  7.         super.onCreate(savedInstanceState);  
  8.         setContentView(R.layout.main);  
  9.   
  10.         data = new LinkedList<String>();  
  11.         for(int i=0;i<10;i++){  
  12.             data.add(String.valueOf(i));  
  13.         }  
  14.   
  15.         final MyListView listView = (MyListView) findViewById(R.id.listView);  
  16.         adapter = new BaseAdapter() {  
  17.             public View getView(int position, View convertView, ViewGroup parent) {  
  18.                  convertView=LayoutInflater.from(getApplicationContext()).inflate(R.layout.item, null);  
  19.                 TextView textView = (TextView) convertView.findViewById(R.id.textView_item);  
  20.                 textView.setText(data.get(position));  
  21.                 return convertView;  
  22.             }  
  23.   
  24.             public long getItemId(int position) {  
  25.                 return position;  
  26.             }  
  27.   
  28.             public Object getItem(int position) {  
  29.                 return data.get(position);  
  30.             }  
  31.   
  32.             public int getCount() {  
  33.                 return data.size();  
  34.             }  
  35.         };  
  36.         listView.setAdapter(adapter);  
  37.   
  38.         listView.setonRefreshListener(new OnRefreshListener() {  
  39.             public void onRefresh() {  
  40.                 new AsyncTask<Void, Void, Void>() {  
  41.                     protected Void doInBackground(Void... params) {  
  42.                         try {  
  43.                             Thread.sleep(1000);  
  44.                         } catch (Exception e) {  
  45.                             e.printStackTrace();  
  46.                         }  
  47.                         data.addFirst("刷新後的內容");  
  48.                         return null;  
  49.                     }  
  50.   
  51.                     @Override  
  52.                     protected void onPostExecute(Void result) {  
  53.                         adapter.notifyDataSetChanged();  
  54.                         listView.onRefreshComplete();  
  55.                     }  
  56.   
  57.                 }.execute(null);  
  58.             }  
  59.         });  
  60.     }  
  61. }  

    運行效果：




   

    源碼下載地址：仿新浪微博的ListView下拉更新功能


最後更新：2017-04-02 16:47:34

  上一篇：go C語言編譯流程
  下一篇：go Android 縮放圖片