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，至于全部的代码，在我下一篇博客中全部上传，供博友们方便下载。