快速使用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>为框架提供的最基本的类型，所有子类都需要继承于此。其中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万能适配器