[移动开发]子View设置LayoutParams滑动不流畅闪动问题

子View设置LayoutParams滑动不流畅闪动问题

话不多说！

当前我准备自己实现一个功能，一个FrameLayout中有4个TextView堆叠在一起，我要监听触摸事件，把在最上面的TextView依次滑开。

布局如下

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <com.original.touchevent.MoveView
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:background="@android:color/holo_blue_dark">

        <com.original.touchevent.MoveChildView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="1"
            android:textSize="30sp"
            android:gravity="center"
            android:textColor="@color/white"/>

        <com.original.touchevent.MoveChildView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="2"
            android:textSize="30sp"
            android:gravity="center"
            android:textColor="@color/white"/>

        <com.original.touchevent.MoveChildView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="3"
            android:textSize="30sp"
            android:gravity="center"
            android:textColor="@color/white"/>

        <com.original.touchevent.MoveChildView
            android:layout_width="100dp"
            android:layout_height="100dp"
            android:text="4"
            android:textSize="30sp"
            android:gravity="center"
            android:background="@android:color/holo_red_dark"
            android:textColor="@color/white"/>

    </com.original.touchevent.MoveView>

</FrameLayout>

其中com.original.touchevent.MoveView是一个自定义View，继承自FrameLayout

com.original.touchevent.MoveChildView也是一个自定义View，继承自TextView

错误实现

首先我的第一想法是在自定义TextView中重写onTouchEvent方法，然后根据改变其LayoutParams更改其位置，但是最后实现之后发现拖动不流畅，会闪来闪去，代码实现如下：

//集成自TextView的子View
class MoveChildView(context: Context, attrs: AttributeSet?, defStyleAttr: Int) :
    AppCompatTextView(context, attrs, defStyleAttr) {

    constructor(context: Context, attrs: AttributeSet) : this(context, attrs, 0)
    constructor(context: Context) : this(context, null, 0)

    private var lastX = 0
    private var lastY = 0

    override fun onTouchEvent(event: MotionEvent?): Boolean {

        event?.let {
            val x = it.x
            val y = it.y
            val action = it.action
            when (action) {
                MotionEvent.ACTION_DOWN -> {
                    lastX = x.toInt()
                    lastY = y.toInt()
                }
                MotionEvent.ACTION_MOVE -> {
                    val dx = x.toInt() - lastX
                    val dy = y.toInt() - lastY
                    move(dx, dy)
                    lastX = x.toInt()
                    lastY = y.toInt()
                }
            }
        }

        return true
    }

    fun move(x: Int, y: Int) {
        val params = layoutParams as FrameLayout.LayoutParams
        params.leftMargin += x
        params.topMargin += y
        setLayoutParams(params)
    }
}

为什么会出现这个情况呢？

要分析这个问题，首先得明白MotionEvent提供的下面两个方法的定义：

//以触摸的View的左上角为基准，当前点击位置的X坐标
public float getX()
//以触摸的View的左上角为基准，当前点击位置的Y坐标
public float getY()

请记住是以触摸View的左上角为基准产生的坐标。如果这个移动的逻辑写在子View内，那么你View移动了，那么View左上角的位置就变了，那么计算坐标的基准就变了，那么产生的手指触摸的x,y坐标值实际上是依据不停变化的最上角的坐标来计算的到的，就会不准确，甚至dx,dy会产生滑动反方向的值。比如右滑，dx体现为负数。

正确实现

因为要移动的是子View，那么外部的父View的左上角坐标实际上是不变的，只有有一个不变的正确的基准，才能保证计算的dx,dy滑动距离是准确的。因此正确的实现方式，是把滑动的逻辑写在父View内。当然也可以用MotionEvent提供的getRawX和getRawY方法来计算坐标，因为这两个方法的基准是屏幕的左上角。具体代码如下：

//继承自FrameLayout的父View
class MoveView(context: Context, attrs: AttributeSet?, defStyleAttr: Int) :
    FrameLayout(context, attrs, defStyleAttr) {

    constructor(context: Context, attrs: AttributeSet) : this(context, attrs, 0)
    constructor(context: Context) : this(context, null, 0)

    private var lastX = 0
    private var lastY = 0
    private var moveView: View? = null

    override fun onTouchEvent(event: MotionEvent?): Boolean {

        event?.let {
            val x = it.x
            val y = it.y
            val action = it.action
            when (action) {
                MotionEvent.ACTION_DOWN -> {
                    lastX = x.toInt()
                    lastY = y.toInt()
                    moveView = findMoveView(x, y)
                }
                MotionEvent.ACTION_MOVE -> {
                    val dx = x.toInt() - lastX
                    val dy = y.toInt() - lastY
                    moveView?.let {
                        move(it, dx, dy)
                    }
                    lastX = x.toInt()
                    lastY = y.toInt()
                }
            }
        }

        return true
    }

    fun inView(view: View, x: Float, y: Float): Boolean{
        return x >= view.left && x <= view.right && y >= view.top && y <= view.bottom
    }

    fun findMoveView(x: Float, y: Float): View?{
        for(index in childCount-1 downTo 0){
            if(inView(getChildAt(index), x, y)){
                return getChildAt(index)
            }
        }
        return null
    }

    fun move(view: View, x: Int, y: Int) {
        val params = view.layoutParams as FrameLayout.LayoutParams
        params.leftMargin += x
        params.topMargin += top + y
        view.layoutParams = params
    }
}

至此，此问题完结。