listview下拉刷新

現在QQ空間和新浪微博ListView下拉刷新做的比較炫，正好公司也有這樣的需求，實現起來還是相對簡單的。關鍵是要自定義一個ListView頭部（初始化的時候裏面的控件是不可見的），然後在點擊、拖動、鬆開的時候觸發事件，顯示ListView頭，計算出拖拽的距離，跟ListView頭的高度做比較，以此來顯示對應的ListView頭裏的控件（下拉圖標、提示文字、圓形進度條等）。好了，下面貼出效果圖：

好，開始上代碼，先是佈局文件main.xml，沒什麼好說的：

1. <?xmlversion="1.0"encoding="utf-8"?>

2. <LinearLayoutxmlns:Android="http://schemas.android.com/apk/res/android"

3. android:layout_width="fill_parent"

4. android:layout_height="fill_parent"

5. android:orientation="vertical"

6. android:background="@color/mainColor">

7. 
   

8. <!-- 這裏是自定義的ListView -->

9. <com.focustech.android.CustomListView

10. android:id="@+id/list"

11. android:layout_width="fill_parent"

12. android:layout_height="wrap_content"

13. />

14. 
    

15. </LinearLayout>

ListView頭佈局head.xml：

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<RelativeLayout
android:id="@+id/head_contentLayout"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:paddingLeft="30dp">

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true">

<ImageView
android:id="@+id/head_arrowImageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/ic_pulltorefresh_arrow"/>

<ProgressBar
android:id="@+id/head_progressBar"
style="?android:attr/progressBarStyleSmall"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:visibility="gone"/>
</FrameLayout>

<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:gravity="center_horizontal"
android:orientation="vertical">

<TextView
android:id="@+id/head_tipsTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="下拉可以刷新"
android:textColor="#ffffff"
android:textSize="20sp"/>

<TextView
android:id="@+id/head_lastUpdatedTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="最近更新"
android:textColor="#cc6600"
android:textSize="10sp"/>

</LinearLayout>
</RelativeLayout>


</LinearLayout>

ListView item項佈局listview_item.xml：

<?xmlversion="1.0"encoding="utf-8"?>
<LinearLayoutxmlns:Android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
android:id="@+id/imageView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/pretty_girl"
/>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>

</LinearLayout>

清單文件也貼出來吧，其實就是自動生成的，什麼都不用改：

<?xmlversion="1.0"encoding="utf-8"?>
<manifestxmlns:android="http://schemas.android.com/apk/res/android"
package="com.focustech.android"
android:versionCode="1"
android:versionName="1.0">

<uses-sdkandroid:minSdkVersion="14"/>

<application
android:icon="@drawable/ic_launcher"
android:label="@string/app_name">
<activity
android:label="@string/app_name"
android:name="com.focustech.android.MainActivity">
<intent-filter>
<actionandroid:name="android.intent.action.MAIN"/>

<categoryandroid:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
</application>

</manifest>

此Demo的Activity：

package com.focustech.android;

import android.app.Activity;
import android.database.DataSetObserver;
import android.graphics.Color;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ListAdapter;
import android.widget.TextView;

import com.focustech.android.CustomListView.OnRefreshListener;
import com.focustech.android.R;

publicclass MainActivity extends Activity {

private ListAdapter adapter;
int size = 10;

publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

final CustomListView list = (CustomListView) findViewById(R.id.list);

        adapter = new ListAdapter() {
publicvoid unregisterDataSetObserver(DataSetObserver arg0) {

            }

publicvoid registerDataSetObserver(DataSetObserver arg0) {

            }

publicboolean isEmpty() {
returnfalse;
            }

publicboolean hasStableIds() {
returnfalse;
            }

publicint getViewTypeCount() {
return1;
            }

public View getView(int position, View convertView, ViewGroup parent) {
                convertView = LayoutInflater.from(getApplicationContext())
                        .inflate(R.layout.listview_item, null);

                TextView mTextView = (TextView) convertView
                        .findViewById(R.id.textview);
                mTextView.setText("pretty girl" + position);
                mTextView.setTextColor(Color.RED);
return convertView;
            }

publicint getItemViewType(int arg0) {
return arg0;
            }

publiclong getItemId(int arg0) {
return arg0;
            }

public Object getItem(int arg0) {
returnnull;
            }

publicint getCount() {
return size;
            }

@Override
publicboolean isEnabled(int position) {
returnfalse;
            }

@Override
publicboolean areAllItemsEnabled() {
returnfalse;
            }
        };

        list.setAdapter(adapter);
// 在list上註冊自定義的監聽器
        list.setonRefreshListener(new OnRefreshListener() {
publicvoid onRefresh() {
new Thread(new Runnable() {
publicvoid run() {
try {
                            Thread.sleep(1000);
                        } catch (Exception e) {
                        }

                        runOnUiThread(new Runnable() {
publicvoid run() {
                                list.onRefreshComplete();
                            }
                        });
                        size++;

                    }
                }).start();
            }
        });
    }

}

