Android自定义ListView(一) - 可下拉刷新的ListView

以前做项目时，下拉刷新的ListView与上拉加载的ListView（或者说是具有分页功能的ListView Android自定义ListView(二) - 可上拉加载的ListView（即具有分页功能的ListView））经常用到，其中的原理也并不高深，十分简单，今天就来分别实现一下，可下拉刷新的ListView与可上拉加载的ListView。

        下面是Android自定义ListView第一个系列--可下拉刷新的ListView。

        首先看一下最终效果图：

        

下面先大体讲一下实现的过程：

        1.首先写好ListView的头布局xml文件，自定义PullToRefreshListView，继承自ListView；

        2.PullToRefreshListView继承OnScrollListener接口，监听onScroll与onScrollStateChanged方法；

        3.在PullToRefreshListView中重写onTouchEvent方法处理各种状态（下拉状态，正在刷新状态等）下的PullToRefreshListView的滑动事件

        4.在PullToRefreshListView中定义接口IReflashListener实现刷新数据的回调。

下在粘上主要的代码：

        

package com.ssa.pulltorefreshlistview;

import java.text.SimpleDateFormat;
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.RotateAnimation;
import android.widget.AbsListView;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.ProgressBar;
import android.widget.AbsListView.OnScrollListener;
import android.widget.TextView;

public class PullToRefreshListView extends ListView implements OnScrollListener {
    private View mHeader;//头布局
    private int mHeaderHight;//头布局的高度
    private int mFirstVisibleItem;//当前第一个可见的Item的位置
    private boolean isRemark;//标记,当前是在listView的最顶端按下的
    private int mStartY;//按下的Y值
    private EState mState = EState.NONE;
    private int mScrollState;//滑动的状态，在onScrollStateChanged方法中获取
    private IReflashListener mListener;

    enum EState {
        NONE, //正常状态
        PULL, //提示下拉状态
        REALSE, //提示释放状态
        REFLASHING;//正在刷新状态
    }

    /**
     * 构造方法，默认有三个构造方法，自定义View至少要实现下面这个具有两个参数的构造方法，以让
     * 系统框架能够正确的回调，做一些初始化的操作。
     * @param context
     * @param attrs
     */
    public PullToRefreshListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    /**
     * 添加header布局文件
     * 
     * @param context
     */
    private void initView(Context context) {
        LayoutInflater inflater = LayoutInflater.from(context);
        mHeader = inflater.inflate(R.layout.header_item, null);
        measureView(mHeader);
        mHeaderHight = mHeader.getMeasuredHeight();
        setTopPadding(-mHeaderHight);
        this.addHeaderView(mHeader);
        this.setOnScrollListener(this);
    }

    /**
     * 测量布局 占的宽 高
     * @param view
     */
    private void measureView(View view) {
        ViewGroup.LayoutParams p = view.getLayoutParams();
        if (p == null) {
            p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            //改为下面注释掉的语句也是可以的
            //p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT);
        }
        int width = ViewGroup.getChildMeasureSpec(0, 0, p.width);
        int height;
        int tempHeight = p.height;
        if (tempHeight > 0) {
            height = MeasureSpec.makeMeasureSpec(tempHeight, MeasureSpec.EXACTLY);
        } else {
            height = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        }
        view.measure(width, height);
    }

    /**
     * 测量布局 占的宽 高 第二种简洁的方法
     * 
     * 此处注意，经过试验,注释掉的语句同样可以正确的测量出View的宽高
     * 这里读者要注意，此处可以正确的测量，并不此代码在其它地方一定也能得到View正确的宽高
     * 测量View情况要分很多种，不能一概而论，大家可以参考CSDN上一些测量量View的博客，我查阅了很多博客与书籍
     * 至今没有一个很好的定论，不过，CSDN上任玉刚老师讲的比较不错，大家可以去看一下他的博客。
     * @param view
     */
    private void measureView2(View view) {
        int width = View.MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        int height = View.MeasureSpec.makeMeasureSpec((1 << 30) - 1, MeasureSpec.AT_MOST);
        //int width = View.MeasureSpec.makeMeasureSpec((1<<30)-1, MeasureSpec.AT_MOST);
        //int height = View.MeasureSpec.makeMeasureSpec((1<<30)-1, MeasureSpec.AT_MOST);
        //int width = View.MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        //int height = View.MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        //int width = View.MeasureSpec.makeMeasureSpec((1<<30)-1, MeasureSpec.AT_MOST);
        //int height = View.MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED);
        view.measure(width, height);
    }

