Android层叠式卡片效果实现！（高大上）

最新推荐文章于 2025-07-12 17:35:50 发布

原创

最新推荐文章于 2025-07-12 17:35:50 发布 · 置顶 · 3w 阅读

40 ·

CC 4.0 BY-SA版权

本文介绍如何在Android中实现层叠式的卡片效果。通过使用RecyclerView和自定义的LayoutManager，结合ItemTouchHelper实现拖动和层叠效果。详细讲解了SwipeCardBean实体类、适配器的创建，以及关键的onSwiped方法和onChildDraw方法中的动画设置，最后展示了运行效果和GitHub源码链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，上班闲来无聊，撸发代码。实现Android层叠卡片效果如下图！

1.我们可以随意方向的拖动这个卡片。
2.我们可以将卡片放在一起显示且有层叠式效果。
3.我们可以将最上层的卡片移除，当移除最底层之后又继续循环开始。
4.我们拖缀图片时候下面图片有起伏动画效果。

这里写图片描述

二，分析如何实现：

   1.很多人会想到viewPager+setPageTransformer+属性动画
   2.也有人会想到手势。
   3.自定义控件+viewGroup+拖动事件。
   有没有更简单的呢？
   很多人估计都用过RecylerView吧！
   RecylerView里面就有滑动删除效果+ItemTouchHelper不知道
   的同学们可以查查资料哦！[TtemTouchHelper](http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0630/3123.html)

三，准备工作：
(1.)首先我们完成并显示一个RecylerView列表：代码如下*
新建一个SwipeCardBean实体类对象来储存信息：

SwipeCardBean.java

public class SwipeCardBean {
    public String title;
    public int resoutimage;

}

(2)写一个适配器用来显示列表信息(相信这个都会把。不会来那就看看别人写的自己动手练习几个，这里的recylerview_item.xml我就不写了吧！)：

UniversalAdapter.java

package com.example.ls.dn_swipecard.adapter;
import android.content.Context;
import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.ls.dn_swipecard.R;
import com.example.ls.dn_swipecard.SwipeCardBean;

import java.util.ArrayList;

/**
 * Created by 路很长~ on 2017/7/3.
 */

public class UniversalAdapter extends RecyclerView.Adapter<UniversalAdapter.UniversalViewHolder> {
   
   
    public ArrayList<SwipeCardBean> mData;
    public Context context;

    public UniversalAdapter(ArrayList<SwipeCardBean> mData, Context context) {
        this.mData = mData;
        this.context = context;
    }

    @Override
    public UniversalViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
        View view = LayoutInflater.from(context).inflate(R.layout.recylerview_item, null);
        UniversalViewHolder holder = new UniversalViewHolder(view);
        return holder;
    }

    @Override
    public void onBindViewHolder(UniversalViewHolder holder, int position) {
        UniversalViewHolder holder1=holder;
        holder1.recy_item_im.setBackgroundResource(mData.get(position).resoutimage);
        holder1.recy_item_tv.setText(mData.get(position).title);
    }

    @Override
    public int getItemCount() {
        return mData == null ? 0 : mData.size();
    }

    public class UniversalViewHolder extends RecyclerView.ViewHolder {
   
   
        public TextView recy_item_tv;
        public ImageView recy_item_im;

        public UniversalViewHolder(View itemView) {