使用Kotlin实现实现炫酷卡片布局

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

很久没有写博客了，最近看到了一个比较好的卡片效果，自己就使用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:
https://github.com/93Laer/SwipeCardLayoutManagerDemo

原文发布时间为：2018-11-15

本文作者：laer_L

本文来自云栖社区合作伙伴“安卓巴士Android开发者门户”，了解相关信息可以关注“ 安卓巴士Android开发者门户”。