recyclerView的使用以及上拉加载下拉刷新

向右看齐 2022-05-24 00:47 341阅读 0赞

**前言：**

在做项目的时候，对于列表是每一个项目必不可少的东西，我们之前的实现是通过listview与graidView来实现列表数据展示，当RecycleView 的出现，给程序猿增加了一个更好的列表知识点

的探索，recycleView使用起来方便，样式种类多，不单一，使我们更好的追求，下面针对；RecycleView进行简单的讲解。

**1.RecycleView的简介：**

RecycleView是android5.0的新特性，他的出现慢慢顶替了ListView与GridView的市场，RecyclerView是用起来接偶性比较强，异常灵活，可以实现listView很难实现的效果。

**2.RecycleView刷新的使用**

我会把带有上拉刷新下拉加载的功能通过代码一起展示，后面会给项目的地址，大家不要着急，

效果图会截图展示给大家，

**2.1. 创建项目，添加依赖（刷新的依赖等）**

![2018051711294884][]

选中进行复制依赖：

implementation 'com.android.support:appcompat-v7:26.1.0'

implementation 'com.android.support.constraint:constraint-layout:1.1.0'

testImplementation 'junit:junit:4.12'

androidTestImplementation 'com.android.support.test:runner:1.0.1'

androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'

compile 'com.android.support:support-v4:26.1.0'

compile 'com.android.support:design:26.1.0'

**2.2 对xml布局进行编写：**

![20180517113003454][]

选中进行复制xml:

<com.scwang.smartrefresh.layout.SmartRefreshLayout

android:id="@+id/refresh\_layout"

android:layout\_width="match\_parent"

android:layout\_height="wrap\_content">

<android.support.v7.widget.RecyclerView

android:id="@+id/recycler\_list"

android:layout\_width="match\_parent"

android:layout\_height="match\_parent" />

</com.scwang.smartrefresh.layout.SmartRefreshLayout>

**2.3. 在application设置上拉加载下拉刷新的样式初始：**

首先新建一个Application

![2018051711301517][]

选中进行复制Application代码：