實現了OnScrollListener的自定義ListView：

package com.focustech.Android;

import java.util.Date;

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.TextView;

import com.focustech.android.R;

publicclass CustomListView extends ListView implements OnScrollListener {

// 鬆開刷新標誌
privatefinalstaticint RELEASE_To_REFRESH = 0;
// 下拉刷新標誌
privatefinalstaticint PULL_To_REFRESH = 1;
// 正在刷新標誌
privatefinalstaticint REFRESHING = 2;
// 刷新完成標誌
privatefinalstaticint DONE = 3;

private LayoutInflater inflater;

private LinearLayout headView;
private TextView tipsTextview;
private TextView lastUpdatedTextView;
private ImageView arrowImageView;
private ProgressBar progressBar;
// 用來設置箭頭圖標動畫效果
private RotateAnimation animation;
private RotateAnimation reverseAnimation;

// 用於保證startY的值在一個完整的touch事件中只被記錄一次
privateboolean isRecored;

privateint headContentWidth;
privateint headContentHeight;

privateint startY;
privateint firstItemIndex;

privateint state;

privateboolean isBack;

public OnRefreshListener refreshListener;

privatefinalstatic String TAG = "Monitor Current Infomation";

public CustomListView(Context context, AttributeSet attrs) {
super(context, attrs);
        init(context);
    }

privatevoid init(Context context) {

        inflater = LayoutInflater.from(context);
        headView = (LinearLayout) inflater.inflate(R.layout.head, null);

        arrowImageView = (ImageView) headView
                .findViewById(R.id.head_arrowImageView);
        arrowImageView.setMinimumWidth(50);
        arrowImageView.setMinimumHeight(50);
        progressBar = (ProgressBar) headView
                .findViewById(R.id.head_progressBar);
        tipsTextview = (TextView) headView.findViewById(R.id.head_tipsTextView);
        lastUpdatedTextView = (TextView) headView
                .findViewById(R.id.head_lastUpdatedTextView);

        measureView(headView);

        headContentHeight = headView.getMeasuredHeight();
        headContentWidth = headView.getMeasuredWidth();

        headView.setPadding(0, -1 * headContentHeight, 0, 0);
        headView.invalidate();

        Log.v("size", "width:" + headContentWidth + " height:"
                + headContentHeight);

        addHeaderView(headView);
        setOnScrollListener(this);

        animation = new RotateAnimation(0, -180,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        animation.setInterpolator(new LinearInterpolator());
        animation.setDuration(500);
        animation.setFillAfter(true);

        reverseAnimation = new RotateAnimation(-180, 0,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        reverseAnimation.setInterpolator(new LinearInterpolator());
        reverseAnimation.setDuration(500);
        reverseAnimation.setFillAfter(true);
    }

publicvoid onScroll(AbsListView arg0, int firstVisiableItem, int arg2,
int arg3) {
        firstItemIndex = firstVisiableItem;
    }

publicvoid onScrollStateChanged(AbsListView arg0, int arg1) {
    }

publicboolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
if (firstItemIndex == 0 && !isRecored) {
                startY = (int) event.getY();
                isRecored = true;

                Log.v(TAG, "記錄按下時的位置");
            }
break;

case MotionEvent.ACTION_UP:

if (state != REFRESHING) {
if (state == DONE) {
                    Log.v(TAG, "什麼都不做");
                }
if (state == PULL_To_REFRESH) {
                    state = DONE;
                    changeHeaderViewByState();

                    Log.v(TAG, "由下拉刷新狀態到刷新完成狀態");
                }
if (state == RELEASE_To_REFRESH) {
                    state = REFRESHING;
                    changeHeaderViewByState();
                    onRefresh();

                    Log.v(TAG, "由鬆開刷新狀態，到刷新完成狀態");
                }
            }

            isRecored = false;
            isBack = false;

break;

case MotionEvent.ACTION_MOVE:
int tempY = (int) event.getY();
if (!isRecored && firstItemIndex == 0) {
                Log.v(TAG, "記錄拖拽時的位置");
                isRecored = true;
                startY = tempY;
            }
if (state != REFRESHING && isRecored) {
// 可以鬆開刷新了
if (state == RELEASE_To_REFRESH) {
// 往上推，推到屏幕足夠掩蓋head的程度，但還沒有全部掩蓋
if ((tempY - startY < headContentHeight)
                            && (tempY - startY) > 0) {
                        state = PULL_To_REFRESH;
                        changeHeaderViewByState();

                        Log.v(TAG, "由鬆開刷新狀態轉變到下拉刷新狀態");
                    }
// 一下子推到頂
elseif (tempY - startY <= 0) {
                        state = DONE;
                        changeHeaderViewByState();

                        Log.v(TAG, "由鬆開刷新狀態轉變到done狀態");
                    }
// 往下拉，或者還沒有上推到屏幕頂部掩蓋head
else {
// 不用進行特別的操作，只用更新paddingTop的值就行了
                    }
                }
// 還沒有到達顯示鬆開刷新的時候,DONE或者是PULL_To_REFRESH狀態
if (state == PULL_To_REFRESH) {
// 下拉到可以進入RELEASE_TO_REFRESH的狀態
if (tempY - startY >= headContentHeight) {
                        state = RELEASE_To_REFRESH;
                        isBack = true;
                        changeHeaderViewByState();

                        Log.v(TAG, "由done或者下拉刷新狀態轉變到鬆開刷新");
                    }
// 上推到頂了
elseif (tempY - startY <= 0) {
                        state = DONE;
                        changeHeaderViewByState();

                        Log.v(TAG, "由Done或者下拉刷新狀態轉變到done狀態");
                    }
                }

// done狀態下
if (state == DONE) {
if (tempY - startY > 0) {
                        state = PULL_To_REFRESH;
                        changeHeaderViewByState();
                    }
                }

// 更新headView的size
if (state == PULL_To_REFRESH) {
                    headView.setPadding(0, -1 * headContentHeight
                            + (tempY - startY), 0, 0);
                    headView.invalidate();
                }

// 更新headView的paddingTop
if (state == RELEASE_To_REFRESH) {
                    headView.setPadding(0, tempY - startY - headContentHeight,
0, 0);
                    headView.invalidate();
                }
            }
break;
        }
returnsuper.onTouchEvent(event);
    }

// 當狀態改變時候，調用該方法，以更新界面
privatevoid changeHeaderViewByState() {
switch (state) {
case RELEASE_To_REFRESH:

            arrowImageView.setVisibility(View.VISIBLE);
            progressBar.setVisibility(View.GONE);
            tipsTextview.setVisibility(View.VISIBLE);
            lastUpdatedTextView.setVisibility(View.VISIBLE);

            arrowImageView.clearAnimation();
            arrowImageView.startAnimation(animation);

            tipsTextview.setText("鬆開可以刷新");

            Log.v(TAG, "當前狀態，鬆開刷新");
break;
case PULL_To_REFRESH:

            progressBar.setVisibility(View.GONE);
            tipsTextview.setVisibility(View.VISIBLE);
            lastUpdatedTextView.setVisibility(View.VISIBLE);
            arrowImageView.clearAnimation();
            arrowImageView.setVisibility(View.VISIBLE);
if (isBack) {
                isBack = false;
                arrowImageView.clearAnimation();
                arrowImageView.startAnimation(reverseAnimation);

                tipsTextview.setText("下拉可以刷新");
            } else {
                tipsTextview.setText("下拉可以刷新");
            }
            Log.v(TAG, "當前狀態，下拉刷新");
break;

case REFRESHING:

            headView.setPadding(0, 0, 0, 0);
            headView.invalidate();

            progressBar.setVisibility(View.VISIBLE);
            arrowImageView.clearAnimation();
            arrowImageView.setVisibility(View.GONE);
            tipsTextview.setText("正在刷新，請稍後...");
            lastUpdatedTextView.setVisibility(View.GONE);

            Log.v(TAG, "當前狀態,正在刷新...");
break;
case DONE:
            headView.setPadding(0, -1 * headContentHeight, 0, 0);
            headView.invalidate();

            progressBar.setVisibility(View.GONE);
            arrowImageView.clearAnimation();
// 此處更換圖標
            arrowImageView.setImageResource(R.drawable.ic_pulltorefresh_arrow);

            tipsTextview.setText("下拉可以刷新");
            lastUpdatedTextView.setVisibility(View.VISIBLE);

            Log.v(TAG, "當前狀態，done");
break;
        }
    }

publicvoid setonRefreshListener(OnRefreshListener refreshListener) {
this.refreshListener = refreshListener;
    }

publicinterface OnRefreshListener {
publicvoid onRefresh();
    }

publicvoid onRefreshComplete() {
        state = DONE;
        lastUpdatedTextView.setText("最近更新:" + new Date().toLocaleString());
        changeHeaderViewByState();
    }

privatevoid onRefresh() {
if (refreshListener != null) {
            refreshListener.onRefresh();
        }
    }

// 此處是“估計”headView的width以及height
privatevoid measureView(View child) {
        ViewGroup.LayoutParams p = child.getLayoutParams();
if (p == null) {
            p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_PARENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);
        }
int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0 + 0, p.width);
int lpHeight = p.height;
int childHeightSpec;
if (lpHeight > 0) {
            childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight,
                    MeasureSpec.EXACTLY);
        } else {
            childHeightSpec = MeasureSpec.makeMeasureSpec(0,
                    MeasureSpec.UNSPECIFIED);
        }
        child.measure(childWidthSpec, childHeightSpec);
    }

}