使用 Kotlin 实现自定义 LayoutManager + ItemTouchHelper 实现炫酷卡片布局

作者 | laer_L

地址 | https://www.jianshu.com/p/4258694fba43

声明 | 本文是 laer_L 原创，已获授权发布，未经原作者允许请勿转载

前言

很久没有写博客了，最近看到了一个比较好的卡片效果，自己就使用Kotlin 来实现这个效果练练手

效果图、分析、步骤

分析

使用 RecyclerView 的自定义 LayoutManager+ItemTouchHelper实现效果

步骤

• 1、自定义LayoutManager，处理卡片的层叠显示效果

• 2、使用ItemTouchHelper实现任何方向的拖动效果，并在拖动回调中处理数据

实现

自定义 LayoutManager 只需要实现两个方法：generateDefaultLayoutParams() 和 onLayoutChildren(),代码中注释写的很清楚了，下面就直接上代码

• generateDefaultLayoutParams()的套路基本一样

override fun generateDefaultLayoutParams(): RecyclerView.LayoutParams {
        return RecyclerView.LayoutParams(RecyclerView.LayoutParams.WRAP_CONTENT, RecyclerView.LayoutParams.WRAP_CONTENT)
    }

• onLayoutChildren()

override fun onLayoutChildren(recycler: RecyclerView.Recycler?, state: RecyclerView.State?) {
        //将view放到RecyclerView的回收站中
        detachAndScrapAttachedViews(recycler)
        //设置开始遍历的position
        var initPosition: Int
        if (CardConfig.MAX_SHOW_COUNT > itemCount) {
            initPosition = 0
        } else {
            initPosition = itemCount - CardConfig.MAX_SHOW_COUNT
        }
        //循环遍历，摆放子view
        for (position in initPosition..itemCount - 1 ) {
            //获取到回收站中的view
            val view = recycler!!.getViewForPosition(position)
            //将view添加到RecyclerView中
            addView(view)
            //测量view
            measureChild(view, 0, 0)
            //摆放控件（布局装饰）
            var decorateWidth = getDecoratedMeasuredWidth(view)
            var decorateHeight = getDecoratedMeasuredHeight(view)
            var left=(width- decorateWidth)/2
            var top=(height- decorateHeight)/2
            layoutDecorated(view, left, top, left + decorateWidth, top + decorateHeight)
            //动画处理（移动，缩放）
            val level = itemCount - position - 1
            if (level > 0) {
                view.scaleX = 1f - CardConfig.SCALE_GAP * level
                view.scaleY = 1f - CardConfig.SCALE_GAP * level
                if (level < CardConfig.MAX_SHOW_COUNT-1) {
                    view.translationY = CardConfig.TRANS_Y_GAP * level.toFloat()
                }else{
                    view.translationY=CardConfig.TRANS_Y_GAP * (level - 1).toFloat()
                }
            }
        }
    }

• 走到这里不出意外就能运行出一下效果了

ItemTouchHelper.CallBack 的关键代码

• 滑动回调onSwiped()

override fun onSwiped(viewHolder: RecyclerView.ViewHolder?, direction: Int) {
        //交换item的位置，并刷新适配器
        val user = mDatas.removeAt(viewHolder!!.layoutPosition)
        mDatas.add(0,user)
        mAdapter.notifyItemMoved(viewHolder!!.layoutPosition,0)
    }

走到这里应该能看到以下效果

其实走到这里离成功就很近了，可以看出这里的动画效果比较生硬，所以下面再实现一个反向的动画即可




• 实现反向动画，动画绘制子view,onChildDraw()

override fun onChildDraw(c: Canvas?, recyclerView: RecyclerView?, viewHolder: RecyclerView.ViewHolder?, dX: Float, dY: Float, actionState: Int, isCurrentlyActive: Boolean) {
        //给一个反向的过渡动画
        //这里模拟生成一个0-1的值
        val maxDistance = recyclerView!!.width * 0.5f
        val distance = Math.sqrt(dX * dX + dY * dY.toDouble())
        var fraction:Double = distance / maxDistance.toDouble()
        if (fraction > 1) {
            fraction = 1.0
        }
        val itemCount = recyclerView.childCount
        for (i in 0..itemCount - 1) {
            val view = recyclerView.getChildAt(i)
            val level = itemCount - i - 1
            if (level >= 0) {
                if (level < CardConfig.MAX_SHOW_COUNT - 1) {
                    //当level是0到MAX_SHOW_COUNT-2
                    view.translationY = (CardConfig.TRANS_Y_GAP * level - fraction * CardConfig.TRANS_Y_GAP).toFloat()
                    view.scaleX = (1 - CardConfig.SCALE_GAP * level + fraction * CardConfig.SCALE_GAP).toFloat()
                    view.scaleY = (1 - CardConfig.SCALE_GAP * level + fraction * CardConfig.SCALE_GAP).toFloat()
                } else if (level == CardConfig.MAX_SHOW_COUNT - 1) {
                    // level是MAX_SHOW_COUNT-1
                    view.translationY = CardConfig.TRANS_Y_GAP * (level - 1).toFloat()
                    view.scaleX = 1 - CardConfig.SCALE_GAP * (level - 1).toFloat()
                    view.scaleY = 1 - CardConfig.SCALE_GAP * (level - 1).toFloat()
                }
            }
        }
        super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive)
    }

好了，基本完工了，具体代码移步github(喜欢就star一下哦):

SwipeCardLayoutManagerDemo

https://link.jianshu.com/?t=https://github.com/93Laer/SwipeCardLayoutManagerDemo

Kotlin 推送

1 "DeepNight-in-kotlin"一个纯看妹纸的 Kotlin 开源项目

2 Android Kotlin&BLE(低功耗蓝牙) 笔记