ListView (4)滚动事件/上拉刷新/下拉刷新的实现

最新推荐文章于 2022-11-02 09:55:00 发布

小熊先生kisCode

最新推荐文章于 2022-11-02 09:55:00 发布

阅读量4k

点赞数

分类专栏： Android基础文章标签： ListView 滑动事件

本文链接：https://blog.csdn.net/LANG791534167/article/details/45287053

版权

Android基础专栏收录该内容

48 篇文章 0 订阅

订阅专栏

本篇笔记整理了ListView上拉加载更多及下拉刷新的实现，两者实现都需要用到 OnScrollListener 的事件监听，转载请注明出处

ListView的滚动事件监听

实现滚动监听，首先需要通过实现OnScrollListener 接口，重写
onScrollStateChanged 和 onScroll两个方法，分别用于监听ListView滑动状态的变化，和屏幕滚动

onScrollStateChanged

// 监听滑动状态的变化
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
    // OnScrollListener.SCROLL_STATE_FLING; //屏幕处于甩动状态
    // OnScrollListener.SCROLL_STATE_IDLE; //停止滑动状态
    // OnScrollListener.SCROLL_STATE_TOUCH_SCROLL;// 手指接触状态
    // 记录当前滑动状态
}

scrollState 回调顺序如下：

第1次：scrollState = SCROLL_STATE_TOUCH_SCROLL(1)：表示正在滚动。当屏幕滚动且用户使用的触碰或手指还在屏幕上时为1
第2次：scrollState =SCROLL_STATE_FLING(2) ：表示手指做了抛的动作（手指离开屏幕前，用力滑了一下，屏幕产生惯性滑动）。
第3次：scrollState =SCROLL_STATE_IDLE(0) ：表示屏幕已停止。屏幕停止滚动时为0。

onScroll：监听屏幕滑动，并记录当前页面item显示情况

// 监听屏幕滚动的item的数量
@Override
public void onScroll(AbsListView view, int firstVisibleItem,
        int visibleItemCount, int totalItemCount) {

onScroll中参数讲解：

firstVisibleItem：当前窗口中能看见的第一个列表项ID（从0开始）
visibleItemCount：当前窗口中能看见的列表项的个数（小半个也算）
totalItemCount：列表项的总数

ListView 上拉刷新控件、加载更多、分页

应用：上拉刷新滑动到底部时加载一页新数据，显示到ListView底部，从而到达分页效果，避免一次性加载全部数据，提升了性能。

原理：

自定义控件LoadMoreListView 继承ListView
通过监听onScrollListener判断ListView滚动状态，当ListView滑动到底部，且处于正在滑动状态、且没有正在加载，则通过获取新数据
利用addAll()方法往list集合末端添加新数据，使得适配器的数据源每新加载一屏数据就发生变化；
利用适配器对象的notifyDataSetChanged()方法。该方法的作用是通知适配器自己及与该数据有关的view，数据已经发生变动，要刷新自己、更新数据。

代码实现

首先需要定义两个记录状态的全局变量

/** 是否正在加载中 */
private boolean mIsLoading;

/** 当前滑动状态 */
private int mCurrentScrollState;

接着ListView通过实现onScrollListener，复写onScrollStateChanged 用于保存当前滑动状态，复写onScrool判断是否该加载更多数据

// 监听滑动状态的变化
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
    // 记录当前滑动状态
    mCurrentScrollState = scrollState;
}

// 监听屏幕滚动的item的数量
@Override
public void onScroll(AbsListView view, int firstVisibleItem,
        int visibleItemCount, int totalItemCount) {
    // 判断是否滑动到底部：第一个可见的个数与 所有可见Item个数之和 大于等于item总数
    boolean isBottom = firstVisibleItem + visibleItemCount >= totalItemCount;
    if (!mIsLoading && isBottom
            && (mCurrentScrollState != OnScrollListener.SCROLL_STATE_IDLE)) {
        if (onLoadMoreListener != null) {
            mIsLoading = true;
            onLoadMoreListener.onLoadMore();
        }
    }
}

