Android实现ListView的下拉刷新、上拉加载更多

Android实现ListView的下拉刷新、上拉加载更多

在Andoird编程中经常使用的控件包括ListView，就个人而言，我还是很喜欢ListView的，在使用ListView的过程中，必不可少的就是下拉刷新、上拉加载更多。下面是我自己写出一个小Demo便于大家理解。希望大家可以理解。共同进步！

自己bb那么多，希望大家见谅，我直接上图说话



第一步：先定义一个自定义控件SlipListView继承与ListView，在SlipListView中增加ListView的头布局与脚布局并实现其滑动监听的功能（代码虽然多，但是原理很简单，聪明的你们肯定可以看明白的。）

public class SlipListView extends ListView implements OnScrollListener {

private Context mContext;
private int startY;
private int moveY;
private int mHeaderViewHeight;
private View mHeaderview;

/**
* 下拉刷新
*/
private static final int downRefresh = 0;

/**
* 正在刷新
*/
private static final int refreshing = 1;

/**
* 释放刷新
*/
private static final int upRefresh = 2;

private int currentState = downRefresh;

private RotateAnimation mUpAnimation;
private RotateAnimation mDownAnimation;
private TextView tvTiTile;
private ProgressBar pbUp;
private ImageView ivRefresh;
private RefreshListener mListener;
private View mFootView; // 脚布局
private boolean isLoadingMore; // 是否正在加载更多
private int mFootViewHeight;

public SlipListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
init();
}

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

public SlipListView(Context context) {
super(context);
init();
}

/**
* 初始化界面，及动画
*/
private void init() {
mContext = getContext();

setOnScrollListener(this);

// 初始化头布局
initHeaderView();
// 初始化脚布局
initFootView();
initAnimation();
}

/**
* 初始化脚布局
*/
private void initFootView() {
mFootView = View.inflate(mContext, R.layout.layout_foot, null);

mFootView.measure(0, 0);
mFootViewHeight = mFootView.getMeasuredHeight();

addFooterView(mFootView);
}

/**
* 初始化动画
*/
private void initAnimation() {
mUpAnimation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF,
0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
mUpAnimation.setDuration(300);
mUpAnimation.setFillAfter(true);

mDownAnimation = new RotateAnimation(-180, -360,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF,
0.5f);
mDownAnimation.setDuration(300);
mDownAnimation.setFillAfter(true);
}

/**
* 初始化头布局
*/
private void initHeaderView() {
mHeaderview = View.inflate(mContext, R.layout.layout_header, null);
ivRefresh = (ImageView) mHeaderview.findViewById(R.id.iv_refresh);
pbUp = (ProgressBar) mHeaderview.findViewById(R.id.pb_up);
tvTiTile = (TextView) mHeaderview.findViewById(R.id.tv_title);

mHeaderview.measure(0, 0);
mHeaderViewHeight = mHeaderview.getMeasuredHeight();
// 隐藏头布局
mHeaderview.setPadding(0, -mHeaderViewHeight, 0, 0);

addHeaderView(mHeaderview);
}

// 监听listview的滑动事件
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {

case MotionEvent.ACTION_DOWN:
startY = (int) ev.getY();
break;
case MotionEvent.ACTION_MOVE:
moveY = (int) ev.getY();
if (currentState == refreshing) {
return super.onTouchEvent(ev);
}

int valueY = moveY - startY;
if (valueY > 0 && getFirstVisiblePosition() == 0) {
int result = -mHeaderViewHeight + valueY;
mHeaderview.setPadding(0, result, 0, 0);

// 判断状态
if (result < 0 && currentState != downRefresh) {
currentState = downRefresh;
updateHeader();
} else if (result >= 0 && currentState != upRefresh) {
currentState = upRefresh;
updateHeader();
}
return true;
}
break;
case MotionEvent.ACTION_UP:
// 松开
if (currentState == downRefresh) {
mHeaderview.setPadding(0, -mHeaderViewHeight, 0, 0);
} else if (currentState == upRefresh) {
mHeaderview.setPadding(0, 0, 0, 0);
currentState = refreshing;
updateHeader();
}
break;

default:
break;
}

return super.onTouchEvent(ev);
}

/**
* 更改头布局的状态
*/
private void updateHeader() {
switch (currentState) {
case downRefresh:
ivRefresh.startAnimation(mDownAnimation);
tvTiTile.setText("下拉刷新");
break;
case refreshing:
// 正在刷新
ivRefresh.clearAnimation();
ivRefresh.setVisibility(View.INVISIBLE);
pbUp.setVisibility(View.VISIBLE);
tvTiTile.setText("正在刷新...");

// 利用回调增加listview中的内容
if (mListener != null) {
mListener.onRefresh();
}
break;
case upRefresh:
// 释放刷新
ivRefresh.startAnimation(mUpAnimation);
tvTiTile.setText("释放刷新");
break;
}
}

public interface RefreshListener {

/**
* 刷新数据
*/
void onRefresh();

/**
* 加载更多
*/
void onLoadMore();
}

