SwipeRefreshLayout实现上滑加载更多[通俗易懂]

全栈程序员站长

发布于 2022-09-12 19:43:02

3K0

发布于 2022-09-12 19:43:02

文章被收录于专栏：全栈程序员必看全栈程序员必看

大家好，又见面了，我是你们的朋友全栈君。

在我们的项目中，需要用到许多下拉刷新和上滑加载的操作，不说什么没用的，直接来介绍SwipeRefreshLayout的扩展用法。

后面会简单的介绍SwipeRefreshLayout的用法。

在这里我们对谷歌官方的控件进行拓展，使得SwipeRefreshLayout具有上滑加载更多的功能。

下面是正文

首先我们新建文件(文件名自己定义，在这里我取名叫MySwipeRefreshLayout)

MySwipeRefreshLayout extends SwipeRefreshLayout并创建SwipeRefreshLayout的构造方法

public class MySwipeRefreshLayout extends SwipeRefreshLayout {
	public MySwipeRefreshLayout(@NonNull Context context) {
        super(context);
    }

    public MySwipeRefreshLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }
}

创建盛放ViewFooter的控件和需要上滑的距离

	/**
     * 滑动到最下面时的上拉操作
     */
    private int mTouchSlop;
    /**
     * 创建盛放ViewFooter的View
     */
    private View mViewFooter;

创建ViewFooter的布局，我们这里使用非常简单，只使用了一个ProgressBar和TextView，如有其它好看动画效果，自己加入即可

<?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:gravity="center"
    android:padding="3dp"
    android:orientation="horizontal">

    <ProgressBar
        android:id="@+id/view_foot_progress"
        android:layout_width="30dip"
        android:layout_height="30dip"
        />
    <TextView
        android:id="@+id/view_foot_more"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:padding="5dp"
        android:text="加载更多"/>

</LinearLayout>

在MySwipeRefreshLayout的构造方法中获取mTouchSlop和mViewFooter

 public MySwipeRefreshLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        //获取达到最下方的时候需要滑动的像素点
		mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();

		//获取ViewFooter的实例
		mViewFooter = LayoutInflater.from(context).inflate(R.layout.view_footer, null, false);
}

创建嵌套的ListView,RecyclerView和上拉监听

	 /**
     * listview实例
     */
    private ListView mListView;

    /**
     * RecyclerView实例
     */
    private RecyclerView mRecyclerView;

    /**
     * 上拉监听器, 到了最底部的上拉加载操作
     */
    private OnLoadListener mOnLoadListener;

	/**
     * 加载更多的监听器
     */
    public static interface OnLoadListener {
        public void onLoad();
    }
    /**
     * 设置加载监听
     * @param loadListener
     */
    public void setOnLoadListener(OnLoadListener loadListener) {
        mOnLoadListener = loadListener;
    }

获取ListView,RecyclerView实例

	@Override
    protected void onLayout(boolean changed, int left, int top, int right,
                            int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        // 初始化ListView,RecyclerView对象
        if (mListView == null || mRecyclerView == null) {
            getView();
        }
    }
    /**
     * 获取ListView , RecyclerView对象
     */
    private void getView() {
        int childs = getChildCount();
        if (childs > 0) {
            View childView = getChildAt(0);
            if (childView instanceof ListView) {
           		//获取ListView实例
                mListView = (ListView) childView;
                // 设置滚动监听器给ListView, 使得滚动的情况下也可以自动加载
                mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
                    @Override
                    public void onScrollStateChanged(AbsListView view, int scrollState) {
                    //执行加载操作,具体操作后面会继续详解
                        if (canLoad()) {
                            loadData();
                        }
                    }

                    @Override
                    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

                    }
                });
               
            }else if (childView instanceof RecyclerView){
            	//获取RecyclerView实例
                mRecyclerView = (RecyclerView) childView;
                // 设置滚动监听器给RecyclerView, 使得滚动的情况下也可以自动加载
                mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
                    @Override
                    public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                        super.onScrollStateChanged(recyclerView, newState);
                        //执行加载操作
                        if (canLoad()) {
                            loadData();
                        }
                    }

                    @Override
                    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                        super.onScrolled(recyclerView, dx, dy);
                    }
                });
            }
        }
    }

