仿Android Message侧滑归档效果的简单实现

自己做的一个小东西上要用到一个滑动隐藏的功能,想着一直用着原生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
}

总结

  这次整体的实现并不复杂,代码量并不多,看完也差不多能自己写一个。如果大家有更好的实现方案,欢迎留言交流。

你可能感兴趣的:(仿Android Message侧滑归档效果的简单实现)