快速使用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一致，部分源码：
快速使用Android BaseRecyclerViewAdapterHelper之实现一种&多种布局的RecycleView_第3张图片好啦，文章写完啦，非常感谢你能看到最后，如果能够帮助到你，是我的荣幸。
写到最后，感谢一下这个框架的作者，顺便附上传送门到他的GitHub：https://github.com/CymChad/BaseRecyclerViewAdapterHelper

还有如果想了解更多关于BaseRecyclerViewAdapterHelper的知识可以点这里：开源框架BaseRecyclerViewAdapterHelper使用——RecyclerView万能适配器

BaseRecyclerViewAdapterHelper

导入

Adapter 的最基本使用

更多相关文章

随机推荐