创建按下坐标，是否点击，是否上拉操作，首页加载条数

	/**
     * 按下坐标
     * dX按下X的坐标
     * dY按下Y的坐标
     * uX抬起X的坐标
     * uY抬起Y的坐标
     */
    private int dX = 0, dY = 0, uX = 0, uY = 0;
    /**
     * 是否为点击,避免点击时触发滑动效果
     */
    private boolean isMove = false;
    /**
     * 是否在加载中 ( 上拉加载更多 )
     */
    private boolean isLoading = false;
    /**
     * 首页加载条数
     */
    private int mItemCount = -1;

获取坐标

	//根据dispatchTouchEvent获取按下抬起时的坐标值
	//根据MotionEvent获取按下抬起时的值
	@Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        final int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                // 按下
                dX = (int) event.getX();
                dY = (int) event.getY();
                Log.e("TAG", "dX: " + dX + "   dY : " + dY);
                break;
            case MotionEvent.ACTION_MOVE:
                isMove = false;
                // 移动
                if (canLoad()) {
                    loadData();
                }
				break;

            case MotionEvent.ACTION_UP:
                uX = (int) event.getX();
                uY = (int) event.getY();
                //如果不是点击时滑动的话将isMove设置为true
                if (uX != dX && uY != dY){
                    isMove = true;
                }
                Log.e("TAG", "uX: " + uX + "   uY : " + uY);
				 break;
            default:
                break;
        }
		return super.dispatchTouchEvent(event);
    }

设置上滑条数

 	/**
     *     设置可上滑的条数
     */
    public void setItemCount(int itemCount) {
        this.mItemCount = itemCount;
    }

是否在加载中

	/**
     * 是否处于上滑状态
     * 在外部可以调用此办法判断是否在加载中
     * @return
     */
    public boolean getIsLoading(){
        return isLoading;
    }

上面的准备工作算是完成了，接下来就是判断是否在上滑等一些操作

判断是否在可以加载更多

	/**
     * 是否可以加载更多, 条件是否到了最底部, 是否正在执行上拉加载, 且为上拉操作.
     *
     * @return
     */
    private boolean canLoad() {
        return isBottom() && !isLoading && isPullUp();
    }
    /**
     * 判断是否到了最底部
     */
    private boolean isBottom() {
        boolean b = false;
        if (mListView != null && mListView.getAdapter() != null) {
			if (mItemCount > 0) {
                if (mListView.getAdapter().getCount() < mItemCount) {
                    // 第一页未满，禁止下拉
                    b = false;
                }else {
                    b = mListView.getLastVisiblePosition() == (mListView.getAdapter().getCount() - 1);
                }
            } else {
                // 未设置数据长度，则默认第一页数据不满时也可以上拉
                b = mListView.getLastVisiblePosition() == (mListView.getAdapter().getCount() - 1);
            }
            return b;
        }
        return false;
    }
    /**
     * 是否是上拉操作
     * 根据按下的Y轴坐标和抬起的Y轴坐标进行判断
     * 查看按下时Y轴坐标和抬起Y轴坐标是否大于最小滑动距离
     *
     * @return
     */
    private boolean isPullUp() {
        return (dY - uY) >= mTouchSlop;
    }

执行加载操作

	/**
     * 如果到了最底部,而且是上拉操作.那么执行onLoad方法
     */
    private void loadData() {
        if (isMove){
            if (mOnLoadListener != null) {
                // 设置状态
                setLoading(true);
                //执行加载操作
                mOnLoadListener.onLoad();
            }
        }
    }

