Android自定义PullListView下拉刷新，上拉加载更多分页数据

一、测试效果截图


    

 
 



   

 
 


二、原理和思路见源码（注释很详细）

package com.widget.pull_tofresh_listview;

import com.example.nxtravelclient.R;

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.animation.Animation;
import android.view.animation.AnimationUtils;
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.TextView;

/**
* @name 下拉刷新、上拉加载分页ListView控件
* @Descripation <br>
* 1、需要捕获的用户手势：down按下、up抬起、move移动。主要捕获move状态下手指(纵坐标)在屏幕上滑动的距离，
* 通过计算下滑或上滑的距离decline/increase来改变头部(底部)的状态。
* 2、列表的5种互斥状态：pull、release、refreshing、down、back。下拉(上拉)、临界、松手、进入刷新()状态、刷新完成。<br>
* 3、头部(底部)布局高度随手势变化：初始状态下，头部上边距和底部下边距均为零。下拉头部布局时，头部上边距逐渐增大，
* 返回时逐渐减小;上拉底部布局时，底部下边距逐渐增大， 返回时逐渐减小。<br>
* 4、头部(底部)动画效果随手势变化：下拉临界时，头部箭逆置，原路返回时不变;上拉临界时，底部箭头逆置，原路返回时不变。<br>
* 5、用户事件接口：下拉刷新OnRefreshListener、上拉加载更多分页数据OnLoadMoreListener，
* 同步更新最近时间。<br>
* @author 樊俊彬
* @date 2014-9-24
* @version 1.0
*/
public class PullListView extends ListView implements OnScrollListener {

private final static String TAG_HEADER = "HeaderView";
private final static String TAG_FOOTER = "FooterView";

// 头部布局及其组件(指示、进度、指示文本、最近更新时间)
private LinearLayout headerViewLayout;
private ImageView headerArrowImage;
private ImageView headerProgressImage;
private TextView headerTipsText;
private TextView headerLastUpdateText;

// 底部布局及其组件
private LinearLayout footerViewLayout;
private ImageView footerArrowImage;
private ImageView footerProgressImage;
private TextView footerTipsText;
private TextView footerLastUpdateText;

// 箭头旋转和逆置、进度条旋转动画
private RotateAnimation rotateAnimation;
private RotateAnimation reverseAnimation;
private Animation progressAnimation;

// 下拉（上拉）、松手、正在刷新和完成4种状态
private final static int PULL = 0;
private final static int RELEASE = 1;
private final static int REFRESHING = 2;
private final static int DONE = 3;

// 标记是否从最头部下拉，最底部上拉
private boolean isFromFirstItem;
private boolean isFromLastItem;
private int firstItemIndex;
private int lastItemIndex;
private int curTotalItemCount;

// 标记是否原路返回
private boolean isHeaderBack;
private boolean isFooterBack;

// 当前状态
private int headerState;
private int footerState;

// 头部视图的上边距、底部视图的下边距
private int headerTopPadding;
private int footerBottomPadding;

// 当前手势的滑动的纵向坐标
private float headerGestureStartY;
private float footerGestureStartY;

// 布局实际高度和指定拉动临界值
private int viewLayoutHeight;
private int pullHeighSpec = 100;

// 头部刷新、底部加载更多用户接口
public OnRefreshListener onRefreshListener;
public OnLoadMoreListener onLoadMoreListener;

public PullListView(Context context, AttributeSet attrs) {
super(context, attrs);
initAnimation(context);
initHeaderView(context);
initFooterViews(context);
setOnScrollListener(this);
}

public PullListView(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
initAnimation(context);
initHeaderView(context);
initFooterViews(context);
setOnScrollListener(this);
}

/**
* 初始化头部和底部使用的动画效果
*/
private void initAnimation(Context context) {

// 中心旋转180（0，-180）
rotateAnimation = new RotateAnimation(0, -180,
RotateAnimation.RELATIVE_TO_SELF, 0.5f,
RotateAnimation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setInterpolator(new LinearInterpolator());
rotateAnimation.setDuration(100);
rotateAnimation.setFillAfter(true);

// 逆置动画（-180，0）
reverseAnimation = new RotateAnimation(-180, 0,
RotateAnimation.RELATIVE_TO_SELF, 0.5f,
RotateAnimation.RELATIVE_TO_SELF, 0.5f);
reverseAnimation.setInterpolator(new LinearInterpolator());
reverseAnimation.setDuration(100);
reverseAnimation.setFillAfter(true);

// 进度条旋转动画
progressAnimation = AnimationUtils.loadAnimation(context,
R.anim.loading_rotate_anim);
}

/**
* 加载头部所有组件(箭头图标、圆圈进度条、提示文本、最后一次更新时间),设置初始大小和样式
*/
private void initHeaderView(Context context) {
headerViewLayout = (LinearLayout) LayoutInflater.from(context).inflate(
R.layout.header_footer_list_view, null);

headerArrowImage = (ImageView) headerViewLayout
.findViewById(R.id.arrow_image);
headerArrowImage.setMinimumWidth(50);
headerArrowImage.setMinimumHeight(50);
headerProgressImage = (ImageView) headerViewLayout
.findViewById(R.id.progress_image);
headerTipsText = (TextView) headerViewLayout
.findViewById(R.id.tips_text);
headerLastUpdateText = (TextView) headerViewLayout
.findViewById(R.id.last_updated_text);
headerViewLayout.measure(0, 0);

headerViewLayout.measure(0, 0);

viewLayoutHeight = headerViewLayout.getMeasuredHeight();

// 初始边距为负值，即为隐藏状态
headerTopPadding = headerViewLayout.getPaddingTop();
headerViewLayout.setPadding(headerViewLayout.getPaddingLeft(), -1
* viewLayoutHeight, headerViewLayout.getPaddingRight(),
headerViewLayout.getPaddingBottom());
headerViewLayout.invalidate();
addHeaderView(headerViewLayout);
}

/**
* 加载底部所有组件(箭头图标、圆圈进度条、提示文本、最后一次更新时间),设置初始大小和样式
*/
private void initFooterViews(Context context) {
footerViewLayout = (LinearLayout) LayoutInflater.from(context).inflate(
R.layout.header_footer_list_view, null);
footerArrowImage = (ImageView) footerViewLayout
.findViewById(R.id.arrow_image);
footerArrowImage.setMinimumWidth(50);
footerArrowImage.setMinimumHeight(50);
footerProgressImage = (ImageView) footerViewLayout
.findViewById(R.id.progress_image);
footerTipsText = (TextView) footerViewLayout
.findViewById(R.id.tips_text);
footerLastUpdateText = (TextView) footerViewLayout
.findViewById(R.id.last_updated_text);

footerViewLayout.measure(0, 0);

// 初始边距为负值，即为隐藏状态
footerBottomPadding = footerViewLayout.getPaddingBottom();
footerViewLayout.setPadding(footerViewLayout.getPaddingLeft(),
footerViewLayout.getPaddingTop(),
footerViewLayout.getPaddingRight(), -1 * viewLayoutHeight);
footerViewLayout.invalidate();
addFooterView(footerViewLayout);
}

/**
* 监听列表滚动,记录列表的第一项和最后一项(为头部刷新和底部刷新提供依据)
*/
public void onScroll(AbsListView view, int firstVisiableItem,
int visibleItemCount, int totalItemCount) {
firstItemIndex = firstVisiableItem;
lastItemIndex = firstVisiableItem + visibleItemCount;
curTotalItemCount = totalItemCount;
}

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

/**
* 捕获手势，计算滑动距离来改变列表状态
*/
public boolean onTouchEvent(MotionEvent event) {

switch (event.getAction()) {

case MotionEvent.ACTION_MOVE:

// 从头开始向下滑动并记录下滑起始位置
if (!isFromFirstItem && firstItemIndex == 0) {
isFromFirstItem = true;
headerGestureStartY = event.getY();
}

// 从底开始上滑并记录上滑起始位置
if (!isFromLastItem && (lastItemIndex == curTotalItemCount)) {
isFromLastItem = true;
footerGestureStartY = event.getY();
}

// 从头部开始滑动且当前状态处于‘非’正在刷新REFRESHING状态（pull,release,done三种状态互斥）时
if (headerState != REFRESHING && isFromFirstItem) {
// 手势下滑程度
float decline = event.getY() - headerGestureStartY;
listenHeaderStateChanged(decline);
}

// 从底部开始上滑且当前状态处于‘非’正在刷新REFRESHING状态（pull,release,done三种状态互斥）时
if (footerState != REFRESHING && isFromLastItem) {
// 手势上滑程度
float increase = footerGestureStartY - event.getY();
listenFooterStateChanged(increase);
}

break;

// 手势抬起时会出现三种不同的状态(release,done,pull)
case MotionEvent.ACTION_UP:

// 头部
if (headerState != REFRESHING) {
if (headerState == DONE) {
} else if (headerState == PULL) {
headerState = DONE;
changeHeaderViewByState();
} else if (headerState == RELEASE) {
headerState = REFRESHING;
changeHeaderViewByState();
onRefresh();
}
}
isFromFirstItem = false;
isHeaderBack = false;

// 底部
if (footerState != REFRESHING) {
if (footerState == DONE) {
} else if (footerState == PULL) {
footerState = DONE;
changeFooterViewByState();
} else if (footerState == RELEASE) {
footerState = REFRESHING;
changeFooterViewByState();
onLoadMore();
}
}
isFromLastItem = false;
isFooterBack = false;
break;
}
return super.onTouchEvent(event);
}

/**
* 监听头部状态随手势下滑程度的变化
*
* @param decline
*/
private void listenHeaderStateChanged(float decline) {
// 当前状态：下拉刷新（0 < decline < 指定高度）
if (headerState == PULL) {
Log.i(TAG_HEADER, ">>>state=" + headerState + ",decline=" + decline);
if (decline >= viewLayoutHeight + pullHeighSpec) {
headerState = RELEASE;
isHeaderBack = true;
changeHeaderViewByState();
} else if (decline <= 0) {
headerState = DONE;
changeHeaderViewByState();
}
}

// 当前状态：松手刷新(decline >= 指定高度时)
else if (headerState == RELEASE) {
Log.i(TAG_HEADER, ">>>state=" + headerState + ",decline=" + decline);
if (decline > 0 && decline < (viewLayoutHeight + pullHeighSpec)) {
headerState = PULL;
changeHeaderViewByState();
} else if (decline <= 0) {
headerState = DONE;
changeHeaderViewByState();
}
}

// 当前状态：完成(decline = 0)
else if (headerState == DONE) {
Log.i(TAG_HEADER, ">>>state=" + headerState + ",decline=" + decline);
if (decline > 0) {
headerState = PULL;
changeHeaderViewByState();
}
}

// 根据不同的状态来改变头部布局的上边距，达到头部跟随手势一起下滑的效果
// 下拉刷新状态下：上边距逐渐增大
if (headerState == PULL) {
int topPadding = (int) ((-1 * viewLayoutHeight + (decline)));
headerViewLayout.setPadding(headerViewLayout.getPaddingLeft(),
topPadding, headerViewLayout.getPaddingRight(),
headerViewLayout.getPaddingBottom());
headerViewLayout.invalidate();
}

// 松手刷新状态下：上边距逐渐减小
if (headerState == RELEASE) {
int topPadding = (int) ((decline - viewLayoutHeight));
headerViewLayout.setPadding(headerViewLayout.getPaddingLeft(),
topPadding, headerViewLayout.getPaddingRight(),
headerViewLayout.getPaddingBottom());
headerViewLayout.invalidate();
}
}

/**
* 监听底部状态随手势下滑程度的变化
*/
private void listenFooterStateChanged(float increase) {

// 当前状态：上拉刷新（0 < increase < 指定高度）
if (footerState == PULL) {
Log.i(TAG_FOOTER, ">>>state=" + footerState + ",increase="
+ increase);
if (increase >= viewLayoutHeight + pullHeighSpec) {
footerState = RELEASE;
isFooterBack = true;
changeFooterViewByState();
} else if (increase <= 0) {
footerState = DONE;
changeFooterViewByState();
}
}

// 当前状态：松手刷新(increase >= 指定高度时)
else if (footerState == RELEASE) {
Log.i(TAG_FOOTER, ">>>state=" + footerState + ",increase="
+ increase);
if (increase > 0 && increase < (viewLayoutHeight + pullHeighSpec)) {
footerState = PULL;
changeFooterViewByState();
} else if (increase <= 0) {
footerState = DONE;
changeFooterViewByState();
}
}

// 当前状态：完成(increase <= 0)
else if (footerState == DONE) {
Log.i(TAG_FOOTER, ">>>state=" + footerState + ",increase="
+ increase);
if (increase > 0) {
footerState = PULL;
changeFooterViewByState();
}
}

// 根据不同的状态来改变底部布局的下边距，达到头部跟随手势一起上滑的效果
// 下拉刷新状态下：上边距逐渐增大
if (footerState == PULL) {
int bottomPaddding = (int) ((-1 * viewLayoutHeight + (increase)));
footerViewLayout.setPadding(footerViewLayout.getPaddingLeft(),
footerViewLayout.getPaddingTop(),
footerViewLayout.getPaddingRight(), bottomPaddding);
footerViewLayout.invalidate();
}

// 松手刷新状态下：上边距逐渐减小
if (footerState == RELEASE) {
int bottomPadding = (int) ((increase - viewLayoutHeight));
footerViewLayout.setPadding(footerViewLayout.getPaddingLeft(),
footerViewLayout.getPaddingTop(),
footerViewLayout.getPaddingRight(), bottomPadding);
footerViewLayout.invalidate();
}
}

/**
* 根据当前状态同步刷新头部界面
*/
private void changeHeaderViewByState() {
switch (headerState) {

// 下拉刷新：除进度条外全部显示
case PULL:
headerArrowImage.setVisibility(View.VISIBLE);
headerArrowImage.clearAnimation();
if (isHeaderBack) {
isHeaderBack = false;
headerArrowImage.clearAnimation();
headerArrowImage.startAnimation(reverseAnimation);
}
headerProgressImage.clearAnimation();
headerProgressImage.setVisibility(View.GONE);
headerTipsText.setVisibility(View.VISIBLE);
headerTipsText.setText("下拉刷新");
headerLastUpdateText.setVisibility(View.VISIBLE);
break;

// 松手刷新：除进度条外全部显示
case RELEASE:
headerArrowImage.setVisibility(View.VISIBLE);
headerArrowImage.clearAnimation();
headerArrowImage.startAnimation(rotateAnimation);
headerProgressImage.clearAnimation();
headerProgressImage.setVisibility(View.GONE);
headerTipsText.setVisibility(View.VISIBLE);
headerTipsText.setText("松手刷新");
headerLastUpdateText.setVisibility(View.VISIBLE);
break;

// 正在刷新：隐藏指示图标、显示加载进度条
case REFRESHING:
headerViewLayout.setPadding(headerViewLayout.getPaddingLeft(),
headerTopPadding, headerViewLayout.getPaddingRight(),
headerViewLayout.getPaddingBottom());
headerViewLayout.invalidate();
headerArrowImage.clearAnimation();
headerArrowImage.setVisibility(View.GONE);
headerProgressImage.setVisibility(View.VISIBLE);
headerProgressImage.startAnimation(progressAnimation);
headerTipsText.setText("正在拼命加载...");
headerLastUpdateText.setVisibility(View.GONE);
break;

// 完成：恢复原样
case DONE:
headerViewLayout.setPadding(headerViewLayout.getPaddingLeft(), -1
* viewLayoutHeight, headerViewLayout.getPaddingRight(),
headerViewLayout.getPaddingBottom());
headerViewLayout.invalidate();
headerArrowImage.clearAnimation();
headerArrowImage.setImageResource(R.drawable.ic_pull_arrow_down);
headerProgressImage.clearAnimation();
headerProgressImage.setVisibility(View.GONE);
headerTipsText.setText("下拉刷新");
headerLastUpdateText.setVisibility(View.VISIBLE);
break;
}
}

/**
* 根据当前状态同步刷新底部界面
*/
private void changeFooterViewByState() {
switch (footerState) {

// 上拉刷新、除进度条隐藏、箭头向下
case PULL:
footerArrowImage.setVisibility(View.VISIBLE);
footerArrowImage.startAnimation(rotateAnimation);
if (isFooterBack) {
isFooterBack = false;
footerArrowImage.clearAnimation();
}
footerProgressImage.clearAnimation();
footerProgressImage.setVisibility(View.GONE);
footerTipsText.setVisibility(View.VISIBLE);
footerTipsText.setText("上拉加载更多");
footerLastUpdateText.setVisibility(View.VISIBLE);
break;

// 松手刷新：除进度条外全部显示
case RELEASE:
footerArrowImage.setVisibility(View.VISIBLE);
footerArrowImage.startAnimation(reverseAnimation);
footerProgressImage.clearAnimation();
footerProgressImage.setVisibility(View.GONE);
footerTipsText.setVisibility(View.VISIBLE);
footerTipsText.setText("松手加载");
footerLastUpdateText.setVisibility(View.VISIBLE);
break;

// 正在刷新：隐藏指示图标、显示加载进度条
case REFRESHING:
footerViewLayout.setPadding(footerViewLayout.getPaddingLeft(),
footerViewLayout.getPaddingTop(),
footerViewLayout.getPaddingRight(), footerBottomPadding);
footerViewLayout.invalidate();
footerArrowImage.clearAnimation();
footerArrowImage.setVisibility(View.GONE);
footerProgressImage.setVisibility(View.VISIBLE);
footerProgressImage.startAnimation(progressAnimation);
footerTipsText.setText("正在拼命加载...");
footerLastUpdateText.setVisibility(View.GONE);
break;

// 完成：恢复原样
case DONE:
footerViewLayout.setPadding(footerViewLayout.getPaddingLeft(),
footerViewLayout.getPaddingTop(),
footerViewLayout.getPaddingRight(), -1 * viewLayoutHeight);
footerViewLayout.invalidate();
footerArrowImage.clearAnimation();
footerArrowImage.setImageResource(R.drawable.ic_pull_arrow_down);
footerProgressImage.clearAnimation();
footerProgressImage.setVisibility(View.GONE);
footerTipsText.setText("上拉加载更多");
footerLastUpdateText.setVisibility(View.VISIBLE);
break;
}
}

/**
* 进入头部刷新状态时，执行用户指定操作
*/
private void onRefresh() {
if (onRefreshListener != null) {
onRefreshListener.onRefresh();
}
}

/**
* 进入底部加载更多状态时，执行用户指定的操作
*/
private void onLoadMore() {
if (onLoadMoreListener != null) {
onLoadMoreListener.onLoadMore();
}
}

/**
* 用户调用此方法，注入头部刷新接口的子类对象
*
* @param refreshListener
*/
public void setOnRefreshListener(OnRefreshListener refreshListener) {
this.onRefreshListener = refreshListener;
}

/**
* 用户调用此方法，注入底部加载更多接口的子类对象
*
* @param loadMoreListener
*/
public void setOnLoadMoreListener(OnLoadMoreListener loadMoreListener) {
this.onLoadMoreListener = loadMoreListener;
}

/**
* 用户调用此方法，注入头部刷新操作完成时的时间
*/
public void onRefreshComplete(String update) {
headerLastUpdateText.setText(update);
onRefreshComplete();
}

public void onRefreshComplete() {
headerState = DONE;
changeHeaderViewByState();
}

/**
* 用户调用此方法，注入头部刷新操作完成时的时间
*/
public void onLoadMoreComplete(String update) {
footerLastUpdateText.setText(update);
footerState = DONE;
changeFooterViewByState();
}

public void onLoadMoreComplete() {
footerState = DONE;
changeFooterViewByState();
}
}

三、总结

1、需要捕获的用户手势：down按下、up抬起、move移动。主要捕获move状态下手指(纵坐标)在屏幕上滑动的距离，通过计算下滑或上滑的距离decline/increase来改变头部(底部)的状态。

2、列表的5种互斥状态：pull、release、refreshing、down、back。下拉(上拉)、临界、松手、进入刷新()状态、刷新完成。

3、头部(底部)布局高度随手势变化：初始状态下，头部上边距和底部下边距均为零。下拉头部布局时，头部上边距逐渐增大，返回时逐渐减小;上拉底部布局时，底部下边距逐渐增大， 返回时逐渐减小。

 4、头部(底部)动画效果随手势变化：下拉临界时，头部箭逆置，原路返回时不变;上拉临界时，底部箭头逆置，原路返回时不变。

5、用户事件接口：下拉刷新OnRefreshListener、上拉加载更多分页数据OnLoadMoreListener，同步更新最近时间。

6、少说空话大话，多反思总结。