技术分享：Material Design 规范下 RecyclerView 做分页实现

背景

在前端开发中，我们经常需要在列表中展示大量数据，而分页是一种常见的解决方案。在 Material Design 规范下，Google 提供了一种很好的列表控件 RecyclerView，它在性能和灵活性方面都有很大的优势。本文将介绍如何使用 RecyclerView 实现分页功能。

实现思路

分页功能的实现可以分为两个部分：数据获取和数据展示。数据获取可以通过网络请求、本地数据库等方式获取，这里不做过多讨论。本文主要介绍如何使用 RecyclerView 展示分页数据。

RecyclerView 是一个强大的列表控件，它可以通过 LayoutManager 来控制列表的布局方式，通过 Adapter 来绑定数据和控制列表项的显示。在 RecyclerView 中，每个列表项都是一个 ViewHolder，可以通过 ViewHolder 来优化列表项的创建和复用。

在实现分页功能时，我们需要维护当前页数和每页的数据量。当用户滑动到列表底部时，我们需要加载下一页数据，并将新的数据添加到列表中。在加载数据时，我们可以显示一个 Loading 状态，当数据加载完成后，将 Loading 状态移除，显示新加载的数据。

示例代码

下面是一个简单的 RecyclerView 分页实现示例代码，假设我们需要展示一组用户数据，每页展示 20 条数据：

// www.javascriptcn.com code example
public class UserAdapter extends RecyclerView.Adapter<UserAdapter.UserViewHolder> {
    private List<User> mUsers;
    private boolean mIsLoading = false;
    private OnLoadMoreListener mOnLoadMoreListener;

    public UserAdapter(List<User> users) {
        mUsers = users;
    }

    public void setLoading(boolean isLoading) {
        mIsLoading = isLoading;
        notifyItemChanged(getItemCount() - 1);
    }

    public void setOnLoadMoreListener(OnLoadMoreListener listener) {
        mOnLoadMoreListener = listener;
    }

    @Override
    public UserViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        // 创建 ViewHolder
        View view = LayoutInflater.from(parent.getContext()).inflate(R.layout.item_user, parent, false);
        return new UserViewHolder(view);
    }

    @Override
    public void onBindViewHolder(UserViewHolder holder, int position) {
        // 绑定数据
        if (position == getItemCount() - 1) {
            // 最后一项为 Loading 状态
            holder.mLoadingView.setVisibility(mIsLoading ? View.VISIBLE : View.GONE);
            holder.mNameView.setVisibility(View.GONE);
        } else {
            User user = mUsers.get(position);
            holder.mNameView.setText(user.getName());
            holder.mLoadingView.setVisibility(View.GONE);
            holder.mNameView.setVisibility(View.VISIBLE);
        }
        if (position == getItemCount() - 5 && mOnLoadMoreListener != null && !mIsLoading) {
            // 当滑动到倒数第五项时，加载下一页数据
            mIsLoading = true;
            mOnLoadMoreListener.onLoadMore();
        }
    }

    @Override
    public int getItemCount() {
        // 列表项数量包括 Loading 状态
        return mUsers.size() + 1;
    }

    static class UserViewHolder extends RecyclerView.ViewHolder {
        TextView mNameView;
        ProgressBar mLoadingView;

        UserViewHolder(View itemView) {
            super(itemView);
            mNameView = itemView.findViewById(R.id.tv_name);
            mLoadingView = itemView.findViewById(R.id.pb_loading);
        }
    }

    interface OnLoadMoreListener {
        void onLoadMore();
    }
}

在上面的示例代码中，我们定义了一个 UserAdapter，它继承自 RecyclerView.Adapter。在 onCreateViewHolder 方法中，我们创建了一个 ViewHolder，并返回它。在 onBindViewHolder 方法中，我们绑定数据到 ViewHolder 中的控件上。当滑动到列表底部时，我们触发了一个 onLoadMore 回调，通过这个回调来加载下一页数据。在 getItemCount 方法中，我们返回列表项数量，包括 Loading 状态。

使用这个 Adapter，我们可以通过以下代码来展示分页数据：

// www.javascriptcn.com code example
RecyclerView recyclerView = findViewById(R.id.recycler_view);
UserAdapter adapter = new UserAdapter(mUsers);
adapter.setOnLoadMoreListener(new UserAdapter.OnLoadMoreListener() {
    @Override
    public void onLoadMore() {
        // 加载下一页数据
        loadNextPage();
    }
});
recyclerView.setAdapter(adapter);
recyclerView.setLayoutManager(new LinearLayoutManager(this));

在上面的代码中，我们创建了一个 RecyclerView，并设置了 LayoutManager 和 Adapter。在 Adapter 中，我们通过 setOnLoadMoreListener 方法设置了一个回调，当滑动到列表底部时，就会触发这个回调来加载下一页数据。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d0fadea941bf713421f227