自定义LayoutManager仿探探切卡片效果

探探效果:
demo效果如下:
LayoutManager自定义

对于自定义LayoutManager我们主要处理好三件事情,就所有的问题就都迎刃而解了:

布局每个ItemView
处理滑动事件
缓存重用ItemView

LayoutManager自定义时常用函数介绍

这里定义RecyclerView里面每个item默认的LayoutParams

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

重写这个函数来布局RecyclerView当前需要显示的item,确定每个item的位置

@Override
public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
    super.onLayoutChildren(recycler, state);
    //TODO:来布局RecyclerView当前需要显示的item
}
处理滑动需要重写的函数:
//是否可以水平滑动
@Override
public boolean canScrollHorizontally() {
    return true;
}

//canScrollHorizontally返回true的基础上,RecyclerView有手指水平滑动的时候回调
//该函数 * 注意处理完之后要返回消费的距离
@Override
public int scrollHorizontallyBy(int dx, RecyclerView.Recycler recycler, RecyclerView.State state) {
    //TODO:滑动逻辑
    return dx;
}

//是否可以垂直滑动
@Override
public boolean canScrollVertically() {
    return true;
}

//canScrollVertically返回true的基础上,RecyclerView有手指垂直滑动的时候回调该函数 * 注意处理完之后要返回消费的距离
@Override
public int scrollVerticallyBy(int dy, RecyclerView.Recycler recycler, RecyclerView.State state) {
    //TODO:滑动逻辑
    return dy;
}
缓存重用ItemView
/* detach轻量回收View */
detachAndScrapAttachedViews(recycler);
detachAndScrapView(view, recycler);
/** * recycle真的回收一个View ,该View再次回来需要执行onBindViewHolder方法 */
removeAndRecycleView(View child, Recycler recycler)
removeAndRecycleAllViews(Recycler recycler);
/** * 超级轻量回收一个View,马上就要添加回来,和attachView()对应 */
detachView(view);
/** * 将detachView(view) detach的View attach回来 */
attachView(view);
/** * detachView 后 没有attachView的话 就要真的回收掉他们 */
recycler.recycleView(viewCache.valueAt(i));
步骤一:写一个普通recyclerView垂直列表。
步骤二:自定义LayoutManager,重写onLayoutChildren自行处理子view位置,根据position不同处理各自的大小和偏移。
public class SlideCardLayoutManager extends RecyclerView.LayoutManager {
    private final int MAX_CARD_COUNT = 4;
    private final float SCALE_RATIO = 0.08f;
    private final float TRANSITION_Y = 30f;

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

    //必须要重写,对item设置放置规则
    @Override
    public void onLayoutChildren(RecyclerView.Recycler recycler, RecyclerView.State state) {
        //直接使用父类的回收功能
        detachAndScrapAttachedViews(recycler);

        int itemCount = getItemCount();  //当前adapter中总共item数
        int bottomPosition;

        if (itemCount < MAX_CARD_COUNT) {
            bottomPosition = 0;
        } else {
            bottomPosition = itemCount - MAX_CARD_COUNT;
        }

        //遍历最下层position到最上层postion的view
        for (int i=bottomPosition;i<itemCount;i++) {
            //复用缓存view,底层就是使用了 tryGetViewHolderForPositionByDeadline
            View view = recycler.getViewForPosition(i);
            addView(view);  //将itemView添加到recyclerView中
            measureChildWithMargins(view, 0, 0);  //测量itemView

            //view在RecyclerView里面还剩余的宽度、高度空隙
            int viewWidth = getDecoratedMeasuredWidth(view);
            int viewHeight = getDecoratedMeasuredHeight(view);
            int widthSpace = getWidth() - viewWidth;
            int heightSpace = getHeight() - viewHeight;

            //布局itemView,把所有itemView放在屏幕正中
            layoutDecoratedWithMargins(view, widthSpace/2, heightSpace/2,
                    widthSpace/2+ viewWidth, heightSpace/2 + viewHeight);

            //从下到上定义level
            int level = itemCount - i - 1;

            if (level < MAX_CARD_COUNT) {
                //对itemView进行y方向平移
                view.setTranslationY(TRANSITION_Y*level);
                //对itemView进行放大
                view.setScaleX(1-SCALE_RATIO*level);
            } else {
                //如果是最底下一张,则效果与前一张一样,即不会展示出来
                view.setTranslationY(TRANSITION_Y*(level-1));
                view.setScaleX(1-SCALE_RATIO*(level-1));
            }
        }
    }
}

使用该layoutManager,就可以实现从小到大层叠放置卡片效果了,只是,这个时候没有拖动事件。

