自己做的一个小东西上要用到一个滑动隐藏的功能,想着一直用着原生Android看着Message的归档挺舒服就尝试仿写了一下,感觉一些地方处理不是特别好,但目前也没有别的思路
这是最终的效果。内容并不多,简单记录一下。先是自己的实现,后是Android Message的效果
思路
很简单,直接用RecyclerView的ItemTouchHelper.Callback,限定左右滑动(当然你愿意的话可以加入上下拖动)。 之后就是观察原生的效果。总共是这么几点:
- 在拖动的过程中,view获得了z轴上的高度以此产生的阴影
- 在拖动的过程从伴随着view的圆角变化
- view存在背景
其中z轴上的高度可以通过改变translationZ或elevation的值来解决。view的圆角变化可以使用ViewOutlineProvider来裁剪。而view的背景目前我使用的方案是加一层背景。
实现
先看一下item的布局
······
这边item底层布局使用了FrameLayout并加入了colorPrimary作为item划开时候的颜色,而text_mark则是作为两侧划开时显示的图标,text_bg则是承载了所有内容物,以及遮盖FrameLayout的背景色。下来继承ItemTouchHelper.Callback重写onChildDraw方法。
首先是确定text_mark的位置
val fp = viewHolder.itemView.findViewById(R.id.text_mark).layoutParams as FrameLayout.LayoutParams
if (dX > 0) {
fp.gravity = Gravity.CENTER_VERTICAL or Gravity.LEFT
} else if (dX < 0) {
fp.gravity = Gravity.CENTER_VERTICAL or Gravity.RIGHT
}
viewHolder.itemView.findViewById(R.id.text_mark).layoutParams = fp
然后是添加平移效果以及滑动时的阴影
viewHolder.itemView.findViewById(R.id.text_bg).translationX = dX
viewHolder.itemView.findViewById(R.id.text_bg).translationZ = if (dX == 0f) 0f else 4f
viewHolder.itemView.translationZ = if (dX == 0f) 0f else 6f
其中有两个view的translationZ被修改了,因为text_bg获得了z轴高度时因为上下没有margin,所以并没有空间绘制阴影,如果给予margin的话又会出现无法遮挡背景颜色这一问题。所以给itemView同样的z轴高度,保证能够在上下也绘制阴影。这一处就是开头所说的自我感觉不太完美的地方,如果有更好的解决方法,望告知。
最后是计算圆角的大小并通过ViewOutlineProvider来裁剪
(abs(dX / viewHolder.itemView.width.toFloat()) * 2 * maxRadius).also {
viewHolder.itemView.findViewById(R.id.text_bg).outlineProvider = MyViewOutlineProvider(if (it > maxRadius) maxRadius else it)
viewHolder.itemView.findViewById(R.id.text_bg).clipToOutline = true
}
这里是MyViewOutlineProvider的实现
class MyViewOutlineProvider(private val radius: Float) : ViewOutlineProvider() {
override fun getOutline(view: View?, outline: Outline?) {
outline?.setRoundRect(0, 0, (view ?: return).width, view.height, radius)
}
}
最后的最后,不要忘记重写clearView方法清除之前设置的变化,以及重写onSwiped方法更新数据
override fun clearView(recyclerView: RecyclerView, viewHolder: RecyclerView.ViewHolder) {
super.clearView(recyclerView, viewHolder)
viewHolder.itemView.findViewById(R.id.text_bg).translationX = 0f
viewHolder.itemView.findViewById(R.id.text_bg).translationZ = 0f
viewHolder.itemView.translationZ = 0f
viewHolder.itemView.findViewById(R.id.text_bg).clipToOutline = false
}
总结
这次整体的实现并不复杂,代码量并不多,看完也差不多能自己写一个。如果大家有更好的实现方案,欢迎留言交流。