为方便查看，贴出全部代码也不过一百行，如果需要底部按钮 “加载更多”按钮可以通过ListView.AddFooter（）实现，此外，在构造方法记得要绑定ListView的监听事件

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.AbsListView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.ListView;

import com.example.listview.R;

/** 滑到底部加载更多 */
public class LoadMoreListView extends ListView implements OnScrollListener {

/** 是否正在加载中 */
private boolean mIsLoading;

/** 当前滑动状态 */
private int mCurrentScrollState;

    /** 底部控件 */
    private View mFooterView;

    private OnLoadMoreListener onLoadMoreListener;

    /**
     * @param context
     * @param attrs
     * @param defStyle
     */
    public LoadMoreListView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initView(context);
    }

    /**
     * @param context
     * @param attrs
     */
    public LoadMoreListView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initView(context);
    }

    /**
     * @param context
     */
    public LoadMoreListView(Context context) {
        super(context);
        initView(context);
    }

    /***
     * 初始化控件，添加底部控件
     * 
     * @param context
     */
    private void initView(Context context) {
        mFooterView = LayoutInflater.from(context).inflate(
                R.layout.load_more_footer, null);
        addFooterView(mFooterView);
        // 为自定义ListView控件绑定滚动监听事件
        this.setOnScrollListener(this);
    }

// 监听滑动状态的变化
@Override
public void onScrollStateChanged(AbsListView view, int scrollState) {
    // 记录当前滑动状态
    mCurrentScrollState = scrollState;
}

// 监听屏幕滚动的item的数量
@Override
public void onScroll(AbsListView view, int firstVisibleItem,
        int visibleItemCount, int totalItemCount) {
    // 判断是否滑动到底部：第一个可见的个数与 所有可见Item个数之和 大于等于item总数
    boolean isBottom = firstVisibleItem + visibleItemCount >= totalItemCount;
    if (!mIsLoading && isBottom
            && (mCurrentScrollState != OnScrollListener.SCROLL_STATE_IDLE)) {
        if (onLoadMoreListener != null) {
            mIsLoading = true;
            onLoadMoreListener.onLoadMore();
        }
    }
}

    /**
     * Notify the loading more operation has finished
     */
    public void onLoadMoreComplete() {
        mIsLoading = false;
        // mFooterView.setVisibility(View.GONE);
    }

    /**
     * 设置“加载更多”监听
     * 
     * @param onLoadMoreListener
     */
    public void setOnLoadMoreListener(OnLoadMoreListener onLoadMoreListener) {
        this.onLoadMoreListener = onLoadMoreListener;
    }

    /**
     * 当listview滑动到达底部时被回调
     */
    public interface OnLoadMoreListener {
        public void onLoadMore();
    }

}

ListView 下拉刷新的实现

也可参考去年的一篇文章 PullToRefreshListView的使用

应用

当ListView处于第一个Item在顶部，继续往下拉会出来一个下拉刷新动画提示的Header，Header中的提示图标及文字会根据滑动手势而做出相应变化。
下拉刷新演示

原理

自定义控件PullToRefreshListView继承ListView，实现onScrollListener接口
构造函数中初始化变量，通过addHeader方法添加顶部下拉视图header,初始化header样式和动画效果
借助 ListView组件的OnScrollListener监听事件，去判断何时该加载最新数据，并根据手指不同触屏状态显示对应的header显示内容和动画；
加载到最新数据list添加到数据源最前面位置mlist.add(0,list)，使适配器加载到新数据在listview顶部

import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.GestureDetector;
import android.view.GestureDetector.OnGestureListener;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.Animation;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.view.animation.Transformation;
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;

import com.example.listview.R;

/***
 * 下拉刷新
 * 
 * @author K
 * 
 */
public class PullToRefreshListView extends ListView implements OnScrollListener {
    private final static String TAG = PullToRefreshListView.class
            .getSimpleName();

