ListView實現下拉刷新功能

　　很久沒有寫博客了，感覺都懶惰了，今天說一下一個自定義的空間，就是ListView下拉列表可以刷新的功能，相信很多同學都看到過這種功能，最典型的就是新浪微博的下拉刷新列表了。

　　廢話不多說，首先呢，下拉刷新的那個帶有progressBar的是ListView的headView,所以首先我們需要自定義一個HeadView，如下所示：

<?xml version="1.0" encoding="utf-8"?>

<!-- ListView的頭部 -->

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >

    <!-- 內容 -->
    <RelativeLayout 
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/head_contentLayout" >
        
        <!-- 箭頭頭像、進度條 -->
        <FrameLayout 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true">
            
            <!-- 箭頭 -->
            <ImageView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:id="@+id/head_arrowImageView"
                android:src="@drawable/arrow"/>
            
            <!-- 進度條 -->
            <ProgressBar 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                style="?android:attr/progressBarStyleSmall"
                android:layout_gravity="center"
                android:visibility="gone"
                android:id="@+id/head_progressBar"/>
        </FrameLayout>
        
        <!-- 提示、最近更新 -->
        <LinearLayout 
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:orientation="vertical"
            android:gravity="center_horizontal">
            
            <!-- 提示 -->
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:textColor="@android:color/white"
                android:id="@+id/head_tipsTextView"
                android:textSize="@dimen/head_tips_size"
                android:text="@string/head_tips_text"/>
            
            <!-- 最近更新 -->
            <TextView 
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/head_lastUpdatedTextView"
                android:textColor="@color/gold"
                android:text="@string/lash_updated_text"
                android:textSize="@dimen/last_updated_size"/>
        </LinearLayout>
        
    </RelativeLayout>

</LinearLayout>

　　FrameLayout里面是兩個圖標，一個是下拉的箭頭，另一個是刷新的ProgressBar，因為這兩個不會同時出現，所以我們把他們房子一個FrameLayout里面。

　　右邊是兩個TextView，一個顯示提示的信息，一個顯示上次更新的詳情。

　　headView完成了，我們要繼續ListView，並添加HeadView，在ListView中的onTouchEvent事件里面對滑動做監聽之類的。

　　如下是代碼：

package com.alex.helloworld;

import java.util.Date;

import android.content.Context;
import android.util.AttributeSet;
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.ListAdapter;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.TextView;

public class CustomListView extends ListView implements OnScrollListener {

    private final static int RELEASE_TO_REFRESH = 0;
    private final static int PULL_TO_REFRESH = 1;
    //正在刷新
    private final static int REFRESHING = 2;
    //刷新完成
    private final static int DONE = 3;
    private final static int LOADING = 4;
    
    private final static int RADIO = 3;
    
    private LayoutInflater mInflater;
    private LinearLayout mHeadView;
    private TextView mTipsTextView;
    private TextView mLastUpdatedTextView;
    private ImageView mArrowImageView;
    private ProgressBar mProgressBar;
    
    private RotateAnimation mAnimation;
    private RotateAnimation mReverseAnimation;
    private boolean mIsRecored;
    private int mHeadContentWidth;
    private int mHeadContentHeight;
    private int mStartY;
    private int mFirstItemIndex;
    private int mState;
    private boolean mIsBack;
    private boolean mISRefreshable;
    private OnRefreshListener mRefreshListener;
    
