ListView下拉刷新,上拉自动加载更多
下拉刷新,Android中非常普遍的功能。为了方便便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能。设计最初是参考开源中国的Android客户端源码。先看示例图。
图1 图2
图3 图4
图5 图6
下拉刷新的时动画效果: 图1 ==》 图2 ==》 图3 ==》 图4 ==》 图1。
上拉自动加载更多的效果:图5
图6是示例demo的截图
重写后的listview动画效果来源于添加的头部(header)和尾部(footer),listview提供了addHeaderView和 addFooterView方法来添加header和footer。大家也可以通过修改头部、尾部的xml文件来定义自己的动画效果。
实现原理
1.下拉刷新
通过onTouchEvent判断手势,来改变listview的header。header的状态共4种,自己定义为:
NONE(对应图1):初始状态
PULL(对应图2):下拉状态,此时松开会还原到状态NONE,并不进行刷新
RELEASE(对应图3):同样是下拉状态,但此刻松开会执行刷新,进入状态REFRESHING
REFRESHING(对应图4):正在执行刷新,刷新结束后进入状态NONE。
header在四种状态切换时不仅改变内部组件,同时改变自身的大小。改变内部组件的体现比如,箭头的朝上或者朝下,文字提示的变化,等待圆圈的显示与 否。大小的改变其实就是高度的改变,NONE时header高度为0,RELEASE时header的高度由你下拉的程度决定。
2.加载更多
在listview滑动停止后,判断listview的最后一个item是否已经显示,如果显示说明listview已经滑动到了最底部,这时便触发加载更多的方法,方法结束根据结果改变footer。
3.回调方法
在类中定义了两个接口OnRefreshListener和OnLoadListener,用来定义和提供加载数据的方法,具体实现则交给它们的实现类去做。
示例代码
AutoListView.java
package com.example.autolistview.widget; import com.example.autolistview.R; import com.example.autolistview.utils.Utils; 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.ImageView; import android.widget.ProgressBar; import android.widget.TextView; import android.widget.AbsListView.OnScrollListener; import android.widget.ListView; /** * @author SunnyCoffee * @create 2013-10-24 * @version 1.0 * @desc 自定义Listview 下拉刷新,上拉加载更多 */ public class AutoListView extends ListView implements OnScrollListener { // 区分当前操作是刷新还是加载 public static final int REFRESH = 0; public static final int LOAD = 1; // 区分PULL和RELEASE的距离的大小 private static final int SPACE = 20; // 定义header的四种状态和当前状态 private static final int NONE = 0; private static final int PULL = 1; private static final int RELEASE = 2; private static final int REFRESHING = 3; private int state; private LayoutInflater inflater; private View header; private View footer; private TextView tip; private TextView lastUpdate; private ImageView arrow; private ProgressBar refreshing; private TextView noData; private TextView loadFull; private TextView more; private ProgressBar loading; private RotateAnimation animation; private RotateAnimation reverseAnimation; private int startY; private int firstVisibleItem; private int scrollState; private int headerContentInitialHeight; private int headerContentHeight; // 只有在listview第一个item显示的时候(listview滑到了顶部)才进行下拉刷新, 否则此时的下拉只是滑动listview private boolean isRecorded; private boolean isLoading;// 判断是否正在加载 private boolean loadEnable = true;// 开启或者关闭加载更多功能 private boolean isLoadFull; private int pageSize = 10; private OnRefreshListener onRefreshListener; private OnLoadListener onLoadListener; public AutoListView(Context context) { super(context); initView(context); } public AutoListView(Context context, AttributeSet attrs) { super(context, attrs); initView(context); } public AutoListView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); initView(context); } // 下拉刷新监听 public void setOnRefreshListener(OnRefreshListener onRefreshListener) { this.onRefreshListener = onRefreshListener; } // 加载更多监听 public void setOnLoadListener(OnLoadListener onLoadListener) { this.loadEnable = true; this.onLoadListener = onLoadListener; } public boolean isLoadEnable() { return loadEnable; } // 这里的开启或者关闭加载更多,并不支持动态调整 public void setLoadEnable(boolean loadEnable) { this.loadEnable = loadEnable; this.removeFooterView(footer); } public int getPageSize() { return pageSize; } public void setPageSize(int pageSize) { this.pageSize = pageSize; } // 初始化组件 private void initView(Context context) { // 设置箭头特效 animation = new RotateAnimation(0, -180, RotateAnimation.RELATIVE_TO_SELF, 0.5f, RotateAnimation.RELATIVE_TO_SELF, 0.5f); animation.setInterpolator(new LinearInterpolator()); animation.setDuration(100); animation.setFillAfter(true); 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); inflater = LayoutInflater.from(context); footer = inflater.inflate(R.layout.listview_footer, null); loadFull = (TextView) footer.findViewById(R.id.loadFull); noData = (TextView) footer.findViewById(R.id.noData); more = (TextView) footer.findViewById(R.id.more); loading = (ProgressBar) footer.findViewById(R.id.loading); header = inflater.inflate(R.layout.pull_to_refresh_header, null); arrow = (ImageView) header.findViewById(R.id.arrow); tip = (TextView) header.findViewById(R.id.tip); lastUpdate = (TextView) header.findViewById(R.id.lastUpdate); refreshing = (ProgressBar) header.findViewById(R.id.refreshing); // 为listview添加头部和尾部,并进行初始化 headerContentInitialHeight = header.getPaddingTop(); measureView(header); headerContentHeight = header.getMeasuredHeight(); topPadding(-headerContentHeight); this.addHeaderView(header); this.addFooterView(footer); this.setOnScrollListener(this); } public void onRefresh() { if (onRefreshListener != null) { onRefreshListener.onRefresh(); } } public void onLoad() { if (onLoadListener != null) { onLoadListener.onLoad(); } } public void onRefreshComplete(String updateTime) { lastUpdate.setText(this.getContext().getString(R.string.lastUpdateTime, lastUpdate)); state = NONE; refreshHeaderViewByState(); } // 用于下拉刷新结束后的回调 public void onRefreshComplete() { String currentTime = Utils.getCurrentTime(); onRefreshComplete(currentTime); } // 用于加载更多结束后的回调 public void onLoadComplete() { isLoading = false; } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { this.firstVisibleItem = firstVisibleItem; } @Override public void onScrollStateChanged(AbsListView view, int scrollState) { this.scrollState = scrollState; ifNeedLoad(view, scrollState); } // 根据listview滑动的状态判断是否需要加载更多 private void ifNeedLoad(AbsListView view, int scrollState) { if (!loadEnable) { return; } try { if (scrollState == OnScrollListener.SCROLL_STATE_IDLE && !isLoading && view.getLastVisiblePosition() == view .getPositionForView(footer) && !isLoadFull) { onLoad(); isLoading = true; } } catch (Exception e) { } } /** * 监听触摸事件,解读手势 */ @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: if (firstVisibleItem == 0) { isRecorded = true; startY = (int) ev.getY(); } break; case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: if (state == PULL) { state = NONE; refreshHeaderViewByState(); } else if (state == RELEASE) { state = REFRESHING; refreshHeaderViewByState(); onRefresh(); } isRecorded = false; break; case MotionEvent.ACTION_MOVE: whenMove(ev); break; } return super.onTouchEvent(ev); } // 解读手势,刷新header状态 private void whenMove(MotionEvent ev) { if (!isRecorded) { return; } int tmpY = (int) ev.getY(); int space = tmpY - startY; int topPadding = space - headerContentHeight; switch (state) { case NONE: if (space > 0) { state = PULL; refreshHeaderViewByState(); } break; case PULL: topPadding(topPadding); if (scrollState == SCROLL_STATE_TOUCH_SCROLL && space > headerContentHeight + SPACE) { state = RELEASE; refreshHeaderViewByState(); } break; case RELEASE: topPadding(topPadding); if (space > 0 && space < headerContentHeight + SPACE) { state = PULL; refreshHeaderViewByState(); } else if (space <= 0) { state = NONE; refreshHeaderViewByState(); } break; } } // 调整header的大小。其实调整的只是距离顶部的高度。 private void topPadding(int topPadding) { header.setPadding(header.getPaddingLeft(), topPadding, header.getPaddingRight(), header.getPaddingBottom()); header.invalidate(); } /** * 这个方法是根据结果的大小来决定footer显示的。 * <p> * 这里假定每次请求的条数为10。如果请求到了10条。则认为还有数据。如过结果不足10条,则认为数据已经全部加载,这时footer显示已经全部加载 * </p> * * @param resultSize */ public void setResultSize(int resultSize) { if (resultSize == 0) { isLoadFull = true; loadFull.setVisibility(View.GONE); loading.setVisibility(View.GONE); more.setVisibility(View.GONE); noData.setVisibility(View.VISIBLE); } else if (resultSize > 0 && resultSize < pageSize) { isLoadFull = true; loadFull.setVisibility(View.VISIBLE); loading.setVisibility(View.GONE); more.setVisibility(View.GONE); noData.setVisibility(View.GONE); } else if (resultSize == pageSize) { isLoadFull = false; loadFull.setVisibility(View.GONE); loading.setVisibility(View.VISIBLE); more.setVisibility(View.VISIBLE); noData.setVisibility(View.GONE); } } // 根据当前状态,调整header private void refreshHeaderViewByState() { switch (state) { case NONE: topPadding(-headerContentHeight); tip.setText(R.string.pull_to_refresh); refreshing.setVisibility(View.GONE); arrow.clearAnimation(); arrow.setImageResource(R.drawable.pull_to_refresh_arrow); break; case PULL: arrow.setVisibility(View.VISIBLE); tip.setVisibility(View.VISIBLE); lastUpdate.setVisibility(View.VISIBLE); refreshing.setVisibility(View.GONE); tip.setText(R.string.pull_to_refresh); arrow.clearAnimation(); arrow.setAnimation(reverseAnimation); break; case RELEASE: arrow.setVisibility(View.VISIBLE); tip.setVisibility(View.VISIBLE); lastUpdate.setVisibility(View.VISIBLE); refreshing.setVisibility(View.GONE); tip.setText(R.string.pull_to_refresh); tip.setText(R.string.release_to_refresh); arrow.clearAnimation(); arrow.setAnimation(animation); break; case REFRESHING: topPadding(headerContentInitialHeight); refreshing.setVisibility(View.VISIBLE); arrow.clearAnimation(); arrow.setVisibility(View.GONE); tip.setVisibility(View.GONE); lastUpdate.setVisibility(View.GONE); break; } } // 用来计算header大小的。比较隐晦。 private void measureView(View child) { ViewGroup.LayoutParams p = child.getLayoutParams(); if (p == null) { p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT); } int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0 + 0, p.width); int lpHeight = p.height; int childHeightSpec; if (lpHeight > 0) { childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight, MeasureSpec.EXACTLY); } else { childHeightSpec = MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED); } child.measure(childWidthSpec, childHeightSpec); } /* * 定义下拉刷新接口 */ public interface OnRefreshListener { public void onRefresh(); } /* * 定义加载更多接口 */ public interface OnLoadListener { public void onLoad(); } }
这个类的逻辑复杂的地方就是header四种状态的判断和切换。
以下是几种状态的切换情况
NONE ==》 PULL
NONE 《== PULL ==》 RELEASE
PULL 《== RELEASE ==》 REFRESHING
REFRESHING ==》 NONE
代码中对于 RELEASE ==》PULL 状态的切换处理的不太理想,好像是纵坐标的记录方式有问题,如果有谁解决,希望能够留言告知。
为了减少篇幅,其他代码就不在贴了。
注意:定义header的xml最外层必须使用线性布局,不然的话会出错。
测试代码:点击下载(eclipse工程项目,编码UTF-8)。由于代码涉及公司项目,所以提供的demo是自己新写的。如图6所示。
本篇会持续更新。