设置刷新

	/**
     * @param loading
     * @方法说明:设置刷新
     */
    public void setLoading(boolean loading) {
        isLoading = loading;
        if (isLoading) {
            mListView.addFooterView(mViewFooter);
        } else {
        	//设置取消
            mListView.removeFooterView(mViewFooter);
            uY = 0;
            dY = 0;
        }
    }

以上就是基本方法，我会把整个的文件代码放上

完整代码

public class MySwipeRefreshLayout extends SwipeRefreshLayout {

    /**
     * 滑动到最下面时的上拉操作
     */
    private int mTouchSlop;
    /**
     * ListView的加载中footer
     */
    private View mViewFooter;
    /**
     * listview实例
     */
    private ListView mListView;

    /**
     * RecyclerView实例
     */
    private RecyclerView mRecyclerView;

    /**
     * 上拉监听器, 到了最底部的上拉加载操作
     */
    private OnLoadListener mOnLoadListener;
    /**
     * 按下坐标
     */
    private int dX = 0, dY = 0, uX = 0, uY = 0;
    /**
     * 是否为点击,避免点击时触发滑动效果
     */
    private boolean isMove = false;
    /**
     * 是否在加载中 ( 上拉加载更多 )
     */
    private boolean isLoading = false;
    /**
     * 首页加载条数
     */
    private int mItemCount = -1;


    public MySwipeRefreshLayout(@NonNull Context context) {
        super(context);
    }

    public MySwipeRefreshLayout(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop();

        mViewFooter = LayoutInflater.from(context).inflate(
                R.layout.view_footer, null, false);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right,
                            int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        // 初始化ListView对象
        if (mListView == null || mRecyclerView == null) {
            getView();
        }
    }

    /**
     * 获取ListView对象
     */
    private void getView() {
        int childs = getChildCount();
        if (childs > 0) {
            View childView = getChildAt(0);
            if (childView instanceof ListView) {
                mListView = (ListView) childView;
                // 设置滚动监听器给ListView, 使得滚动的情况下也可以自动加载
                mListView.setOnScrollListener(new AbsListView.OnScrollListener() {
                    @Override
                    public void onScrollStateChanged(AbsListView view, int scrollState) {
                        if (canLoad()) {
                            loadData();
                        }
                    }

                    @Override
                    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {

                    }
                });
            }else if (childView instanceof RecyclerView){
                mRecyclerView = (RecyclerView) childView;
                mRecyclerView.addOnScrollListener(new RecyclerView.OnScrollListener() {
                    @Override
                    public void onScrollStateChanged(@NonNull RecyclerView recyclerView, int newState) {
                        super.onScrollStateChanged(recyclerView, newState);
                        if (canLoad()) {
                            loadData();
                        }
                    }

                    @Override
                    public void onScrolled(@NonNull RecyclerView recyclerView, int dx, int dy) {
                        super.onScrolled(recyclerView, dx, dy);
                    }
                });
            }
        }
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent event) {
        final int action = event.getAction();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                // 按下
                dX = (int) event.getX();
                dY = (int) event.getY();
                Log.e("TAG", "dX: " + dX + "   dY : " + dY);

                break;

            case MotionEvent.ACTION_MOVE:
                isMove = false;
                // 移动
                if (canLoad()) {
                    loadData();
                }

                break;

            case MotionEvent.ACTION_UP:
                uX = (int) event.getX();
                uY = (int) event.getY();
                if (uX != dX && uY != dY){
                    isMove = true;
                }
                Log.e("TAG", "uX: " + uX + "   uY : " + uY);

                break;
            default:
                break;
        }