    public CustomListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context);
    }

    private void init(Context context) {
//        setCacheColorHint(android.R.color.black);
        mInflater = LayoutInflater.from(context);
        mHeadView = (LinearLayout) mInflater.inflate(R.layout.head, null);
        mArrowImageView = (ImageView) mHeadView.findViewById(R.id.head_arrowImageView);
//        mArrowImageView.setMinimumWidth(70);
//        mArrowImageView.setMinimumHeight(50);
        mProgressBar = (ProgressBar) mHeadView.findViewById(R.id.head_progressBar);
        mTipsTextView = (TextView) mHeadView.findViewById(R.id.head_tipsTextView);
        mLastUpdatedTextView = (TextView) mHeadView.findViewById(R.id.head_lastUpdatedTextView);
        
        measureView(mHeadView);
        mHeadContentHeight = mHeadView.getMeasuredHeight();
        System.out.println("mHeadContentHeight = " + mHeadContentHeight);
        mHeadContentWidth = mHeadView.getMeasuredWidth();
        System.out.println("mHeadContentWidth = " + mHeadContentWidth);
        mHeadView.setPadding(0, -1 * mHeadContentHeight, 0, 0);
        mHeadView.invalidate();
        addHeaderView(mHeadView, null, false);
        setOnScrollListener(this);
        
        mAnimation = new RotateAnimation(0, -180, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        mAnimation.setInterpolator(new LinearInterpolator());
        mAnimation.setDuration(250);
        mAnimation.setFillAfter(true);
        
        mReverseAnimation = new RotateAnimation(-180, 0, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        mReverseAnimation.setInterpolator(new LinearInterpolator());
        mReverseAnimation.setDuration(250);
        mReverseAnimation.setFillAfter(true);
        
        mState = DONE;
        mISRefreshable = false;
    }
    
    private void measureView(View child) {
        android.view.ViewGroup.LayoutParams params = child.getLayoutParams();
        System.out.println("params = " + params);
        if(params == null) {
            params = new LayoutParams(android.view.ViewGroup.LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        }
        System.out.println("lpWidth = " + params.width);
        int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0+0, params.width);
        System.out.println("childWidthSpec = " + childWidthSpec);
        int lpHeight = params.height;
        System.out.println("lpHeight = " + lpHeight);
        int childHeightSpec;
        if(lpHeight > 0) {
            childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight, MeasureSpec.EXACTLY);
        } else {
            childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight, MeasureSpec.UNSPECIFIED);
        }
        System.out.println("childHeightSpec = " + childHeightSpec);
        child.measure(childWidthSpec, childHeightSpec);
    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        
    }

    @Override
    public void onScroll(AbsListView view, int firstVisibleItem,
            int visibleItemCount, int totalItemCount) {
        mFirstItemIndex = firstVisibleItem;
    }

    public interface OnRefreshListener {
        public void onRefresh();
    }
    
    private void onRefresh() {
        if(mRefreshListener != null) {
            mRefreshListener.onRefresh();
        }
    }
    
    public void onRefreshComplete() {
        mState = DONE;
        mLastUpdatedTextView.setText("已加載完成：" + new Date().toLocaleString());
        changeHeaderViewByState();
    }
    
    public void setonRefreshListener(OnRefreshListener onRefreshListener) {
        this.mRefreshListener = onRefreshListener;
        mISRefreshable = true;
    }
    
    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        if(mISRefreshable) {
            switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if(mFirstItemIndex == 0 && !mIsRecored) {
                    mIsRecored = true;
                    mStartY = (int) ev.getY();
                }
                break;

            case MotionEvent.ACTION_UP:
                if(mState != REFRESHING && mState != LOADING) {
                    if(mState == DONE) {
                        
                    }
                    if(mState == PULL_TO_REFRESH) {
                        mState = DONE;
                        changeHeaderViewByState();
                    }
                    if(mState == RELEASE_TO_REFRESH) {
                        mState = REFRESHING;
                        changeHeaderViewByState();
                        onRefresh();
                    }
                }
                mIsBack = false;
                mIsRecored = false;
                break;
                
            case MotionEvent.ACTION_MOVE:
                int tempY = (int) ev.getY();
                if(!mIsRecored && mFirstItemIndex == 0) {
                    mIsRecored = true;
                    mStartY = tempY;
                }
                if(mState != REFRESHING && mIsRecored && mState != LOADING) {
                    if(mState == RELEASE_TO_REFRESH) {
                        setSelection(0);
                        if((tempY - mStartY)/RADIO < mHeadContentHeight && (tempY - mStartY) > 0) {
                            mState = PULL_TO_REFRESH;
                            changeHeaderViewByState();
                        } else if(tempY - mStartY <= 0) {
                            mState = DONE;
                            changeHeaderViewByState();
                        }
                    }
                    
                    if(mState == PULL_TO_REFRESH) {
                        setSelection(0);
                        if((tempY - mStartY)/RADIO >= mHeadContentHeight) {
                            mState = RELEASE_TO_REFRESH;
                            mIsBack = true;
                            changeHeaderViewByState();
                        }
                    } else if(tempY - mStartY <= 0) {
                        mState = DONE;
                        changeHeaderViewByState();
                    }
                    
                    if(mState == DONE) {
                        if(tempY - mStartY > 0) {
                            mState = PULL_TO_REFRESH;
                            changeHeaderViewByState();
                        }
                    }
                    
                    if(mState == PULL_TO_REFRESH) {
                        mHeadView.setPadding(0, -1 * mHeadContentHeight + (tempY - mStartY)/RADIO, 0, 0);
                    }
                    
                    if(mState == RELEASE_TO_REFRESH) {
                        mHeadView.setPadding(0, (tempY - mStartY)/RADIO - mHeadContentHeight, 0, 0);
                    }
                }
                break;
                
            default:
                break;
            }
        }
        return super.onTouchEvent(ev);
    }

    private void changeHeaderViewByState() {
        switch (mState) {
        case PULL_TO_REFRESH:
            mProgressBar.setVisibility(GONE);
            mTipsTextView.setVisibility(VISIBLE);
            mLastUpdatedTextView.setVisibility(VISIBLE);
            mArrowImageView.clearAnimation();
            mArrowImageView.setVisibility(VISIBLE);
            if(mIsBack) {
                mIsBack = false;
                mArrowImageView.clearAnimation();
                mArrowImageView.startAnimation(mReverseAnimation);
                mTipsTextView.setText("isBack is true!!!");
            } else {
                mTipsTextView.setText("isBack is false!!!");
            }
            break;

        case DONE:
            mHeadView.setPadding(0, -1 * mHeadContentHeight, 0, 0);
            mProgressBar.setVisibility(GONE);
            mArrowImageView.clearAnimation();
            mArrowImageView.setImageResource(R.drawable.arrow);
            mTipsTextView.setText("已經加載完畢-DONE");
            mLastUpdatedTextView.setVisibility(VISIBLE);
            break;
            
        case REFRESHING:
            mHeadView.setPadding(0, 0, 0, 0);
            mProgressBar.setVisibility(VISIBLE);
            mArrowImageView.clearAnimation();
            mArrowImageView.setVisibility(GONE);
            mTipsTextView.setText("正在加載中……REFRESHING");
            break;
            
        case RELEASE_TO_REFRESH:
            mArrowImageView.setVisibility(VISIBLE);
            mProgressBar.setVisibility(GONE);
            mTipsTextView.setVisibility(VISIBLE);
            mLastUpdatedTextView.setVisibility(VISIBLE);
            mArrowImageView.clearAnimation();
            mArrowImageView.startAnimation(mAnimation);
            mTipsTextView.setText("請釋放刷新");
            break;
        default:
            break;
        }
    }
    
    @Override
    public void setAdapter(ListAdapter adapter) {
        mLastUpdatedTextView.setText("this is in MyListView:" + new Date().toLocaleString());
        super.setAdapter(adapter);
    }
}

 

