阅读 963

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 void onClick(View v) {
                // ···
            }
        });
    }
}
复制代码

完整代码见CardRecycleAdapter.java

卡片布局实现

思路分析

图解

仔细观察最终效果图,注意到每层Item View的重叠排列。从顶层往下,View会逐渐往下偏移露出底部一部分视图,并且会适当缩小一定比例,从视觉上看起来位于后方。当数据过多时,不会全部摆放到RecyclerView中,限制最多展示View个数。

初始配置

定义一个配置类:

public static class CardConfig {
    public static int CARD_SHOW_COUNT;    //最多同时显示个数
    public static float SCALE_GAP;  //缩放比例
    public static int TRANS_Y_GAP;  //偏移量

    public static void init(Context context) {
        CARD_SHOW_COUNT = 4;
        SCALE_GAP = 0.05f;
        TRANS_Y_GAP = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 15, context.getResources().getDisplayMetrics());
    }
}
复制代码
  • CARD_SHOW_COUNT:就是在RecyclerView中摆放View的数量上限
  • SCALE_GAP:每层View间的缩放比例
  • TRANS_Y_GAP:每层View间的垂直偏移量

自定义LayoutManager

关键步骤,继承LayoutManager,实现onLayoutChildren方法:

public class CardSwipeLayoutManager extends RecyclerView.LayoutManager {

    @Override
    public RecyclerView.LayoutParams generateDefaultLayoutParams() {
        return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
    }

    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        super.onLayoutChildren(recycler, state);
        //解除所有子view,添加到scrap集合缓存
        detachAndScrapAttachedViews(recycler);
        // 取数据个数和CARD_SHOW_COUNT的较小值
        int count = Math.min(getItemCount(), CardConfig.CARD_SHOW_COUNT);
        if(count < 1) {
            return;
        }
        //遍历前count个itemView加载显示
        for (int i=0; i<count; i++) {
            // 获取缓存的View
            View child = recycler.getViewForPosition(i);
            //添加至头部,显示在底层
            addView(child, 0);
            //测量child的大小
            measureChildWithMargins(child, 0, 0);
            //获取child外边距=(recyclerview的宽度-child包含了decorate间距的总宽度) / 2
            int widthSpace = (getWidth()-getDecoratedMeasuredWidth(child)) / 2;
            int heightSpace = (getHeight()-getDecoratedMeasuredHeight(child)) / 2;
            //摆放child的位置(居中摆放)
            layoutDecorated(child, widthSpace, heightSpace,
                    widthSpace+getDecoratedMeasuredWidth(child),
                    heightSpace+getDecoratedMeasuredHeight(child));

            //设置Y轴偏移和长宽缩放,层叠错开显示
            int fraction = i;
            if(fraction == count-1) {
                //最后一个和倒数第二个的fraction一致
                fraction = count - 2;
            }
            // 设置View的Y轴偏移和缩放
            child.setTranslationY(CardConfig.TRANS_Y_GAP * fraction);
            child.setScaleX(1 - CardConfig.SCALE_GAP*fraction);
            child.setScaleY(1 - CardConfig.SCALE_GAP*fraction);
        }
    }
}
复制代码

核心步骤就是依次取child,先测量child,再将child居中摆放,最后计算它的偏移和缩放。

其中注意几个细节,在布局前首先调用detachAndScrapAttachedViews将mChildren数组中View移除,并将View交由Recycler进行缓存。之后再依次从Recycler获取View,按FILO顺序加入mChildren数组,即后添加的View插入数组头部,使先遍历的View能显示在上层

最后一个View和倒数第二个View的偏移和缩放比例是一致的,即最后一个刚好被倒二个完整覆盖,这样是为了在拖拽时视觉效果更连贯

完整代码见CardSwipeLayoutManager.java

手势滑动移除实现

思路分析

通过ItemTouchHelper绑定RecyclerView,可以托管RecyclerView的手势事件,创建ItemTouchHelper.Callback可以处理自定义滑动、拖拽相关业务逻辑。

移除View逻辑可以在ItemTouchHelper.Callback#onSwiped中处理,当滑动达到临界值时会触发onSwiped回调。

当拖拽时,底层的View也会相应的偏移和缩放,以填充上层View的位置。可以在ItemTouchHelper.Callback#onChildDraw中处理相应逻辑。

自定义ItemTouchHelper.SimpleCallback

  1. 首先设置滑动方向
public class CardSwipeCallback extends ItemTouchHelper.SimpleCallback {

    private Context context;
    private CardRecycleAdapter adapter;

    public CardSwipeCallback(Context context, CardRecycleAdapter adapter) {
        // 设置支持的手势类型和方向
        super(0, ItemTouchHelper.LEFT|ItemTouchHelper.UP|ItemTouchHelper.RIGHT|ItemTouchHelper.DOWN);
        this.context = context;
        this.adapter = adapter;
    }

    @Override
    public boolean onMove(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, RecyclerView.ViewHolder target) {
        // 不进行item交换操作
        return false;
    }
    
    // ···
}
复制代码

在构造函数中,设置了不支持Drag拖拽类型操作,Swipe滑动操作支持上下左右四个方向

  1. 处理移出操作
public class CardSwipeCallback extends ItemTouchHelper.SimpleCallback {
    // ···

    @Override
    public void onSwiped(RecyclerView.ViewHolder viewHolder, int direction) {
        // 判断方向
        if(direction==ItemTouchHelper.LEFT) {
            Toast.makeText(context, "不喜欢", Toast.LENGTH_SHORT).show();
        } else {
            Toast.makeText(context, "喜欢", Toast.LENGTH_SHORT).show();
        }

        // 移除滑出的item并添加到尾部
        CardBean item = adapter.getmData().remove(viewHolder.getLayoutPosition());
        adapter.getmData().add(item);
        adapter.notifyDataSetChanged();
    }
    
