前言
上一篇文章自定义了一个左滑删除的RecyclerView，把view事件分发三个函数dispatchTouchEvent、onInterceptTouchEvent、onTouchEvent实际运用了一下，一些原理通过出现的bug还是挺能加深印象，并且后面还在优化上用上了TouchSlop、VelocityTracker以及GestureDetector，但是真不配那个一个控件搞定安卓自定义view，所以我把上篇博客标题改了，并且希望在接下来的时间里，通过几个自定义view较全面的去学习自定义view的相关知识，话不多说，下面开始！
ps. 2023.0621 修改
下面关于滑动出界问题的问题需要配合requestDisallowInterceptTouchEvent一起使用，而不是取巧。
ps. 2023.06.28 修改
这个控件和外部RecyclerView的滑动冲突未处理，内部拦截法实践了下！
需求
上篇文章通过RecyclerView去实现了一个左滑的效果，后面突发奇想，既然能通过列表去实现item的左滑，那能不能通过item自己去实现左滑呢？这样我们把item内容写在自定义的layout里面就可以实现左滑了，听起来挺方便，于是就动手做了，少说多做总还是好的。
有了第一篇的内容，item的左滑还是简单多了，主要就是让item跟随滑动，右边自动添加一个删除按钮就够了吧，开始我是这么想的，并总结了三点核心思想：
- 一个容器，左右两部分，左边外部导入，右边删除框自动增加
- 在 View 右边追加一个删除框 ，需要在 View 内拦截事件，根据 x 轴滑动距离滑动
- 在 ConstraintLayout 内部添加一个删除框，左边对其 parent 右边
这里取巧了一下，继承的 ConstraintLayout，这样让添加的删除框对齐 ConstraintLayout的右边就行了。
运行效果
编写代码
代码不多，就直接上代码了，注释写的很详细，后面再提下出现的主要问题：
import android.annotation.SuppressLint
import android.content.Context
import android.graphics.Color
import android.os.Build
import android.util.AttributeSet
import android.util.TypedValue
import android.view.Gravity
import android.view.MotionEvent
import android.view.View
import android.widget.Scroller
import android.widget.TextView
import androidx.annotation.RequiresApi
import androidx.constraintlayout.widget.ConstraintLayout
import kotlin.math.abs
/**
* 左划删除控件
* 能在控件实现左滑吗？如何传入自定义的布局？
* 思路：
* 1、一个容器，左右两部分，左边外部导入，右边删除框 x 增加层级
* 2、在 View 右边追加一个删除款 x 需要在 View 内拦截事件
* 3、在 ConstraintLayout 内部添加一个删除框，左边对其 parent 右边
*
* @author silence
* @date 2022-09-27
*/
class LeftDeleteItemLayout : ConstraintLayout {
private val mDeleteView: View?
var mDeleteClickListener: OnClickListener? = null
set(value) {
field = value
mDeleteView?.setOnClickListener(value)
}
//流畅滑动
private var mScroller = Scroller(context)
//上次事件的横坐标
private var mLastX = -1f
private var mLastY = 0f
// 滑动模式，左滑模式(-1)，初始化(0)，上下模式(1)
private var mScrollMode = 0
//控制控件结束的runnable
// private val stopMoveRunnable: Runnable = Runnable { stopMove() }
constructor(context: Context) : this(context, null, 0)
constructor(context: Context, attrs: AttributeSet?) : this(context, attrs, 0)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int) :
super(context, attrs, defStyleAttr)
@RequiresApi(Build.VERSION_CODES.LOLLIPOP)
constructor(context: Context, attrs: AttributeSet?, defStyleAttr: Int, defStyleRes: Int) :
super(context, attrs, defStyleAttr, defStyleRes)
init {
//kotlin的初始化函数
mDeleteView = makeDeleteView(context)
addView(mDeleteView)
}
//创建删除框，设置好位置对齐自身最右边
private fun makeDeleteView(context: Context): View {
val deleteView = TextView(context)
//给当前控件一个id，用于删除控件约束
this.id = generateViewId()
//设置布局参数
deleteView.layoutParams = LayoutParams(
dp2px(context, 100f), 0
).apply {
//设置约束条件
leftToRight = id
topToTop = id
bottomToBottom = id
}
//设置其他参数
deleteView.text = "删除"
deleteView.gravity = Gravity.CENTER
deleteView.setTextColor(Color.WHITE)
deleteView.textSize = sp2px(context,13f).toFloat()
deleteView.setBackgroundColor(Color.RED)
//设置点击回调
deleteView.setOnClickListener(mDeleteClickListener)
return deleteView
}
//拦截事件
override fun onInterceptTouchEvent(event: MotionEvent): Boolean {
when(event.action) {
//down事件记录x，不拦截，当move的时候才会用到
MotionEvent.ACTION_DOWN -> {
mLastX = event.x
// 对滑动冲突处理
mLastY = event.y
mScrollMode = 0
}
//拦截本控件内的移动事件
// 不能拦截，拦截会导致子控件onClick无法生效，onClick需要在ACTION_UP时触发
// MotionEvent.ACTION_MOVE -> return true
}
return super.onInterceptTouchEvent(event)
}
//处理事件
@SuppressLint("ClickableViewAccessibility")
override fun onTouchEvent(event: MotionEvent): Boolean {
when(event.action) {
MotionEvent.ACTION_DOWN -> {
// 防止滑出view范围收不到ACTION_MOVE事件
parent.requestDisallowInterceptTouchEvent(true)
return true
}
MotionEvent.ACTION_MOVE -> {
if (mScrollMode == 0) {
val deltaX = abs(event.x - mLastX)
val deltaY = abs(event.y - mLastY)
// 异常情况忽略了
if (deltaX == deltaY && deltaX == 0f) return super.onTouchEvent(event)
// 判断模式，进入左滑状态(-1)，上下滑动(1)
mScrollMode = if (deltaX > deltaY) -1 else 1
}
// 左滑模式下交给当前控件处理
if (mScrollMode < 0) {
moveItem(event)
return true
}else {
// 这里不处理滑动事件，交个父控件(即RecyclerView)去处理
parent.requestDisallowInterceptTouchEvent(false)
return false
}
}
MotionEvent.ACTION_UP -> stopMove()
}
return super.onTouchEvent(event)
}
private fun moveItem(e: MotionEvent) {
Log.e("TAG", "moveItem: mLastX=$mLastX")
//如果没有收到down事件，不应该移动
if (mLastX == -1f) return
val dx = mLastX - e.x
//更新点击的横坐标
mLastX = e.x
//检查mItem移动后应该在[-deleteLength, 0]内
val deleteWidth = mDeleteView!!.width
if ((scrollX + dx) <= deleteWidth && (scrollX + dx) >= 0) {
//触发移动
scrollBy(dx.toInt(), 0)
}
// 菜的扣脚，ACTION_DOWN会接管整个事件序列，需要配合requestDisallowInterceptTouchEvent
//如果一段时间没有移动时间，mLastX还没被stopMove重置为-1，那就是移动到其他地方了
//设置200毫秒没有新事件就触发stopMove
// removeCallbacks(stopMoveRunnable)
// postDelayed(stopMoveRunnable, 200)
}
private fun stopMove() {
//如果移动过半了，应该判定左滑成功
val deleteWidth = mDeleteView!!.width
if (abs(scrollX) >= deleteWidth / 2f) {
//触发移动至完全展开
mScroller.startScroll(scrollX, 0, deleteWidth - scrollX, 0)
}else {
//如果移动没过半应该恢复状态，则恢复到原来状态
mScroller.startScroll(scrollX, 0, - scrollX, 0)
}
invalidate()
//清除状态
mLastX = -1f
}
//流畅地滑动
override fun computeScroll() {
if (mScroller.computeScrollOffset()) {
scrollTo(mScroller.currX, mScroller.currY)
postInvalidate()
}
}
//单位转换
@Suppress("SameParameterValue")
private fun dp2px(context: Context, dpVal: Float): Int {
return TypedValue.applyDimension(
TypedValue.COMPLEX_UNIT_DIP, dpVal, context.resources
.displayMetrics
).toInt()
}
@Suppress("SameParameterValue")
private fun sp2px(context: Context, spVal: Float): Int {
val fontScale = context.resources.displayMetrics.scaledDensity
return (spVal * fontScale + 0.5f).toInt()
}
}
主要问题
动态生成TextView
这个主要就是通过代码生成一个TextView，不是很难，提一下。
将TextView对齐到当前容器右端
这里利用ConstraintLayout取巧做的还是不错的，因为如果要自己去实现一个在屏幕外的对齐，至少要在onMeasure中获得宽度，再去onLayout里面摆放到右侧屏幕外。
这里也有一些问题，首先是设置动态生成的TextView参数，然后是设置ConstraintLayout内的约束条件，因为约束标记必须要用到id，还得为当前控件生成一个id，最后就是做一个回调接口了。
滑动出界问题
还有一个没有预料到的问题是当滑动超过当前view的范围时，ACTION_MOVE和ACTION_UP都无法接收到，这就没法知道移动是否结束了。这里因为我们的自定义view是一个viewgroup，所以没法消耗ACTION_DOWN事件，所以后续的事件序列并不会交到当前的item上，这就麻烦了，所以这个需求本质上就是不合理的，但是还是要解决问题吧！
这里我通过View类的postDelayed，延迟运行一个runnable去停止滑动，当每次滑动的时候又去停止这个runnable。整个逻辑运行起来就是，滑动没有出界，移动的时候先移除延迟的停止逻辑，再发送延迟的停止逻辑，直到ACTION_UP触发停止，若滑动出界了，没有去移除延迟的停止逻辑，就会在一端时间后自动触发停止。
有点绕，但是还是挺简单的，里面的原理也简单讲一下。实际上View的postDelayed会通过主线程的handler去延迟执行，如果有了解handler机制，可以知道handler并不仅仅可以发送message，同样也可以发送runnable，类似移除message，同样也可以移除runnable。
override fun onTouchEvent(event: MotionEvent): Boolean {
// ...
// 这里只需要在onTouchEvent的ACTION_DOWN 中申请父控件不拦截就行了
MotionEvent.ACTION_DOWN -> {
// 防止滑出view范围收不到ACTION_MOVE事件
requestDisallowInterceptTouchEvent(true)
return true
}
}
之前一直很迷惑为什么这里收不到ACTION_MOVE事件，还用巧妙地办法去stopMove，真的就是学的不够，太菜了。这里申请下父控件不拦截就行了，只要想到一旦view拦截了ACTION_DOWN事件，那么这个view就会接管整个事件序列，这里view出界后就没有ACTION_MOVE事件了，肯定不正常！真相只有一个，就是被父控件拦截了，真的只要想到这点，就肯定知道需要配合requestDisallowInterceptTouchEvent啊！
滑动开始判定
另一个预料之外的问题是当滑动从其他item移动到当前item的时候，即使没有收到ACTION_DOWN事件，也会触发滑动，这个很不符合逻辑。我这就在stopMove里面将mLastX改为了-1，初始值也是-1，如果在moveItem中值是-1，就说明没有被ACTION_DOWN事件设定mLastX，即按下的时候并不在当前item，应当舍弃滑动。
后续订正
onTouchEvent有误
//处理事件
@SuppressLint("ClickableViewAccessibility")
override fun onTouchEvent(event: MotionEvent): Boolean {
when(event.action) {
MotionEvent.ACTION_DOWN -> return true
MotionEvent.ACTION_MOVE -> moveItem(event)
MotionEvent.ACTION_UP -> stopMove()
}
return super.onTouchEvent(event)
}
增加对ACTION_DOWN的拦截，因为如果ACTION_DOWN没在view处有被处理的话，会被丢弃，如果被view拦截了的话，move事件又不会经过onInterceptTouchEvent函数。真不知道当时写的时候是怎么运行通过的。。。
RecyclerView无法滑动问题
上次更新处理了滑动出界和点击事件问题，但是和RecyclerView的滑动冲突没处理，下面处理下，上面代码已经更新。和第一篇里面的滑动冲突的处理差不多，稍微有点修改，下面看解析：
- 增加一个模式变量，和一个记录down事件Y坐标的变量
private var mLastY = 0f
// 滑动模式，左滑模式(-1)，初始化(0)，上下模式(1)
private var mScrollMode = 0
- 在onInterceptTouchEvent的down事件中增加对两个变量的记录
override fun onInterceptTouchEvent(e: MotionEvent): Boolean {
when (e.action) {
MotionEvent.ACTION_DOWN -> {
mLastX = event.x
// 对滑动冲突处理
mLastY = event.y
mScrollMode = 0
}
// ...
}
// ...
}
- 在onTouchEvent的move事件中根据滑动模式决定拦截滑动还是交由RecyclerView处理。
override fun onTouchEvent(e: MotionEvent): Boolean {
when (e.action) {
// ...
MotionEvent.ACTION_MOVE -> {
// Log.e("TAG", "onTouchEvent: ACTION_MOVE")
if (mScrollMode == 0) {
val deltaX = abs(event.x - mLastX)
val deltaY = abs(event.y - mLastY)
// 异常情况忽略了
if (deltaX == deltaY && deltaX == 0f) return super.onTouchEvent(event)
// 判断模式，进入左滑状态(-1)，上下滑动(1)
mScrollMode = if (deltaX > deltaY) -1 else 1
}
// 左滑模式下交给当前控件处理
if (mScrollMode < 0) {
moveItem(event)
return true
}else {
// 这里不处理滑动事件，交个父控件(即RecyclerView)去处理
parent.requestDisallowInterceptTouchEvent(false)
return false
}
}
// ...
}
return super.onTouchEvent(e)
}
和第一篇里面的滑动处理不一样的地方就是这里LeftDeleteItemLayout不处理事件的话，要return false交给上层的RecyclerView去处理，第一篇的RecyclerView是之定义View的super，还是有点不一样的。
另一个就是这里要再调用requestDisallowInterceptTouchEvent并传入false，让父控件去处理事件。
