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

2019-08-15 本文已影响0人三月三儿三

自己做的一个小东西上要用到一个滑动隐藏的功能，想着一直用着原生Android看着Message的归档挺舒服就尝试仿写了一下，感觉一些地方处理不是特别好，但目前也没有别的思路

　　这是最终的效果。内容并不多，简单记录一下。先是自己的实现，后是Android Message的效果

示例图

思路

　　很简单，直接用RecyclerView的ItemTouchHelper.Callback，限定左右滑动(当然你愿意的话可以加入上下拖动)。之后就是观察原生的效果。总共是这么几点：

在拖动的过程中，view获得了z轴上的高度以此产生的阴影
在拖动的过程从伴随着view的圆角变化
view存在背景

　　其中z轴上的高度可以通过改变translationZ或elevation的值来解决。view的圆角变化可以使用ViewOutlineProvider来裁剪。而view的背景目前我使用的方案是加一层背景。

实现

　　先看一下item的布局

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/colorPrimary">

    <ImageView
        android:id="@+id/text_mark"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:layout_marginLeft="16dp"
        android:layout_marginRight="16dp"
        android:src="@drawable/ic_visibility_off_black_24dp" />

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/text_bg"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#ffffff"
        android:gravity="center_vertical"
        android:padding="16dp">
        ······
    </androidx.constraintlayout.widget.ConstraintLayout>
</FrameLayout>

　　这边item底层布局使用了FrameLayout并加入了colorPrimary作为item划开时候的颜色，而text_mark则是作为两侧划开时显示的图标，text_bg则是承载了所有内容物，以及遮盖FrameLayout的背景色。下来继承ItemTouchHelper.Callback重写onChildDraw方法。
　　首先是确定text_mark的位置

val fp = viewHolder.itemView.findViewById<ImageView>(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<ImageView>(R.id.text_mark).layoutParams = fp

　　然后是添加平移效果以及滑动时的阴影

viewHolder.itemView.findViewById<ConstraintLayout>(R.id.text_bg).translationX = dX
viewHolder.itemView.findViewById<ConstraintLayout>(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<ConstraintLayout>(R.id.text_bg).outlineProvider = MyViewOutlineProvider(if (it > maxRadius) maxRadius else it)
    viewHolder.itemView.findViewById<ConstraintLayout>(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<ConstraintLayout>(R.id.text_bg).translationX = 0f
    viewHolder.itemView.findViewById<ConstraintLayout>(R.id.text_bg).translationZ = 0f
    viewHolder.itemView.translationZ = 0f
    viewHolder.itemView.findViewById<ConstraintLayout>(R.id.text_bg).clipToOutline = false
}

总结

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

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

思路

实现

总结

猜你喜欢

热点阅读