    /**
     * 设置header布局的上边距
     * @param headerHight
     */
    private void setTopPadding(int headerHight) {
        mHeader.setPadding(mHeader.getPaddingLeft(), headerHight, mHeader.getPaddingRight(), mHeader.getPaddingBottom());
        mHeader.invalidate();
    }

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

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        this.mScrollState = scrollState;
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                if (0 == mFirstVisibleItem) {
                    isRemark = true;
                    mStartY = (int) ev.getY();
                }
                break;
            case MotionEvent.ACTION_MOVE:
                onMove(ev);
                break;
            case MotionEvent.ACTION_UP:
                switch (mState) {
                    case NONE:
                        break;
                    case PULL:
                        mState = EState.NONE;
                        isRemark = false;
                        reflashViewByState();
                        break;
                    case REALSE:
                        mState = EState.REFLASHING;
                        reflashViewByState();
                        //TODO: 加载数据
                        this.mListener.onReflash();
                        break;
                    case REFLASHING:
                        break;
                    default:
                        break;
                }
                break;
            default:
                break;
        }
        return super.onTouchEvent(ev);
    }

    /**
     * 判断移动过程中的操作
     * @param ev
     */
    private void onMove(MotionEvent ev) {
        if (!isRemark) {
            return;
        }
        int tempY = (int) ev.getY();
        int space = tempY - mStartY;
        int topPadding = space - mHeaderHight;
        switch (mState) {
            case NONE:
                if (space > 0) {
                    mState = EState.PULL;
                    reflashViewByState();
                }
                break;
            case PULL:
                setTopPadding(topPadding);
                if (space > mHeaderHight + 30 && mScrollState == SCROLL_STATE_TOUCH_SCROLL) {
                    mState = EState.REALSE;
                    reflashViewByState();
                }
                break;
            case REALSE:
                setTopPadding(topPadding);
                if (space < mHeaderHight + 30) {
                    mState = EState.PULL;
                    reflashViewByState();
                } else if (space <= 0) {
                    mState = EState.NONE;
                    isRemark = false;
                    reflashViewByState();
                }
                break;
            case REFLASHING:

                break;
            default:
                break;
        }
    }

    /**
     * 根据当前状态显示界面
     */
    private void reflashViewByState() {
        TextView tvTip = (TextView) mHeader.findViewById(R.id.tv_tip);
        ImageView ivMark = (ImageView) mHeader.findViewById(R.id.iv_arrow);
        ProgressBar progress = (ProgressBar) mHeader.findViewById(R.id.pb_loading);
        RotateAnimation anim1 = new RotateAnimation(0, 180, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        anim1.setDuration(500);
        anim1.setFillAfter(true);
        RotateAnimation anim2 = new RotateAnimation(180, 0, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        anim2.setDuration(500);
        anim2.setFillAfter(true);
        switch (mState) {
            case NONE:
                setTopPadding(-mHeaderHight);
                ivMark.clearAnimation();
                break;
            case PULL:
                ivMark.setVisibility(View.VISIBLE);
                progress.setVisibility(View.GONE);
                tvTip.setText(getResources().getString(R.string.header_tip_pull));
                ivMark.clearAnimation();
                ivMark.setAnimation(anim2);
                break;
            case REALSE:
                ivMark.setVisibility(View.VISIBLE);
                progress.setVisibility(View.GONE);
                tvTip.setText(getResources().getString(R.string.header_tip_realese));
                ivMark.clearAnimation();
                ivMark.setAnimation(anim1);
                break;
            case REFLASHING:
                setTopPadding(50);
                ivMark.setVisibility(View.GONE);
                progress.setVisibility(View.VISIBLE);
                tvTip.setText(getResources().getString(R.string.header_tip_refresh));
                ivMark.clearAnimation();
                break;
            default:
                break;
        }
    }

    /**
     * 更新完数据之后调用的方法
     */
    public void reflashComplete() {
        mState = EState.NONE;
        isRemark = false;
        reflashViewByState();
        TextView lastUpdateTime = (TextView) mHeader.findViewById(R.id.tv_last_time);
        SimpleDateFormat formate = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
        Date date = new Date(System.currentTimeMillis());
        String time = formate.format(date);
        lastUpdateTime.setText(time);
    }

    /**
     * 设置回调接口
     * @param listener
     */
    public void setReflashListener(IReflashListener listener) {
        this.mListener = listener;
    }

    /**
     * 刷新数据接口
     *
     */
    public interface IReflashListener {
        void onReflash();
    }
}

MainActivity的代码：

        

package com.ssa.pulltorefreshlistview;

import java.util.ArrayList;

import com.ssa.pulltorefreshlistview.PullToRefreshListView.IReflashListener;

import android.app.Activity;
import android.os.Bundle;
import android.os.Handler;

public class MainActivity extends Activity implements IReflashListener {
    private PullToRefreshListView mPullToRefreshListView;
    private ListViewAdapter mAdapter;
    private ArrayList<String> mDatas;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();
    }

    private void initUI() {
        mPullToRefreshListView = (PullToRefreshListView) findViewById(R.id.lv_refresh);
        mPullToRefreshListView.setReflashListener(this);
        mAdapter = new ListViewAdapter(this);
        mDatas = new ArrayList<String>();
        mAdapter.setDataSources(mDatas);
        mPullToRefreshListView.setAdapter(mAdapter);
        String str = getResources().getString(R.string.list_view_data);
        for (int i = 0; i < 30; i++) {
            mDatas.add(String.format(str, i));
        }
    }

    @Override
    public void onReflash() {
        Handler handler = new Handler();
        //模拟网络请求的延迟时间
        handler.postDelayed(new Runnable() {

            @Override
            public void run() {
                String str = getResources().getString(R.string.list_view_data_refresh);
                for (int i = 0; i < 2; i++) {
                    mDatas.add(0, String.format(str, i));
                }
                mAdapter.notifyDataSetChanged();
                mPullToRefreshListView.reflashComplete();
            }
        }, 2000);
    }

}

