Android分页 上拉加载下拉刷新

XRecyclerView 快速教你实现分页加载

先看效果

Android分页效果

分页加载逻辑

  1. 我们首先需要知道我们拿到数据之后页面展示的是第一页的十条数据
  2. 当我们手指往下滑动是松开这个时候是会刷新的刷新就是把之前的数据给清空拿到最新请求道的十条数据展示给我们的用户
  3. 我们在触碰列表手指往上拉的时候数据会滑动滑动到底部松开这个时候数据就会请求第二页的数据第一页的数据还会保留在我们的集合当中然后依次追加知道没有数据时就不能继续滑动

第一步还是老样子 先导入我们的XRecyclerView依赖

 implementation 'com.jcodecraeer:xrecyclerview:1.5.8'

第二步依赖导入完成之后就是要使用我们的XRecyclerView布局

<com.jcodecraeer.xrecyclerview.XRecyclerView
    android:layout_width="match_parent"
    android:id="@+id/xrv"
    android:layout_height="match_parent">
</com.jcodecraeer.xrecyclerview.XRecyclerView>

第三步展示我们接口中的列表数据

package com.wd.qn.activity;

import androidx.appcompat.app.AppCompatActivity;
import androidx.recyclerview.widget.LinearLayoutManager;

import android.os.Bundle;

import com.jcodecraeer.xrecyclerview.XRecyclerView;
import com.wd.qn.R;
import com.wd.qn.adapter.MyAdapter;
import com.wd.qn.base.BaseActivity;
import com.wd.qn.base.BasePreanter;
import com.wd.qn.bean.UploadPictures;
import com.wd.qn.contreanter.Contreanter;
import com.wd.qn.preanter.IPreanter;

import java.util.ArrayList;
import java.util.List;

public class Main4Activity extends BaseActivity implements Contreanter.IView {


    private XRecyclerView xRecyclerView;
    private   List<UploadPictures.ResultBean> beanList=new ArrayList<>();//自己创建一个集合
    private MyAdapter myAdapter;
    private int i=1;//是我们的页数
    @Override
    protected int getLayoutId() {
        return R.layout.activity_main4;
    }

    @Override
    protected void initView() {
        xRecyclerView = findViewById(R.id.xrv);
    }

    @Override
    protected BasePreanter initPreantert() {
        return new IPreanter(this);
    }

    @Override
    protected void initModel() {

    }

    @Override
    protected void initData() {
        BasePreanter basePreanter = getmPreantert();
        if(basePreanter instanceof Contreanter.IPreanter){
            ((Contreanter.IPreanter) basePreanter).SuccesssCoallack(15,i,10);
        }
        LinearLayoutManager linearLayoutManager = new LinearLayoutManager(getApplicationContext());
        xRecyclerView.setLayoutManager(linearLayoutManager);
        myAdapter = new MyAdapter(getApplicationContext(), beanList);
        xRecyclerView.setAdapter(myAdapter);
    }

    @Override
    public void OnSuccess(UploadPictures uploadPictures) {
        List<UploadPictures.ResultBean> result = uploadPictures.getResult();
        beanList=result;
    }
}

MyAdapter类

package com.wd.qn.adapter;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.bumptech.glide.Glide;
import com.bumptech.glide.load.resource.bitmap.CircleCrop;
import com.bumptech.glide.load.resource.bitmap.RoundedCorners;
import com.bumptech.glide.request.RequestOptions;
import com.jcodecraeer.xrecyclerview.XRecyclerView;
import com.wd.qn.R;
import com.wd.qn.bean.UploadPictures;

import java.util.List;

public class MyAdapter extends XRecyclerView.Adapter<XRecyclerView.ViewHolder> {
    Context context; List<UploadPictures.ResultBean> list;

    public MyAdapter(Context context, List<UploadPictures.ResultBean> list) {
        this.context = context;
        this.list = list;
    }
    public void resume(List<UploadPictures.ResultBean> list){
    //定义一个方法为我们的下拉刷新做处理
        this.list.clear();  
    }
    public void load(List<UploadPictures.ResultBean> list){
    //定义一个加载数据的方法为我们上拉的时候加载第二页数据做处理
        this.list.addAll(list);
        notifyDataSetChanged();
    }

    @NonNull
    @Override
    public XRecyclerView.ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
        View inflate = View.inflate(context, R.layout.item, null);
        return new ViewHorder(inflate);
    }

    @Override
    public void onBindViewHolder(@NonNull XRecyclerView.ViewHolder holder, int position) {
        UploadPictures.ResultBean resultBean = list.get(position);
        String name = resultBean.getName();
        ((ViewHorder)holder).tv.setText(name);
        String starring = resultBean.getStarring();
        ((ViewHorder)holder).tv1.setText(starring);
        String imageUrl = resultBean.getImageUrl();
        Glide.with(context).load(imageUrl).apply(RequestOptions.bitmapTransform(new RoundedCorners(20))).into(((ViewHorder)holder).im);
    }

    @Override
    public int getItemCount() {
        return list.size();
    }
    class ViewHorder extends RecyclerView.ViewHolder {

        private final ImageView im;
        private final TextView tv,tv1;

        public ViewHorder(@NonNull View itemView) {
            super(itemView);
            im = itemView.findViewById(R.id.imv);
            tv = itemView.findViewById(R.id.text);
            tv1 = itemView.findViewById(R.id.text1);
        }
    }
}

