快速使用Android BaseRecyclerViewAdapterHelper之实现一种&多种布局的RecycleView
BaseRecyclerViewAdapterHelper
人送外号RecyclerView万能适配器，在Android的江湖中，有着举足轻重的地位，相信大家在项目的开发中应该会用到BaseRecyclerViewAdapterHelper，也能感觉到BaseRecyclerViewAdapterHelper确实提升了一些我们的开发效率。虽然功能非常强大，但是使用起来较为简单方便。
导入
打开Project根目录下build.gradle文件，添加JitPack：
allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}
打开app/build.gradle文件添加依赖项:
dependencies {
...
implementation 'com.github.CymChad:BaseRecyclerViewAdapterHelper:2.9.40'
}
Adapter 的最基本使用
如果在layout文件中找不到RecycleView，可以在app/build.gradle文件里添加依赖项：
dependencies {
...
implementation 'com.android.support:recyclerview-v7:28.0.0'
}
注意后面的版本号最好跟com.android.support:appcompat-v7一样，不然可能报错，Sync不成功。
- 一种布局的RecycleView
Demo运行效果图：
实现步骤：
1、在activity_piggy.xml布局文件中引入RecyclerView：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".PiggyActivity">
<android.support.v7.widget.RecyclerView
android:id="@+id/rv_piggy"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent" />
</android.support.constraint.ConstraintLayout>
2、新建item_piggy.xml文件，添加下面内容到布局文件中：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_10"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/iv_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:src="@drawable/piggy"/>
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/iv_image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="@string/piggy_text"
/>
</android.support.constraint.ConstraintLayout>
3、新建Piggy实体类：
public class Piggy {
private int image;
private String name;
public int getImge() {
return image;
}
public void setImge(int imge) {
this.image = imge;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public Piggy(int image, String name) {
this.image = image;
this.name = name;
}
}
4、新建PiggyAdapter适配器，继承BaseQuickAdapter，BaseQuickAdapter为框架提供的最基本的类型，所有子类都需要继承于此。其中T为数据类型，VH为ViewHolder类型，如果不需要自定义，直接使用BaseViewHolder即可。框架还提供了一个基础的BaseViewHolder，所有自定义的ViewHolder都需要继承于此。
public class PiggyAdapter extends BaseQuickAdapter<Piggy, BaseViewHolder> {
public PiggyAdapter(@LayoutRes int layoutResId, @Nullable List<Piggy> data) {
super(layoutResId, data);
}
@Override
protected void convert(BaseViewHolder helper, Piggy item) {
//第一种，链式调用
helper.setImageResource(R.id.iv_image, item.getImge())
.setText(R.id.tv_name, item.getName());
//第二种，普通调用
ImageView ivImage = helper.getView(R.id.iv_image);
TextView tvName = helper.getView(R.id.tv_name);
ivImage.setImageResource(item.getImge());
tvName.setText(item.getName());
}
}
上面写了两种方式进行binding，实现效果都一样的，各有优缺点，看项目需要的咯。
5、最后一步，在Activity中使用上面写好的PiggyAdapter适配器：
public class PiggyActivity extends AppCompatActivity {
private RecyclerView mRvView;
private PiggyAdapter mPiggyAdapter;
private List<Piggy> piggies;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_piggy);
mRvView = findViewById(R.id.rv_piggy);
//网格分布
mRvView.setLayoutManager(new GridLayoutManager(this, 4));
//模拟数据
piggies = new ArrayList<>();
for (int i = 1; i < 13; i++) {
int image = R.drawable.piggy;
if (i % 2 == 0) {
image = R.drawable.piggy2;
}
piggies.add(new Piggy(image, "小猪佩奇" + i));
}
mPiggyAdapter = new PiggyAdapter(R.layout.item_piggy, piggies);
mRvView.setAdapter(mPiggyAdapter);
}
}
补充：BaseQuickAdapter 点击事件
- Item 点击事件：
mPiggyAdapter.setOnItemClickListener(new BaseQuickAdapter.OnItemClickListener() {
@Override
public void onItemClick(BaseQuickAdapter adapter, View view, int position) {
showToast("点击了第" + (position + 1) + "位佩奇！");
}
});
- Item 长按事件：
mPiggyAdapter.setOnItemLongClickListener(new BaseQuickAdapter.OnItemLongClickListener() {
@Override
public boolean onItemLongClick(BaseQuickAdapter adapter, View view, int position) {
showToast("长按了第" + (position + 1) + "位佩奇！");
//如果希望长按Item的时候也执行Item的点击的事件，则return false;
//如果只是单纯执行Item长按事件，则return true；
return true;
}
});
注意哦，对于Item的长按事件是有true/false返回值的，返回值不同会有一点影响的。
- Item 内子View的点击事件：
首先在mPiggyAdapter的convert()方法里面通过helper.addOnClickListener()绑定需要点击的子控件id：
@Override
protected void convert(BaseViewHolder helper, Piggy item) {
helper.setImageResource(R.id.iv_image, item.getImge())
.setText(R.id.tv_name, item.getName())
.addOnClickListener(R.id.iv_image);//给图片添加点击事件
}
然后再设置子控件点击监听：
mPiggyAdapter.setOnItemChildClickListener(new BaseQuickAdapter.OnItemChildClickListener() {
@Override
public void onItemChildClick(BaseQuickAdapter adapter, View view, int position) {
showToast("点击了第" + (position + 1) + "位佩奇的头像");
}
});
- Item 内子View的长按事件：
跟上面的同理，先绑定需要长按的子控件id：
@Override
protected void convert(BaseViewHolder helper, Piggy item) {
//第一种，链式调用
helper.setImageResource(R.id.iv_image, item.getImge())
.setText(R.id.tv_name, item.getName())
.addOnClickListener(R.id.iv_image)//给图片添加点击事件
.addOnLongClickListener(R.id.tv_name);//给名字添加长按事件
}
然后再设置子控件长按监听：
mPiggyAdapter.setOnItemChildLongClickListener(new BaseQuickAdapter.OnItemChildLongClickListener() {
@Override
public boolean onItemChildLongClick(BaseQuickAdapter adapter, View view, int position) {
showToast("长按了第" + (position + 1) + "位佩奇的名字");
return true;
}
});
到这里，关于BaseQuickAdapter的基本使用方法已经讲完啦，如果还想了解更多，附上传送门：
BaseQuickAdapter主要属性、方法说明
- 多种布局的RecycleView
三种布局的Demo运行效果图：
实现步骤：
1、新建三个item的布局文件：
item_color.xml，用来表示下面出现的佩奇颜色：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
xmlns:app="http://schemas.android.com/apk/res-auto">
<TextView
android:id="@+id/tv_color"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/dp_10"
android:gravity="center"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
android:textSize="22sp"
android:text="@string/color_text"
/>
</android.support.constraint.ConstraintLayout>
item_pink_piggy.xml，表示为粉色佩奇：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_10"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/iv_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:src="@drawable/pink_piggy"/>
<TextView
android:id="@+id/tv_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toBottomOf="@+id/iv_image"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:text="@string/pink_piggy_text"
/>
</android.support.constraint.ConstraintLayout>
item_blue_piggy.xml，表示为蓝色佩奇：
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="@dimen/dp_10"
xmlns:app="http://schemas.android.com/apk/res-auto">
<ImageView
android:id="@+id/iv_image2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
android:src="@drawable/blue_piggy"/>
<TextView
android:id="@+id/tv_name2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toStartOf="@id/iv_image2"
android:text="@string/blue_piggy_text"
/>
</android.support.constraint.ConstraintLayout>
2、新建MultiPiggy实体类，需要实现MultiItemEntity，并且在设置数据的时候，需要给每一个数据设置type：
public class MultiPiggy implements MultiItemEntity {
public static final int COLOR = 1; //颜色说明
public static final int PINK_PIGGY = 2; //粉色佩奇
public static final int BLUE_PIGGY = 3; //蓝色佩奇
private String color;
private int image;
private String name;
private int type;
public String getColor() {
return color;
}
public void setColor(String color) {
this.color = color;
}
public int getImge() {
return image;
}
public void setImge(int imge) {
this.image = imge;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public int getType() {
return type;
}
public void setType(int type) {
this.type = type;
}
public MultiPiggy(int image, String name, int type) {
this.image = image;
this.name = name;
this.type = type;
}
public MultiPiggy(String color, int type) {
this.color = color;
this.type = type;
}
@Override
public int getItemType() {
return type;
}
}
3、新建MultiPiggyAdapter适配器，继承BaseMultiItemQuickAdapter，并且需要在MultiPiggyAdapter适配器中的构造方法里面addItemType绑定type和layout的关系：
public class MultiPiggyAdapter extends BaseMultiItemQuickAdapter<MultiPiggy, BaseViewHolder> {
public MultiPiggyAdapter(@Nullable List<MultiPiggy> data) {
super(data);
addItemType(MultiPiggy.COLOR, R.layout.item_color);
addItemType(MultiPiggy.PINK_PIGGY, R.layout.item_pink_piggy);
addItemType(MultiPiggy.BLUE_PIGGY, R.layout.item_blue_piggy);
}
@Override
protected void convert(BaseViewHolder helper, MultiPiggy item) {
switch (helper.getItemViewType()) {
case MultiPiggy.COLOR:
helper.setText(R.id.tv_color, item.getColor());
break;
case MultiPiggy.PINK_PIGGY:
helper.setImageResource(R.id.iv_image, item.getImge())
.setText(R.id.tv_name, item.getName());
break;
case MultiPiggy.BLUE_PIGGY:
helper.setImageResource(R.id.iv_image2, item.getImge())
.setText(R.id.tv_name2, item.getName());
break;
}
}
}
4、最后一步，在Activity中使用上面写好的MultiPiggyAdapter适配器：
public class MultiPiggyActivity extends AppCompatActivity {
private RecyclerView mRvView;
private MultiPiggyAdapter mMultiPiggyAdapter;
private List<MultiPiggy> multiPiggies;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_piggy);
mRvView = findViewById(R.id.rv_piggy);
//模拟数据
multiPiggies = new ArrayList<>();
multiPiggies.add(new MultiPiggy("粉色的佩奇", MultiPiggy.COLOR));
for (int i = 1; i < 5; i++) {
multiPiggies.add(new MultiPiggy(R.drawable.pink_piggy, "粉佩奇" + i, MultiPiggy.PINK_PIGGY));
}
multiPiggies.add(new MultiPiggy("蓝色的佩奇", MultiPiggy.COLOR));
for (int i = 1; i < 3; i++) {
multiPiggies.add(new MultiPiggy(R.drawable.blue_piggy, "蓝佩奇" + i, MultiPiggy.BLUE_PIGGY));
}
multiPiggies.add(new MultiPiggy("粉色的佩奇", MultiPiggy.COLOR));
for (int i = 5; i < 9; i++) {
multiPiggies.add(new MultiPiggy(R.drawable.pink_piggy, "粉佩奇" + i, MultiPiggy.PINK_PIGGY));
}
multiPiggies.add(new MultiPiggy("蓝色的佩奇", MultiPiggy.COLOR));
for (int i = 3; i < 5; i++) {
multiPiggies.add(new MultiPiggy(R.drawable.blue_piggy, "蓝佩奇" + i, MultiPiggy.BLUE_PIGGY));
}
mMultiPiggyAdapter = new MultiPiggyAdapter(multiPiggies);
//网格分布
mRvView.setLayoutManager(new GridLayoutManager(this, 4));
//重新定义每行的item数量
mMultiPiggyAdapter.setSpanSizeLookup(new BaseQuickAdapter.SpanSizeLookup() {
@Override
public int getSpanSize(GridLayoutManager gridLayoutManager, int position) {
MultiPiggy multiPiggy = multiPiggies.get(position);
int spanSize = 0;
switch (multiPiggy.getType()) {
case MultiPiggy.COLOR:
spanSize = 4;//一行一个
break;
case MultiPiggy.PINK_PIGGY:
spanSize = 1;//一行四个
break;
case MultiPiggy.BLUE_PIGGY:
spanSize = 2; //一行两个
break;
}
return spanSize;
}
});
mRvView.setAdapter(mMultiPiggyAdapter);
}
}
BaseMultiItemQuickAdapter继承于BaseQuickAdapter，所以对于BaseMultiItemQuickAdapter的点击事件处理可以跟上面的BaseQuickAdapter一致，部分源码：
好啦，文章写完啦，非常感谢你能看到最后，如果能够帮助到你，是我的荣幸。
写到最后，感谢一下这个框架的作者，顺便附上传送门到他的GitHub：https://github.com/CymChad/BaseRecyclerViewAdapterHelper
还有如果想了解更多关于BaseRecyclerViewAdapterHelper的知识可以点这里：开源框架BaseRecyclerViewAdapterHelper使用——RecyclerView万能适配器