ListView的Adapter的代码：

    

package com.ssa.pulltorefreshlistview;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

public class ListViewAdapter extends BaseAdapter {
    private List<String> mDataSources;
    private LayoutInflater mInflater;

    public ListViewAdapter(Context context) {
        this.mInflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        return mDataSources.size();
    }

    @Override
    public Object getItem(int position) {
        return mDataSources.get(position);
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder viewHolder = null;
        String data = mDataSources.get(position);
        if (null == convertView) {
            convertView = mInflater.inflate(R.layout.listview_item, null);
            viewHolder = new ViewHolder(convertView);
            convertView.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertView.getTag();
        }
        viewHolder.tvMark.setText(data);

        return convertView;
    }

    static class ViewHolder {
        private TextView tvMark;

        public ViewHolder(View convertView) {
            tvMark = (TextView) convertView.findViewById(R.id.tv_mark);
        }
    }

    public List<String> getDataSources() {
        return mDataSources;
    }

    public void setDataSources(List<String> mDataSources) {
        this.mDataSources = mDataSources;
    }
}

         至此，一个可以下拉刷新的ListView就完成了，其实并不复杂，下面一篇，我将要实现一个可以上拉加载的ListView，至于全部的代码，在我下一篇博客中全部上传，供博友们方便下载。