    /** 下拉刷新 */
    private final static int PULL_TO_REFRESH = 0;
    /** 释放刷新 */
    private final static int RELEASE_TO_REFRESH = 1;
    /** 刷新中.. */
    private final static int REFRESHING = 2;
    /** 刷新完成 */
    private final static int DONE = 3;
    private LayoutInflater inflater;
    private LinearLayout mHeaderView;
    private TextView mTipsText;
    private ImageView mArrowView;
    private ProgressBar mSpinner;
    private RotateAnimation animRotate;
    private RotateAnimation animReverseRotate;

    private boolean isRecored;

    /** 默认paddingTop为 header高度的负值，使header在屏幕外不可见 **/
    private int mHeaderViewPaddingTop;

    /** header布局xml文件原始定义的paddingTop */
    private int mHeaderOrgPaddingTop;

    private GestureDetector gestureDetector;

    private int mPullState;

    public OnRefreshListener refreshListener;
    public OnLastItemVisibleListener lastItemVisibleListener;
    private boolean lastItemVisible;

    /** 第一个Item是否可见 */
    private boolean isFirstItemVisible;

    public interface OnRefreshListener {
        public void onRefresh();
    }

    public interface OnLastItemVisibleListener {
        public void onLastItemVisible(int lastIndex);
    }

    public PullToRefreshListView(Context context) {
        this(context, null);
    }

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

    private void init(Context context) {
        initArrowAnimation();
        initPullHeader(context);
        // 为自定义ListView控件绑定滚动监听事件
        setOnScrollListener(this);
        gestureDetector = new GestureDetector(context, gestureListener);
    }

    /***
     * 实例化下拉ListView的Header布局
     * 
     * @param context
     */
    private void initPullHeader(Context context) {
        inflater = LayoutInflater.from(context);
        mHeaderView = (LinearLayout) inflater.inflate(
                R.layout.pull_to_refresh_head, null);
        mArrowView = (ImageView) mHeaderView
                .findViewById(R.id.head_arrowImageView);
        mSpinner = (ProgressBar) mHeaderView
                .findViewById(R.id.head_progressBar);
        mTipsText = (TextView) mHeaderView.findViewById(R.id.head_tipsTextView);

        mHeaderOrgPaddingTop = mHeaderView.getPaddingTop();
        measureView(mHeaderView);
        mHeaderViewPaddingTop = -mHeaderView.getMeasuredHeight();
        setHeaderPaddingTop(mHeaderViewPaddingTop);
        mHeaderView.invalidate();
        addHeaderView(mHeaderView);
    }

    private void setHeaderPaddingTop(int paddingTop) {
        mHeaderView.setPadding(mHeaderView.getPaddingLeft(), paddingTop,
                mHeaderView.getPaddingRight(), mHeaderView.getPaddingBottom());
    }

    /**
     * 实例化下拉箭头动画
     */
    private void initArrowAnimation() {
        // 定义一个旋转角度为0 到-180度的动画，时长100ms
        animRotate = new RotateAnimation(0, -180,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        animRotate.setInterpolator(new LinearInterpolator());
        animRotate.setDuration(100);
        animRotate.setFillAfter(true);

        animReverseRotate = new RotateAnimation(-180, 0,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f,
                RotateAnimation.RELATIVE_TO_SELF, 0.5f);
        animReverseRotate.setInterpolator(new LinearInterpolator());
        animReverseRotate.setDuration(100);
        animReverseRotate.setFillAfter(true);
    }

    public void onScroll(AbsListView view, int firstVisiableItem,
            int visibleItemCount, int totalItemCount) {
        isFirstItemVisible = firstVisiableItem == 0 ? true : false;

        boolean loadMore = firstVisiableItem + visibleItemCount >= totalItemCount;

        if (loadMore) {
            if (mPullState != REFRESHING && lastItemVisible == false
                    && lastItemVisibleListener != null) {
                lastItemVisible = true;
                // including Header View,here using totalItemCount - 2
                lastItemVisibleListener.onLastItemVisible(totalItemCount - 2);
            }
        } else {
            lastItemVisible = false;
        }

    }

    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState) {
        // OnScrollListener.SCROLL_STATE_FLING :手指离开屏幕甩动中
        // OnScrollListener.SCROLL_STATE_TOUCH_SCROLL:手指正在屏幕上滑动中
        // OnScrollListener.SCROLL_STATE_IDLE: 闲置的，未滑动
        Log.i("onScroll", "onScrollStateChanged");
    }

