使用Kotlin實(shí)現(xiàn)自定義LayoutManager+ItemTouchHelper實(shí)現(xiàn)炫酷卡片布局
很久沒有寫博客了，最近看到了一個(gè)比較好的卡片效果泻骤，自己就使用Kotlin來實(shí)現(xiàn)這個(gè)效果練練手
-
效果如下：
卡片效果 - 分析：使用RecyclerView的自定義LayoutManager+ItemTouchHelper實(shí)現(xiàn)效果
- 步驟：
- 1、自定義LayoutManager珊肃，處理卡片的層疊顯示效果
- 2纽什、使用ItemTouchHelper實(shí)現(xiàn)任何方向的拖動(dòng)效果，并在拖動(dòng)回調(diào)中處理數(shù)據(jù)
自定義LayoutManager只需要實(shí)現(xiàn)兩個(gè)方法：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)
//設(shè)置開始遍歷的position
var initPosition: Int
if (CardConfig.MAX_SHOW_COUNT > itemCount) {
initPosition = 0
} else {
initPosition = itemCount - CardConfig.MAX_SHOW_COUNT
}
//循環(huán)遍歷谤辜，擺放子view
for (position in initPosition..itemCount - 1 ) {
//獲取到回收站中的view
val view = recycler!!.getViewForPosition(position)
//將view添加到RecyclerView中
addView(view)
//測(cè)量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)
//動(dòng)畫處理（移動(dòng)，縮放）
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()
}
}
}
}
- 走到這里不出意外就能運(yùn)行出一下效果了
卡片界面
ItemTouchHelper.CallBack的關(guān)鍵代碼 - 滑動(dòng)回調(diào)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)
}
走到這里應(yīng)該能看到以下效果
卡片動(dòng)效
其實(shí)走到這里離成功就很近了丑念，可以看出這里的動(dòng)畫效果比較生硬，所以下面再實(shí)現(xiàn)一個(gè)反向的動(dòng)畫即可
- 實(shí)現(xiàn)反向動(dòng)畫结蟋，動(dòng)畫繪制子view,onChildDraw()
override fun onChildDraw(c: Canvas?, recyclerView: RecyclerView?, viewHolder: RecyclerView.ViewHolder?, dX: Float, dY: Float, actionState: Int, isCurrentlyActive: Boolean) {
//給一個(gè)反向的過渡動(dòng)畫
//這里模擬生成一個(gè)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) {
//當(dāng)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