步骤三:自定义ItemTouchHelper,重写onChildDraw方法,在拖拽过程中遍历子view做放大效果。
public class SlideCardCallBack extends ItemTouchHelper.SimpleCallback {
    private RecyclerView.Adapter adapter;
    private ArrayList datas;
    private final float SCALE_RATIO = 0.08f;
    private final float TRANSITION_Y = 30f;
    /**
     *     构造方法设置可滑动方向,上下左右 0x1111,参数一:拖拽  参数er:滑动
     *     public static final int UP = 1;
     *     public static final int DOWN = 1 << 1;
     *     public static final int LEFT = 1 << 2;
     *     public static final int RIGHT = 1 << 3;
     */
    public SlideCardCallBack(RecyclerView.Adapter adapter, ArrayList datas) {
        super(0, 15); //15表示支持各个方向拖拽
        this.adapter = adapter;
        this.datas = datas;
    }

    @Override
    public boolean onMove(@NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, @NonNull RecyclerView.ViewHolder target) {
        return false;
    }

    //滑动动画结束后的操作
    @Override
    public void onSwiped(@NonNull RecyclerView.ViewHolder viewHolder, int direction) {
        //这里需要将最顶层滑出去的data移除,然后添加到最底层,保证切换能循环进行
        Object remove = datas.remove(viewHolder.getLayoutPosition());
        datas.add(0, remove);
        adapter.notifyDataSetChanged();
    }

    //绘制拖拽过程中方法的效果
    @Override
    public void onChildDraw(@NonNull Canvas c, @NonNull RecyclerView recyclerView, @NonNull RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) {

        //dx  dy分别表示当前拖拽view相对于原来横纵坐标偏移
        double distance = Math.sqrt(dX*dX+dY*dY);
        double maxDistance = recyclerView.getWidth() * 0.5f;
        double fraction = distance / maxDistance;  //偏移放大系数
        if (fraction > 1) {
            fraction = 1;  //放大系数最大为1
        }
        //遍历,为每个child执行动画
        int itemCount = recyclerView.getChildCount();
        for (int i=0;i<itemCount;i++) {
            //在动画渐变的过程中,最大达到它上面一个卡片的大小
            View view = recyclerView.getChildAt(i);
            int level = itemCount - i - 1;
            view.setTranslationY((float) (TRANSITION_Y*level-fraction*TRANSITION_Y));
            view.setScaleX((float) (1-SCALE_RATIO*level+ fraction*SCALE_RATIO));
        }

        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);
    }

    //设置滑动不生效回弹距离
    @Override
    public float getSwipeThreshold(@NonNull RecyclerView.ViewHolder viewHolder) {
        return 0.2f;
    }
}

给recyclerView设置ItemTouchHelper,设置拖拽事件,并在拖拽过程中,将每一个子view做放大处理。

MainActivity代码:
class MainActivity : AppCompatActivity() {
    private var recyclerView: RecyclerView?= null
    private var adapter: CardAdapter?= null
    private var datas = ArrayList<CardBean>()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        recyclerView = findViewById(R.id.recyclerview)
        adapter = CardAdapter(applicationContext)
        recyclerView?.layoutManager = SlideCardLayoutManager()
        recyclerView?.adapter = adapter

        initDatas()
    }

    private fun initDatas() {
        datas.add(CardBean(R.mipmap.wanghong1))
        datas.add(CardBean(R.mipmap.wanghong2))
        datas.add(CardBean(R.mipmap.wanghong3))
        datas.add(CardBean(R.mipmap.wanghong4))
        datas.add(CardBean(R.mipmap.wanghong5))
        datas.add(CardBean(R.mipmap.wanghong6))
        adapter?.setDatas(datas)

        ItemTouchHelper(SlideCardCallBack(adapter, datas)).attachToRecyclerView(recyclerView)
    }
}
Adapter代码:
class CardAdapter(val context: Context): RecyclerView.Adapter<CardAdapter.CardViewHolder>() {
    private var datas = ArrayList<CardBean>()

    fun setDatas(datas: ArrayList<CardBean>) {
        this.datas = datas
        notifyDataSetChanged()
    }

    class CardViewHolder(itemView: View) : ViewHolder(itemView) {
        var imageView:ImageView?= null

        init {
            imageView = itemView.findViewById(R.id.iv_cover)
        }
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): CardViewHolder {
        return CardViewHolder(LayoutInflater.from(context).inflate(R.layout.item, parent, false))
    }

    override fun onBindViewHolder(holder: CardViewHolder, position: Int) {
        holder.imageView?.setImageResource(datas[position].coverRes)
    }

    override fun getItemCount() = datas.size
}
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 202,056评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,842评论 2 378
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,938评论 0 335
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,296评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,292评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,413评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,824评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,493评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,686评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,502评论 2 318
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,553评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,281评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,820评论 3 305
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,873评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,109评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,699评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,257评论 2 341

推荐阅读更多精彩内容