    public boolean dispatchTouchEvent(MotionEvent event) {
        if (onTouched.onTouchEvent(event)) {
            return true;
        }
        return super.dispatchTouchEvent(event);
    }

    private interface OnTouchEventListener {
        public boolean onTouchEvent(MotionEvent ev);
    }

    private OnTouchEventListener onTouched = new OnTouchEventListener() {
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            switch (event.getAction()) {
            case MotionEvent.ACTION_CANCEL:
            case MotionEvent.ACTION_UP:
                if (isRecored) {
                    requestDisallowInterceptTouchEvent(false);
                    if (mPullState != REFRESHING) {
                        if (mPullState == PULL_TO_REFRESH) {
                            mPullState = DONE;
                            changeHeaderViewByState(mPullState);
                        } else if (mPullState == RELEASE_TO_REFRESH) {
                            mPullState = REFRESHING;
                            changeHeaderViewByState(mPullState);
                            onRefresh();
                        }
                    }
                    isRecored = false;
                    return true;
                }
                break;
            }
            return gestureDetector.onTouchEvent(event);
        }
    };

    /** 自定义手势探测器 */
    private OnGestureListener gestureListener = new OnGestureListener() {
        @Override
        public boolean onSingleTapUp(MotionEvent e) {
            return false;
        }

        @Override
        public void onShowPress(MotionEvent e) {
        }

        @Override
        public boolean onScroll(MotionEvent e1, MotionEvent e2,
                float distanceX, float distanceY) {
            int deltaY = (int) (e1.getY() - e2.getY());
            if (mPullState != REFRESHING) {
                // 第一个可见，且手势下拉
                if (!isRecored && isFirstItemVisible && deltaY < 0) {
                    isRecored = true;
                    requestDisallowInterceptTouchEvent(true);
                }
                if (isRecored) {
                    int paddingTop = mHeaderView.getPaddingTop();
                    // 释放刷新的过程
                    if (paddingTop < 0 && paddingTop > mHeaderViewPaddingTop) {
                        if (mPullState == RELEASE_TO_REFRESH) {
                            changeHeaderViewByState(PULL_TO_REFRESH);
                        }
                        mPullState = PULL_TO_REFRESH;
                    } else if (paddingTop >= 0) {
                        if (mPullState == PULL_TO_REFRESH) {
                            changeHeaderViewByState(RELEASE_TO_REFRESH);
                        }
                        mPullState = RELEASE_TO_REFRESH;
                    }

                    // 根据手指滑动状态动态改变header高度
                    int topPadding = (int) (mHeaderViewPaddingTop - deltaY / 2);
                    mHeaderView.setPadding(mHeaderView.getPaddingLeft(),
                            topPadding, mHeaderView.getPaddingRight(),
                            mHeaderView.getPaddingBottom());
                    mHeaderView.invalidate();
                    return true;
                }
            }
            return false;
        }

        @Override
        public void onLongPress(MotionEvent e) {
        }

        @Override
        public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,
                float velocityY) {
            return false;
        }

        @Override
        public boolean onDown(MotionEvent e) {
            return false;
        }
    };

    public void onRefreshing() {
        mPullState = REFRESHING;
        changeHeaderViewByState(mPullState);
    }

    /**
     * 改变刷新状态时，调用该方法来改变headerView 显示的内容
     * 
     * @param state
     *            刷新状态
     */
    private void changeHeaderViewByState(int state) {
        switch (state) {
        case RELEASE_TO_REFRESH:
            mSpinner.setVisibility(View.GONE);
            mTipsText.setVisibility(View.VISIBLE);
            mArrowView.setVisibility(View.VISIBLE);
            mArrowView.clearAnimation();
            mArrowView.startAnimation(animRotate);
            mTipsText.setText(R.string.pull_to_refresh_release_label);
            break;
        case PULL_TO_REFRESH:
            mSpinner.setVisibility(View.GONE);
            mTipsText.setVisibility(View.VISIBLE);
            mArrowView.setVisibility(View.VISIBLE);
            mArrowView.clearAnimation();
            mArrowView.startAnimation(animReverseRotate);
            mTipsText.setText(R.string.pull_to_refresh_pull_label);
            break;
        case REFRESHING:
            // 设置paddingTop为原始paddingTop
            setHeaderPaddingTop(mHeaderOrgPaddingTop);
            // 设置header布局为不可点击，进度条转圈中..
            mHeaderView.invalidate();

            mSpinner.setVisibility(View.VISIBLE);
            mArrowView.clearAnimation();
            mArrowView.setVisibility(View.GONE);
            mTipsText.setText(R.string.pull_to_refresh_refreshing_label);
            break;
        case DONE:
            // 设置header消失动画
            if (mHeaderViewPaddingTop - 1 < mHeaderView.getPaddingTop()) {
                ResetAnimimation animation = new ResetAnimimation(mHeaderView,
                        mHeaderViewPaddingTop, false);
                animation.setDuration(300);
                mHeaderView.startAnimation(animation);
            }

            mSpinner.setVisibility(View.GONE);
            mArrowView.setVisibility(View.VISIBLE);
            mArrowView.clearAnimation();
            mArrowView.setImageResource(R.drawable.ic_pulltorefresh_arrow);

            mTipsText.setText(R.string.pull_to_refresh_pull_label);
            setSelection(0); // listview显示到第一个Item
            break;
        }
    }

    // 点击刷新
    public void clickRefresh() {
        setSelection(0);
        mPullState = REFRESHING;
        changeHeaderViewByState(mPullState);
        onRefresh();
    }

    public void setOnRefreshListener(OnRefreshListener refreshListener) {
        this.refreshListener = refreshListener;
    }

    public void setOnLastItemVisibleListener(OnLastItemVisibleListener listener) {
        this.lastItemVisibleListener = listener;
    }

    public void onRefreshComplete(String update) {
        onRefreshComplete();
    }

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

    private void onRefresh() {
        if (refreshListener != null) {
            refreshListener.onRefresh();
        }
    }

    /***
     * 计算headView的width及height值
     * 
     * @param child
     *            计算控件对象
     */
    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 class ResetAnimimation extends Animation {
        private int targetHeight;
        private int originalHeight;
        private int extraHeight;
        private View view;
        private boolean down;
        private int viewPaddingBottom;
        private int viewPaddingRight;
        private int viewPaddingLeft;

        protected ResetAnimimation(View view, int targetHeight, boolean down) {
            this.view = view;
            this.viewPaddingLeft = view.getPaddingLeft();
            this.viewPaddingRight = view.getPaddingRight();
            this.viewPaddingBottom = view.getPaddingBottom();
            this.targetHeight = targetHeight;
            this.down = down;
            originalHeight = view.getPaddingTop();
            extraHeight = this.targetHeight - originalHeight;
        }

        @Override
        protected void applyTransformation(float interpolatedTime,
                Transformation t) {

            int newHeight;
            newHeight = (int) (targetHeight - extraHeight
                    * (1 - interpolatedTime));
            view.setPadding(viewPaddingLeft, newHeight, viewPaddingRight,
                    viewPaddingBottom);
            view.requestLayout();
        }

        @Override
        public void initialize(int width, int height, int parentWidth,
                int parentHeight) {
            super.initialize(width, height, parentWidth, parentHeight);
        }

    }

}

小熊先生kisCode

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
ListView (4)滚动事件/上拉刷新/下拉刷新的实现

本篇笔记整理了ListView上拉加载更多及下拉刷新的实现，两者实现都需要用到 OnScrollListener 的事件监听，转载请注明出处ListView的滚动事件监听实现滚动监听，首先需要通过实现OnScrollListener 接口，重写 onScrollStateChanged 和 onScroll两个方法，分别用于监听ListView滑动状态的变化，和屏幕滚动onScrollStat
复制链接

扫一扫