　　代碼有點多，需要耐心的看，這里我主要說一下大體的思路，細節就不在說了

　　還是先把截圖看一下吧，對照着比較好說：

　　

 

　　代碼里面寫了一個接口，用作刷新用的。

 

　　手指按下屏幕的時候會走Action down，這是有一堆判斷條件，如果滿足判斷條件的話，就記錄下Y軸的坐標

　　如果手機繼續在屏幕上滑動，會走action move，如果手指不松開，一直滑動，會一直走action move，這時也可以拿到Y軸的坐標，判斷現在的狀態，沒有刷新，沒有加載，剛開始的默認狀態是done的，如果向下滑動，導致坐標差大於0，將狀態改為PULL_TO_REFRESH，同時改變控件的一些狀態，比如可見性等。

同時要改變headView的padding狀態，導致headview漸漸的變為可見：if(mState == PULL_TO_REFRESH) {
      mHeadView.setPadding(0, -1 * mHeadContentHeight + (tempY - mStartY)/RADIO, 0, 0);
     }

如果把padding設置為-1*高度，就會導致headView看不見了。

這時手指繼續下滑，如果終點和起點的差值/3 還要大於headView的高度的話，這時改變狀態為RELEASE_TO_REFRESH，mState = RELEASE_TO_REFRESH;
       mIsBack = true;這就意味着松手就可以刷新了，當然是要滿足終點和起點的差值/3 還要大於headView的高度，如果tempY - mStartY <= 0，說明在向回滑動，狀態改為mState = DONE;同時改變控件的狀態。

現在只能向回滑動，因為向下滑動不會有任何效果，(tempY - mStartY)/RADIO < mHeadContentHeight && (tempY - mStartY) > 0，繼續下滑，改變狀態不做操作，同時改變控件狀態，向回滑動，改變狀態，mState = DONE;同時改變控件狀態。

