自定义ListView_下拉刷新上拉加载更多
自定义ListView实现下拉刷新和上拉自动加载
效果图：
下拉效果：
上拉效果：
实现原理：通过ListView的addFooter与addHeader方法，将下拉布局与上拉布局添加到ListView中，再通过设置padding属性，隐藏头部和脚部
监听onTouchEvent事件，根据手势滑动距离，动态更改下拉布局的padding,并动态更改头布局内控件效果
监听onScrollStateChanged，动态显示隐藏脚布局
设置回调，提供下拉刷新与加载更多的方法
Demo：https://files.cnblogs.com/files/liujingg/PullRefreshDemo.rar
PullListView.java
import java.text.SimpleDateFormat; import java.util.Date; import android.content.Context; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.animation.Animation; 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.ProgressBar; import android.widget.TextView; /** * 自定义ListView，下拉刷新、上拉自动加载更多 * @author liujing * @version 1.0 */ public class PullListView extends ListView implements OnScrollListener { private final int PULL_DOWN_REFRESH = 0;//下拉状态 private final int RELEASE_REFRESH = 1;//松开状态 private final int REFRESHING = 2;//刷新中状态 private int currentState = PULL_DOWN_REFRESH; private int mListViewOnScreenY = -1; private int downY = -1; private boolean isLoadingMore = false; private boolean isEnabledPullDownRefresh = false; private boolean isEnabledLoadMore = false; private OnPullDownRefresh mOnPullDownRefresh; //头布局、脚布局及高度 private View mFootView; private LinearLayout mHeaderView; private int mFooterViewHeight; private int mPullDownHeaderViewHeight; //mHeaderView中组件及动画 private View mCustomHeaderView;//用户自定义头布局 private View mPullDownHeader;//下拉刷新头布局 private RotateAnimation upAnimation,downAnimation; private ImageView ivArrow; private ProgressBar mProgressBar; private TextView tv_statue,tv_time; public PullListView(Context context) { this(context, null); } public PullListView(Context context, AttributeSet attrs) { this(context, attrs, 0); } public PullListView(Context context, AttributeSet attrs, int defStyle) { super(context, attrs, defStyle); initPullDownHeaderView(); initLoadMoreFooterView(); } private void initLoadMoreFooterView() { //加载更多的布局文件 mFootView = View.inflate(getContext(), R.layout.pull_listview_footer, null); mFootView.measure(0, 0);//测量 mFooterViewHeight = mFootView.getMeasuredHeight(); //隐藏脚布局 mFootView.setPadding(0,-mFooterViewHeight,0,0); addFooterView(mFootView); setOnScrollListener(this); } private void initPullDownHeaderView() { //下拉刷新的布局文件 mHeaderView = (LinearLayout) View.inflate(getContext(), R.layout.pull_listview_header, null); mPullDownHeader = mHeaderView .findViewById(R.id.ll_refresh_pull_down_header); ivArrow = (ImageView) mHeaderView .findViewById(R.id.iv_refresh_header_arrow); mProgressBar = (ProgressBar) mHeaderView .findViewById(R.id.pb_refresh_header); tv_statue = (TextView) mHeaderView .findViewById(R.id.tv_refresh_header_status); tv_time = (TextView) mHeaderView .findViewById(R.id.tv_refresh_header_time); mPullDownHeader.measure(0, 0);//测量 mPullDownHeaderViewHeight = mPullDownHeader.getMeasuredHeight(); //隐藏头布局 mPullDownHeader.setPadding(0, -mPullDownHeaderViewHeight, 0, 0); addHeaderView(mHeaderView); initAnimation(); } /** * 添加额外的头布局，比如轮播图 * @param v 自定义头布局 */ public void addListViewCustomHeaderView(View v) { mCustomHeaderView = v; mHeaderView.addView(mCustomHeaderView); } @Override public boolean onTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_DOWN: downY = (int) ev.getY(); break; case MotionEvent.ACTION_MOVE: if (downY == -1) downY = (int) ev.getY(); //是否启用下拉刷新 if (!isEnabledPullDownRefresh) break; if (currentState == REFRESHING) break; //解决用户添加header与下拉刷新header的冲突 if (mCustomHeaderView != null) { int[] location = new int[2]; if (mListViewOnScreenY == -1) { this.getLocationOnScreen(location); mListViewOnScreenY = location[1]; } mCustomHeaderView.getLocationOnScreen(location); if (location[1] < mListViewOnScreenY) { break; } } int moveY = (int) ev.getY(); int diffY = (moveY - downY)/2; if (diffY > 0 && getFirstVisiblePosition() == 0) { int paddingTop = -mPullDownHeaderViewHeight + diffY; if (paddingTop < 0 && currentState != PULL_DOWN_REFRESH) { //当前没有完全显示且当前状态为松开刷新，进入下拉刷新 currentState = PULL_DOWN_REFRESH; refreshPullDownState(); } else if (paddingTop > 0 && currentState != RELEASE_REFRESH) { //当前完全显示且当前状态为下拉刷新，进入松开刷新 currentState = RELEASE_REFRESH; refreshPullDownState(); } mPullDownHeader.setPadding(0, paddingTop, 0, 0); return true; }else if(diffY < 0 && getLastVisiblePosition() == getCount()-1){ //脚布局可向上滑动 mFootView.setPadding(0,0,0,0); } break; case MotionEvent.ACTION_UP: downY = -1; if (currentState == PULL_DOWN_REFRESH) { //隐藏header mPullDownHeader.setPadding(0, -mPullDownHeaderViewHeight, 0, 0); } else if (currentState == RELEASE_REFRESH) { currentState = REFRESHING; refreshPullDownState(); mPullDownHeader.setPadding(0, 0, 0, 0); //回调刷新方法 if (mOnPullDownRefresh != null) { mOnPullDownRefresh.onPullDownRefresh(); } } break; } return super.onTouchEvent(ev); } /** * 隐藏头布局或脚布局并重置控件 */ public void OnRefreshDataFinish() { if (isLoadingMore) { isLoadingMore = false; mFootView.setPadding(0,-mFooterViewHeight,0,0); } else { ivArrow.setVisibility(View.VISIBLE); mProgressBar.setVisibility(View.INVISIBLE); tv_statue.setText("下拉刷新"); tv_time.setText("最后刷新时间：" + getCurrentTime()); mPullDownHeader.setPadding(0, -mPullDownHeaderViewHeight, 0, 0); currentState = PULL_DOWN_REFRESH; } } private String getCurrentTime() { SimpleDateFormat format = new SimpleDateFormat("HH:mm:ss"); return format.format(new Date()); } private void refreshPullDownState() { switch (currentState) { case PULL_DOWN_REFRESH: ivArrow.startAnimation(downAnimation); tv_statue.setText("下拉刷新"); break; case RELEASE_REFRESH: ivArrow.startAnimation(upAnimation); tv_statue.setText("松开刷新"); break; case REFRESHING: ivArrow.clearAnimation(); ivArrow.setVisibility(View.INVISIBLE); mProgressBar.setVisibility(View.VISIBLE); tv_statue.setText("正在刷新"); break; default: break; } } /** * 箭头旋转动画 */ private void initAnimation() { upAnimation = new RotateAnimation(0, -180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); upAnimation.setDuration(200); upAnimation.setFillAfter(true); downAnimation = new RotateAnimation(-180, -360, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f); downAnimation.setDuration(200); downAnimation.setFillAfter(true); } /** * 回调方法，用于刷新数据及加载更多 * @param listener */ public void setOnPullDownRefresh(OnPullDownRefresh listener) { this.mOnPullDownRefresh = listener; } public interface OnPullDownRefresh { public void onPullDownRefresh(); public void onLoadingMore(); } @Override public void onScrollStateChanged(AbsListView view, int scrollState) { if (!isEnabledLoadMore) { return; } //listView停止状态或惯性滑动状态 if (scrollState == SCROLL_STATE_IDLE || scrollState == SCROLL_STATE_FLING) { //listView已到达最底部 if ((getLastVisiblePosition() == getCount() - 1) && !isLoadingMore) { isLoadingMore = true; //展示脚布局 //mFootView.setPadding(0, 0, 0, 0); setSelection(getCount()); if (mOnPullDownRefresh != null) { mOnPullDownRefresh.onLoadingMore(); } } } } @Override public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) { } /** * 是否启用下拉刷新 * @param isEnable */ public void setEnabledPullDownRefresh(boolean isEnable) { isEnabledPullDownRefresh = isEnable; } /** * 是否启用加载更多 * @param isEnable */ public void setEnabledLoadMore(boolean isEnable) { isEnabledLoadMore = isEnable; } }
pull_listview_header.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <LinearLayout android:id="@+id/ll_refresh_pull_down_header" android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" > <FrameLayout android:layout_width="40dp" android:layout_height="40dp" android:layout_marginBottom="3dp" android:layout_marginLeft="28dp" android:layout_marginTop="8dp" > <ImageView android:id="@+id/iv_refresh_header_arrow" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:src="@drawable/common_listview_headview_red_arrow" /> <ProgressBar android:id="@+id/pb_refresh_header" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:indeterminateDrawable="@drawable/custom_progressbar" android:visibility="invisible" /> </FrameLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:layout_weight="1" android:gravity="center_horizontal" android:orientation="vertical" > <TextView android:id="@+id/tv_refresh_header_status" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="下拉刷新" android:textColor="#ff0000" android:textSize="16sp" android:textStyle="bold" > </TextView> <TextView android:id="@+id/tv_refresh_header_time" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginTop="5dp" android:text="最后刷新时间：09:23:23" android:textColor="@android:color/darker_gray" android:textSize="12sp" > </TextView> </LinearLayout> <TextView android:layout_width="40dp" android:layout_marginRight="28dp" android:layout_height="wrap_content" /> </LinearLayout> </LinearLayout>
pull_listview_footer.xml
<?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="wrap_content" android:gravity="center" android:orientation="horizontal" > <ProgressBar android:layout_width="40dp" android:layout_height="40dp" android:layout_margin="2dp" android:indeterminateDrawable="@drawable/custom_progressbar" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:gravity="center" android:padding="5dp" android:text="加载更多..." android:textColor="#ff0000" android:textSize="18sp" /> </LinearLayout>
custom_progressbar.xml
<?xml version="1.0" encoding="utf-8"?> <rotate xmlns:android="http://schemas.android.com/apk/res/android" android:fromDegrees="0" android:pivotX="50%" android:pivotY="50%" android:toDegrees="360" > <shape android:innerRadiusRatio="4" android:shape="ring" android:thicknessRatio="10" android:useLevel="false" > <gradient android:centerColor="#ff6666" android:endColor="#ff0000" android:startColor="#ffffff" android:type="sweep" /> </shape> </rotate>