    // ···
}
复制代码

在onSwiped中,首先判断移出方向,弹对应toast。接着从适配器数据集中移除对应item,再重新添加到数据集尾部,实现循环效果。

  1. 处理下层View动画
public class CardSwipeCallback extends ItemTouchHelper.SimpleCallback {
    // ···

    @Override
    public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
        // 设置滑动临界值,用于计算偏移和缩放差值,避免无限偏移缩放
        double maxDistance = recyclerView.getWidth() / 2;
        // 当前滑动距离(勾股定理)
        double distance = Math.sqrt(dX*dX + dX*dX);
        // 计算偏移缩放比例
        double ratio = distance / maxDistance;
        if(ratio > 1) {
            // 限制不超过1
            ratio = 1;
        }

        // 获取当前recyclerview显示item的个数,遍历计算偏移和缩放
        int count = recyclerView.getChildCount();
        for (int i=0; i<count; i++) {
            View child = recyclerView.getChildAt(i);
            // 越前面越底层
            int level = count - i - 1;
            // 判断非最底层的view才需要改变
            if(level != count-1) {
                // 以原来的位置加上偏移量和缩放比
                child.setTranslationY((float) (CardConfig.TRANS_Y_GAP * (level-ratio)));
                child.setScaleX((float) (1 - CardConfig.SCALE_GAP * level + CardConfig.SCALE_GAP*ratio));
                child.setScaleY((float) (1 - CardConfig.SCALE_GAP * level + CardConfig.SCALE_GAP*ratio));
            }
        }
    }
}
复制代码

在onChildDraw方法中,首先利用滑动距离计算一个差值比例,在遍历child,依次计算child的偏移和缩放,达到上下移动和放大缩小的效果。

关于计算偏移和缩放比例说明: 在前面自定义LayoutManager#onLayoutChildren中,以原child索引值作为fraction计算偏移和缩放,偏移量和缩放比例依次递增,之后child都是插入mChildren数组头部。因此在此处自定义SimpleCallback#onChildDraw中遍历child时,先取到的child是最底层的,这里通过倒序求出原fraction,计算原偏移和缩放,再加上滑动差值比例计算的偏移和缩放,进行在原基础上的位移和放大缩小。

完整代码见CardSwipeCallback.java

点击按钮卡片飞出动画实现

思路分析

给item布局中的对应按钮增加点击事件监听,移除对应数据并触发适配器更新。动画效果通过自定义ItemAnimator(这里只需要自定义Remove动画),之后通过RecyclerView#setItemAnimator应用ItemAnimator。

按钮点击监听

public class CardRecycleAdapter extends BaseRecyclerAdapter<CardBean> {

    // ···

    @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) {
                Toast.makeText(mContext, "不喜欢", Toast.LENGTH_SHORT).show();
                // 给itemView设置tag,标记当前触发往左边滑出的动画
                holder.itemView.setTag(SwipeItemAnimator.SWIPE_REMOVE_LEFT);
                // 移除数据,并触发notifyItemRemoved
                remove(item);
                // 将数据添加回数据集,以便循环演示
                mData.add(item);
            }
        });

        holder.getView(R.id.btnLike).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, "喜欢", Toast.LENGTH_SHORT).show();
                // 给itemView设置tag,标记当前触发往右边滑出的动画
                holder.itemView.setTag(SwipeItemAnimator.SWIPE_REMOVE_RIGHT);
                remove(item);
                mData.add(item);
            }
        });
    }
}
复制代码

这里给两个按钮设置了点击监听,其中分别会给itemView设置tag来标记不同方向的滑出。 完整代码见CardRecycleAdapter.java

自定义SimpleItemAnimator

RecyclerView中默认有一个DefaultItemAnimator,实现了Add、Remove、Move、Change操作的动画。如果不是为了区分不同方向的移出动画(点击"不喜欢"按钮往左滑出、点击"喜欢"按钮往右滑出),使用默认动画即可。这里直接拷贝DefaultItemAnimator源码,仅修改其中Remove动画的实现。

public class SwipeItemAnimator extends SimpleItemAnimator {

    public static final int SWIPE_REMOVE_LEFT = 1;  // 标记左滑移除
    public static final int SWIPE_REMOVE_RIGHT = 2; // 标记右滑移除
    
    // ···
    
    private void animateRemoveImpl(final RecyclerView.ViewHolder holder) {
        final View view = holder.itemView;
        final ViewPropertyAnimatorCompat animation = ViewCompat.animate(view);
        mRemoveAnimations.add(holder);
        //设置偏移量---向左还是向右
        float translateX = 0;
        // 判断点击时给view设置的tag,判断滑出方向
        if((int)view.getTag() == SWIPE_REMOVE_LEFT) {
            translateX = -view.getWidth();
        } else if((int)view.getTag() == SWIPE_REMOVE_RIGHT) {
            translateX = view.getWidth();
        }
        animation.setDuration(getRemoveDuration())
                .translationX(translateX)
                .alpha(0).setListener(new VpaListenerAdapter() {
            @Override
            public void onAnimationStart(View view) {
                dispatchRemoveStarting(holder);
            }

            @Override
            public void onAnimationEnd(View view) {
                animation.setListener(null);
                //动画结束还原位置
                ViewCompat.setTranslationX(view, 0);
                ViewCompat.setAlpha(view, 1);
                dispatchRemoveFinished(holder);
                mRemoveAnimations.remove(holder);
                dispatchFinishedWhenDone();
            }
        }).start();
    }
    
    // ···
}
复制代码

完整代码见SwipeItemAnimator.java

尾声

至此,完成了开头效果中的卡片式滑动布局。

完整代码见CardSwipeDemo