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

  1. 云栖社区>
  2. 安卓巴士Android开发者门户>
  3. 博客>
  4. 正文

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

技术小能手 2018-11-15 14:47:13 浏览716
展开阅读全文

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

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

效果如下:

0566d7ef834b8526e2fd38bb92c8370042a82234

卡片效果

分析:
使用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()
}
}
}
}

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

9782e13e9f6ee7f31a839d107da35f93452c68f7

卡片界面

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)
}
aad22c60095bc41d8e7fc4e0886949e087be76c5
卡片动效

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

 ●  实现反向动画,动画绘制子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开发者门户”。

网友评论

登录后评论
0/500
评论
技术小能手
+ 关注