當狀態為mState == PULL_TO_REFRESH時，松開手指，就是action up，不做任何改變，當狀態為mState == RELEASE_TO_REFRESH時，松手，開始刷新操作。

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
    
    <com.alex.helloworld.CustomListView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/listView"/>

</LinearLayout>

Activity的文件：

package com.alex.helloworld;

import java.util.ArrayList;

import com.alex.helloworld.CustomListView.OnRefreshListener;

import android.app.Activity;
import android.app.AlertDialog.Builder;
import android.content.DialogInterface;
import android.content.pm.PackageManager.NameNotFoundException;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.Menu;
import android.widget.ArrayAdapter;
import android.widget.ListView;

public class HelloWord extends Activity {

//    private TextView mTextView;
    private SlidingLayout slidingLayout;
    private ListView contentList;
    private ArrayAdapter<String> contentListAdapter;
    private String[] contentItems = {
            "Content Item 1", "Content Item 2", "Content Item 3",
            "Content Item 4", "Content Item 5", "Content Item 6", "Content Item 7",
            "Content Item 8", "Content Item 9", "Content Item 10", "Content Item 11",
            "Content Item 12", "Content Item 13", "Content Item 14", "Content Item 15",
            "Content Item 16" 
    };
    
    private ArrayList<String> mArrays = new ArrayList<String>();
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.test);
        for(int i=0; i<contentItems.length; i++) {
            mArrays.add(contentItems[i]);
        }
//        slidingLayout = (SlidingLayout) findViewById(R.id.sliding_layout);
//        Button showLeftButton = (Button) findViewById(R.id.show_left_menu);
//        Button showRightButton = (Button) findViewById(R.id.show_right_menu);
//        contentList = (ListView) findViewById(R.id.contentList);
//        contentListAdapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, contentItems);
//        contentList.setAdapter(contentListAdapter);
//        mTextView = (TextView) findViewById(R.id.tv);
//        mTextView.setText("");
//        String product = Build.PRODUCT;
//        mTextView.append(product + "\n");
//        mTextView.append(Build.MANUFACTURER + "\n");
//        mTextView.append(Build.DISPLAY + "\n");
//        mTextView.append(Build.VERSION.SDK);
//        checkUpdate();
        
        final CustomListView listView = (CustomListView) findViewById(R.id.listView);
        final ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, mArrays);
        listView.setAdapter(adapter);
        listView.setonRefreshListener(new OnRefreshListener() {
            
            @Override
            public void onRefresh() {
                new AsyncTask<Void, Void, Void> () {

                    @Override
                    protected Void doInBackground(Void... params) {
                        try {
                            Thread.sleep(1000);
                        } catch (InterruptedException e) {
                            e.printStackTrace();
                        }
                        mArrays.add("add a new one");
                        return null;
                    }
                    
                    protected void onPostExecute(Void result) {
                        adapter.notifyDataSetChanged();
                        listView.onRefreshComplete();
                    };
                    
                }.execute();
            }
        });
    }


//    @Override
//    public boolean onCreateOptionsMenu(Menu menu) {
//        getMenuInflater().inflate(R.menu.hello_word, menu);
//        return true;
//    }
    
//    @Override
//    protected void onDestroy() {
//        super.onDestroy();
//    }
    
//    private void checkUpdate() {
//        System.out.println("checkUpdate");
//        int localVersion = 0;
//        int serverVersion = 0;
//        try {
//            localVersion = getPackageManager().getPackageInfo(getPackageName(), 0).versionCode;
//            serverVersion = 2;
//        } catch (NameNotFoundException e) {
//            e.printStackTrace();
//        }
//        
//        if(serverVersion > localVersion) {
//            Builder builder = new Builder(this);
//            builder.setTitle("更新軟件");
//            builder.setMessage("更新");
//            builder.setPositiveButton(android.R.string.ok, new DialogInterface.OnClickListener() {
//                
//                @Override
//                public void onClick(DialogInterface dialog, int which) {
//                    
//                }
//            }).setNegativeButton(android.R.string.cancel, new DialogInterface.OnClickListener() {
//                
//                @Override
//                public void onClick(DialogInterface dialog, int which) {
//                    dialog.dismiss();
//                }
//            });
//            builder.show();
//        }
//    }
}

就這么多吧。