AndroidX RecyclerView实践-手写卡片式布局

前言

RecyclerView系列总结：
《AndroidX RecyclerView总结-测量布局》
《AndroidX RecyclerView总结-Recycler》
《AndroidX RecyclerView总结-滑动处理》
《AndroidX RecyclerView总结-ItemTouchHelper》

RecyclerView除了可以展示线性、网格、瀑布流等常规列表布局，还支持自定义个性化的布局。这里实现卡片式滑动布局，效果如图：

功能拆解

最终实现效果是一个层叠卡片式布局，支持滑动拖拽移除，并且将移除的item再添加回数据集以便循环演示。点击对应按钮触发对应方向的自动滑出动画。当往左滑出的时候弹出"不喜欢"吐司，往右边滑出弹出"喜欢"吐司。

• 首先实现卡片布局，很容易想到可以通过自定义LayoutManager来完成，重写onLayoutChildren中实现个性化布局逻辑。
• 手势滑动移除，可以借助ItemTouchHelper实现。
• 卡片飞出的动画效果，通过自定义SimpleItemAnimator，设置ItemAnimator。

代码实现

准备工作

添加依赖

implementation 'androidx.constraintlayout:constraintlayout:1.1.3'
implementation 'com.google.android.material:material:1.1.0'
implementation 'androidx.cardview:cardview:1.0.0'
implementation 'androidx.appcompat:appcompat:1.1.0'

MOCK数据

使用本地图片资源。

List<CardBean> data = new ArrayList<>();
data.add(new CardBean(R.mipmap.tu15));
data.add(new CardBean(R.mipmap.tu16));
data.add(new CardBean(R.mipmap.tu17));
data.add(new CardBean(R.mipmap.xiaotu_50));
data.add(new CardBean(R.mipmap.xiaotu_51));
data.add(new CardBean(R.mipmap.xiaotu_122));
data.add(new CardBean(R.mipmap.xiaotu_131));
data.add(new CardBean(R.mipmap.xiaotu_134));
CardRecycleAdapter adapter = new CardRecycleAdapter(this, data);
cardLayout.setAdapter(adapter);

public class CardBean {
   
    // 图片资源ID
    public int cover;

    public CardBean(int cover) {
   
        this.cover = cover;
    }
}

创建适配器

public class CardRecycleAdapter extends BaseRecyclerAdapter<CardBean> {
   

    public CardRecycleAdapter(Context context, List<CardBean> data) {
   
        super(context, data);
        putItemLayoutId(VIEW_TYPE_DEFAULT, R.layout.item_card);
    }

    @Override
    public void onBind(final ViewHolder holder, final CardBean item, final int position) {
   
        // 设置图片
        holder.setImageResource(R.id.ivCover, item.cover);

        holder.getView(R.id.btnDelete).setOnClickListener(new View.OnClickListener() {
   
            @Override
            public void onClick(View v) {
   
                // ···
            }
        });

        holder.getView(R.id.btnLike).setOnClickListener(new View.OnClickListener() {
   
            @Override
            public