public class MyApp extends Application \{

static \{

//设置全局的header构造器

SmartRefreshLayout.setDefaultRefreshHeaderCreator(new DefaultRefreshHeaderCreator() \{

@NonNull

@Override

public RefreshHeader createRefreshHeader(@NonNull Context context, @NonNull RefreshLayout layout) \{

layout.setPrimaryColorsId(R.color.colorPrimary, R.color.colorAccent);

ClassicsHeader classicsHeader = new ClassicsHeader(context);

classicsHeader.setEnableLastTime(false);

return classicsHeader;

\});

//设置全局得Footer构造器

SmartRefreshLayout.setDefaultRefreshFooterCreator(new DefaultRefreshFooterCreator() \{

@NonNull

@Override

public RefreshFooter createRefreshFooter(@NonNull Context context, @NonNull RefreshLayout layout) \{

ClassicsFooter classicsFooter = new ClassicsFooter(context);

classicsFooter.setDrawableSize(20).setBackgroundColor(context.getResources().getColor(R.color.colorPrimaryDark));

return classicsFooter;

\});

@Override

public void onCreate() \{

super.onCreate();

**2.4 编写RecyclerView的数据实体类（DataBean）**

![20180517113030503][]

选中代码进行复制：

public class DataBean \{

private String imgUrl;

private String name;

public String getImgUrl() \{

return imgUrl;

public void setImgUrl(String imgUrl) \{

this.imgUrl = imgUrl;

public String getName() \{

return name;

public void setName(String name) \{

this.name = name;

**2.5 编写RecyclerVeiw的适配器（DataAdapter）：**

**这里我就不把图片代码展示给大家了，直接复制代码岂不是更爽。**

适配器：

public class DataAdapter extends RecyclerView.Adapter<DataAdapter.ViewHolder> \{

private Context context;

private ArrayList<DataBean> mList;

public DataAdapter(Context context, ArrayList<DataBean> data) \{

this.context = context;

this.mList = data;

@Override

public DataAdapter.ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) \{

View itemView = LayoutInflater.from(context).inflate(R.layout.item\_data, parent, false);

return new ViewHolder(itemView);

@Override

public void onBindViewHolder(DataAdapter.ViewHolder holder, int position) \{

DataBean data=mList.get(position);

Glide.with(context).load(data.getImgUrl()).into(holder.imgUrl);

holder.name.setText(data.getName());

@Override

public int getItemCount() \{

return mList != null ? mList.size() : 0;

public class ViewHolder extends RecyclerView.ViewHolder \{

private final TextView name;

private final CircleImageView imgUrl;

public ViewHolder(View itemView) \{

super(itemView);

name = itemView.findViewById(R.id.tv\_view);

imgUrl = itemView.findViewById(R.id.img\_view);

适配器中的item布局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="match\_parent"

android:gravity="center"

android:orientation="horizontal"

<com.juxin.textapp.view.CircleImageView

android:id="@+id/img\_view"

android:layout\_width="60dp"

android:layout\_height="60dp"

android:src="@mipmap/ic\_launcher"

<TextView

android:id="@+id/tv\_view"

android:layout\_width="wrap\_content"

android:layout\_height="wrap\_content"

android:textColor="\#000"

android:layout\_marginLeft="20dp"

android:text="穿嘎嘎"

android:textSize="20sp"

</LinearLayout>

**2.6 在activity中添加假数据以及功能全部实现**

列表Activity

这里我直接复制代码（直接拷贝即可使用）

/\*

\* 编写recyclerview的上拉刷新 下拉加载问题

\* \*/

public class MainActivity extends AppCompatActivity \{

private RecyclerView rvView;

private ArrayList<DataBean> mList = new ArrayList<>();

private SmartRefreshLayout smartRefreshLayout;

private DataAdapter adapter;

@Override

protected void onCreate(Bundle savedInstanceState) \{

super.onCreate(savedInstanceState);

setContentView(R.layout.activity\_main);

addData();

initUI();

/\*初始化UI\*/

private void initUI() \{

smartRefreshLayout = findViewById(R.id.refresh\_layout);

smartRefreshLayout.setOnRefreshLoadMoreListener(new OnRefreshLoadMoreListener() \{

@Override

public void onLoadMore(@NonNull RefreshLayout refreshLayout) \{

smartRefreshLayout.finishLoadMore(3000);

@Override

public void onRefresh(@NonNull RefreshLayout refreshLayout) \{

smartRefreshLayout.finishRefresh(3000);

\});

rvView = findViewById(R.id.recycler\_list);

rvView.setLayoutManager(new LinearLayoutManager(MainActivity.this));

rvView.addItemDecoration(new RecycleItemDecoration(MainActivity.this));

adapter = new DataAdapter(MainActivity.this, mList);

rvView.setAdapter(adapter);

//添加数据

private void addData() \{

if(mList==null)\{

mList=new ArrayList<>();

for (int i = 0; i < 10; i++) \{

DataBean data = new DataBean();

data.setImgUrl("http://pic.58pic.com/58pic/15/91/28/76E58PICWqY\_1024.jpg");

data.setName("课程名称" + (i + 1));

mList.add(data);

**3. 上面是一个完整的RecyclerView的使用步骤，非常详细，复制就可以使用，**

运行效果展示：

3.1 正常时的效果：

![20180517113057580][]

3.2 下拉刷新效果（下拉刷新可以自定义）

![20180517113119473][]

3.3 上拉加载效果

![20180517113135190][]

项目地址：

[https://download.csdn.net/download/wk\_beicai/10420139][https_download.csdn.net_download_wk_beicai_10420139]

[2018051711294884]: /images/20220524/6deaf3b90ad045468bc07c1e357c26cb.png
[20180517113003454]: /images/20220524/6ddad0d44e3e48bd8810537d09e5f07d.png
[2018051711301517]: /images/20220524/617561f1586d4ee39e92d36ce97fed60.png
[20180517113030503]: /images/20220524/b13cb681efd04cb4b7d2890e0919d789.png
[20180517113057580]: /images/20220524/2016975ab16e4189ba9ff186d0daaab0.png
[20180517113119473]: /images/20220524/03f597e9ad1f49178837236eb7cc2859.png
[20180517113135190]: /images/20220524/8fc90160b03c4f7eb25f1c0c4f2908bb.png
[https_download.csdn.net_download_wk_beicai_10420139]: https://download.csdn.net/download/wk_beicai/10420139