/**
* 刷新头布局的回调方法
*/
public void setOnRefreshListener(RefreshListener mListener) {
this.mListener = mListener;
}

/**
* 刷新结束
*/
public void setOnRefreshFinah() {
if (isLoadingMore) {
// 加载更多
mFootView.setPadding(0, -mFootViewHeight, 0, 0);
isLoadingMore = false;
}

currentState = downRefresh;
mHeaderview.setPadding(0, -mHeaderViewHeight, 0, 0);
ivRefresh.setVisibility(View.VISIBLE);
pbUp.setVisibility(View.INVISIBLE);
tvTiTile.setText("下拉刷新");
}

@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
if (isLoadingMore) {
return;
}
// 最新状态是空闲状态, 并且当前界面显示了所有数据的最后一条. 加载更多
if (scrollState == SCROLL_STATE_IDLE
&& getLastVisiblePosition() >= (getCount() - 1)) {
isLoadingMore = true;
mFootView.setPadding(0, 0, 0, 0);

setSelection(getCount());

if (mListener != null) {
mListener.onLoadMore();
}
}

}

@Override
public void onScroll(AbsListView view, int firstVisibleItem,
int visibleItemCount, int totalItemCount) {
// 滑动过程中
}
}

第二步：在布局文件中使用此自定义控件(比较简单)

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="${relativePackage}.${activityClass}" >

<com.lx.pulllistview.ui.SlipListView
android:id="@+id/slv_view"
android:layout_width="match_parent"
android:layout_height="match_parent" />

</RelativeLayout>

第三步：定义ListView的Item的布局（里面我将ProgressBar自定义了一个style，你们可以使用默认的）

<?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="horizontal" >

<FrameLayout
android:layout_width="60dp"
android:layout_height="50dp"
android:layout_marginBottom="5dp"
android:layout_marginLeft="5dp"
android:layout_marginTop="5dp" >

<ProgressBar
android:id="@+id/pb_up"
android:layout_width="match_parent"

bac2
android:layout_height="match_parent"
android:layout_gravity="center"
android:indeterminateDrawable="@drawable/progressbar_shape" />
</FrameLayout>

<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:gravity="center"
android:text="加载更多..."
android:textColor="#ff0000"
android:textSize="16dp" />

</LinearLayout>

第四步：在MainActivity中调用（不难喲，加油）

public class MainActivity extends Activity {

private static final int PULL_DOWN = 0;
private static final int LOAD_MORE = 1;
private SlipListView slView;
private Context mContext;
private List<String> mTestList;
private MyAdapter mAdapter;

private Handler mHandler = new Handler() {
@Override
public void handleMessage(Message msg) {

switch (msg.what) {

case PULL_DOWN:
mAdapter.notifyDataSetChanged();
slView.setOnRefreshFinah();
break;
case LOAD_MORE:

break;
}

super.handleMessage(msg);
}
};

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

mContext = this;
// 初始化UI
initUI();

// 初始化数据
initData();
initEvent();
// 初始化数据适配器
initAdpater();
}

/**
* 初始化事件
*/
private void initEvent() {
slView.setOnRefreshListener(new RefreshListener() {
@Override
public void onRefresh() {

new Thread(new Runnable() {

@Override
public void run() {
SystemClock.sleep(2000);
mTestList.add(0, "我是刷新出来的测试数据");

mHandler.sendEmptyMessage(PULL_DOWN);
}
}).start();

}

@Override
public void onLoadMore() {
new Thread(new Runnable() {
@Override
public void run() {
SystemClock.sleep(2000);

mTestList.add("我是加载出来的测试数据1");
mTestList.add("我是加载出来的测试数据2");

mHandler.sendEmptyMessage(PULL_DOWN);

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

/**
* 初始化ListView的适配器
*/
private void initAdpater() {
mAdapter = new MyAdapter();
slView.setAdapter(mAdapter);
}

/**
* 初始化listview的测试数据
*/
private void initData() {
mTestList = new ArrayList<String>();
for (int i = 0; i < 30; i++) {
mTestList.add("我是ListView的测试数据");
}
}

/**
* 初始化UI
*/
private void initUI() {
slView = (SlipListView) findViewById(R.id.slv_view);
}

/**
* 自定义适配器
*/
class MyAdapter extends BaseAdapter {

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

@Override
public String getItem(int position) {
return mTestList.get(position);
}

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

@Override
public View getView(int position, View convertView, ViewGroup parent) {
// 由于item的布局就一个TextView并且数量较少，因此不使用优化了
TextView textView = new TextView(mContext);
textView.setText(mTestList.get(position));
textView.setTextSize(TypedValue.COMPLEX_UNIT_DIP, 18);

return textView;
}

}
}

你是不是想说终于结束了，嘿嘿！当你阅读到这里的时候，你的知识与忍耐力已经更上一层楼了。废话不多说了，如果您有疑问请咨询我，最后谢谢大家的观看，你们的支持是给我最大的努力！