这个时候我们要知道XRecyclerView有一个滑动监听的属性

xRecyclerView.setLoadingListener(new XRecyclerView.LoadingListener() {

        @Override
        public void onRefresh() {  		 
                //手指下滑刷新触发事件
                
        }

        @Override
        public void onLoadMore() {
  			//手指上拉触发加载数据事件
        }
    }
    );

数据显示正常了 这个时候我们就要做分页效果

 xRecyclerView.setLoadingListener(new XRecyclerView.LoadingListener() {
            @Override
            public void onRefresh() {
                j=1;
                myAdapter.resume(beanList);
                BasePreanter basePreanter = getmPreantert();
                if(basePreanter instanceof Contreanter.IPreanter){
                    ((Contreanter.IPreanter) basePreanter).SuccesssCoallack(15,j,10);
                }
                LinearLayoutManager linearLayoutManager1 = new LinearLayoutManager(getApplicationContext());
                xRecyclerView.setLayoutManager(linearLayoutManager1);
            }

            @Override
            public void onLoadMore() {
                j++;
                if(beanList.size()>=10){
                    BasePreanter basePreanter = getmPreantert();
                    if(basePreanter instanceof Contreanter.IPreanter){
                        ((Contreanter.IPreanter) basePreanter).SuccesssCoallack(15,j,10);
                    }
                }
                xRecyclerView.loadMoreComplete();
            }
        });

最后在我们的契约类里面成功的方法进行我们数据的加载

 @Override
    public void OnSuccess(UploadPictures uploadPictures) {
        List<UploadPictures.ResultBean> result = uploadPictures.getResult();
        beanList=result;
        myAdapter.load(beanList);//调用我们的数据加载方法把我们请求的数据存放到这个集合当中进行加载
        xRecyclerView.loadMoreComplete();//loadMoreComplete 加载完成之后停止操作
        xRecyclerView.refreshComplete();//refreshComplete  刷新完成之后停止
    }
  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分页上拉加载下拉刷新是移动端开发中常见的功能,通常需要使用到第三方库来实现,比如React Native中的FlatList、ListView、SectionList等组件,这些组件都提供了相关的API来实现分页上拉加载下拉刷新功能。 具体实现步骤如下: 1.在界面中添加FlatList、ListView、SectionList等组件,并设置相关属性如数据源、渲染函数等。 2.为组件添加onEndReachedThreshold和onEndReached事件,onEndReachedThreshold表示距离底部多少距离触发onEndReached事件,onEndReached事件表示到达底部时触发的回调函数,通常在回调函数中发起下一数据的请求。 3.为组件添加refreshControl属性,并设置onRefresh事件,refreshControl表示下拉刷新的控件,onRefresh事件表示下拉刷新时触发的回调函数,通常在回调函数中重新请求第一数据。 4.为组件添加ListFooterComponent属性,并设置上拉加载的控件,通常在请求下一数据时显示上拉加载的控件,请求完毕后隐藏上拉加载的控件。 5.在请求数据时需要记录当前码,并将请求的数据添加到数据源中,然后重新渲染组件即可。 示例代码如下(以React Native中的FlatList组件为例): ```javascript import React, { useState, useEffect } from 'react'; import { FlatList, View, Text, ActivityIndicator } from 'react-native'; const pageSize = 10; // 每大小 const data = []; // 数据源 const renderItem = ({ item }) => { return ( <View> <Text>{item.title}</Text> </View> ); }; const renderFooter = () => { return ( <View style={{ alignItems: 'center', justifyContent: 'center', paddingVertical: 10 }}> <ActivityIndicator size="small" /> </View> ); }; const App = () => { const [page, setPage] = useState(1); // 当前码 const [isLoading, setIsLoading] = useState(false); // 是否正在加载 useEffect(() => { fetchData(); }, [page]); const fetchData = async () => { setIsLoading(true); try { const response = await fetch(`https://api.example.com/list?page=${page}&pageSize=${pageSize}`); const result = await response.json(); data.push(...result.data); setIsLoading(false); } catch (error) { console.error(error); setIsLoading(false); } }; const handleRefresh = () => { setPage(1); }; const handleEndReached = () => { setPage(page + 1); }; return ( <FlatList data={data} renderItem={renderItem} ListFooterComponent={isLoading && renderFooter} onEndReachedThreshold={0.1} onEndReached={handleEndReached} refreshControl={<RefreshControl refreshing={isLoading} onRefresh={handleRefresh} />} /> ); }; export default App; ``` 以上代码中,App组件中的FlatList组件实现了分页上拉加载下拉刷新功能,pageSize表示每大小,data表示数据源,renderItem表示渲染函数,renderFooter表示上拉加载的控件,page表示当前码,isLoading表示是否正在加载,fetchData表示请求数据的函数,handleRefresh表示下拉刷新时触发的函数,handleEndReached表示到达底部时触发的函数。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值