        return super.dispatchTouchEvent(event);
    }


    /**
     * 是否可以加载更多, 条件是到了最底部, listview不在加载中, 且为上拉操作.
     *
     * @return
     */
    private boolean canLoad() {
        return isBottom() && !isLoading && isPullUp();
    }

    /**
     * 判断是否到了最底部
     */
    private boolean isBottom() {
        boolean b = false;
        if (mListView != null && mListView.getAdapter() != null) {

            if (mItemCount > 0) {
                if (mListView.getAdapter().getCount() < mItemCount) {
                    // 第一页未满，禁止下拉
                    b = false;
                }else {
                    b = mListView.getLastVisiblePosition() == (mListView.getAdapter().getCount() - 1);
                }
            } else {
                // 未设置数据长度，则默认第一页数据不满时也可以上拉
                b = mListView.getLastVisiblePosition() == (mListView.getAdapter().getCount() - 1);
            }
            return b;
        }
        return false;
    }

    /**
     *     设置可上滑的条数
     */
    public void setItemCount(int itemCount) {
        this.mItemCount = itemCount;
    }

    /**
     * 是否是上拉操作
     *
     * @return
     */
    private boolean isPullUp() {
        return (dY - uY) >= mTouchSlop;
    }

    /**
     * 如果到了最底部,而且是上拉操作.那么执行onLoad方法
     */
    private void loadData() {
        if (isMove){
            if (mOnLoadListener != null) {
                // 设置状态
                setLoading(true);
                //
                mOnLoadListener.onLoad();
            }
        }
    }

    /**
     * 是否处于上滑状态
     * @return
     */
    public boolean getIsLoading(){
        return isLoading;
    }

    /**
     * @param loading
     * @方法说明:设置刷新
     */
    public void setLoading(boolean loading) {
        isLoading = loading;
        if (isLoading) {
            mListView.addFooterView(mViewFooter);
        } else {
            mListView.removeFooterView(mViewFooter);
            uY = 0;
            dY = 0;
        }
    }

    /**
     * 设置加载监听
     * @param loadListener
     */
    public void setOnLoadListener(OnLoadListener loadListener) {
        mOnLoadListener = loadListener;
    }


    /**
     * 加载更多的监听器
     */
    public static interface OnLoadListener {
        public void onLoad();
    }
}

以上是MySwipeRefreshLayout的完整代码

基本用法

布局很简单

<?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="vertical">
    <com.myzp.mapp.MySwipeRefreshLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/swipe">
        <!--里面可以为ListView,RecyclerView,ScrollView等滑动布局-->
        <ListView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/listview"/>
    </com.myzp.mapp.MySwipeRefreshLayout>
</LinearLayout>

用法获取MySwipeRefreshLayout和ListView控件

	@BindView(R.id.listview)
    ListView mListView;
    @BindView(R.id.swipe)
    MySwipeRefreshLayout mSwipeRefreshLayout;

为Listview设置Adapter这里就不赘述了

MySwipeRefreshLayout用法

		//为SwipeRefreshLayout设置监听事件
        mSwipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
            //刷新完成之后需要调用
            //关闭Refreshing动画
            //mSwipeRefreshLayout.setRefreshing(false);
            //如果不调用此方法的话,刷新动画则是一直存在
            //根据此方法可以进行判断是否正在执行刷新操作
            //boolean refreshing = mSwipeRefreshLayout.isRefreshing();
            }
        });
        //上拉加载
        mSwipeRefreshLayout.setOnLoadListener(new MySwipeRefreshLayout.OnLoadListener() {
            @Override
            public void onLoad() {
            //加载完数据之后需要调用
            //关闭Loading动画
            //mSwipeRefreshLayout.setLoading(false);
            //如果不调用此方法的话,加载动画一直存在
            //根据此方法可以进行判断是否正在执行加载操作
            //boolean isLoading = mSwipeRefreshLayout.getIsLoading();
            
            }
        });
        //设置可上滑的条数
        mSwipeRefreshLayout.setItemCount(10);
        //为SwipeRefreshLayout设置刷新时的颜色变化，最多可以设置4种，每转一圈换一种颜色
        mSwipeRefreshLayout.setColorSchemeResources(R.color.colorAccent, R.color.colorPrimary);

以上就是MySwipeRefreshLayout的基本View代码和基本用法。

代码中注释也比较详细，如果有什么地方不懂或者不对的话，请给我留言。有改进的建议也请联系我，谢谢！

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/152948.html原文链接：https://javaforall.cn

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

编程算法