自定义布局之树形布局（六）：事件拦截与拖拽效果

上一篇讲解了树形布局绘制结点连接线的相关内容。本文来讲解布局的事件拦截及拖拽效果的实现。

思路分析

布局拖拽会产生一系列屏幕触摸事件。那问题来了，要是树形布局里有对滑动事件敏感的子控件（如ScrollView），这一系列事件该由谁处理呢？

其实思路很简单，我们给TreeLayout定义一个锁定标记。树形布局被锁定时，滑动事件交给子控件处理，而树形布局解锁时，它把拦截滑动事件拦截下来自己处理。下面来看看是怎么实现的。

重写onInterceptTouchEvent方法

这个方法只有布局类控件才有，它是用来拦截屏幕触摸事件的。拦截了一个事件，其后续事件也会被拦截下来。

举个例子，滑动事件可以分为三个部分，1次down事件 —> n次move事件 —> 1次up事件。如果第一个move事件被拦截了，则后续的move事件以及up事件也会被拦截下来。如此一来，子控件就收不到完整的滑动事件了。

下面是重写的onInterceptTouchEvent方法。返回ture表示拦截事件，从代码里也可以看出树形布局在解锁的时候才会拦截事件。

    @Override
    public boolean onInterceptTouchEvent(MotionEvent event) {
        int action = event.getAction();

        if(action == MotionEvent.ACTION_DOWN){
            return super.onInterceptTouchEvent(event);
        }
        
        return !mLocked;
    }

重写onTouchEvent方法

事件是拦截下来了，可要怎么处理它们呢？这时需要重写onTouchEvent方法来实现拖拽效果，不过首先需要了解四种常见的触摸事件。

事件类型	说明
ACTION_DOWN	手指触碰到屏幕时产生
ACTION_MOVE	手指在屏幕上滑动时产生，一次滑动会触发多次此事件
ACTION_UP	手指抬起时产生
ACTION_CANCEL	父布局拦截了事件或手指滑出屏幕时产生

了解了这些事件后来看看重写的onTouchEvent方法。需要注意的是Android的坐标系：从左到右是x轴正方向，从上到下是y轴正方向

private float mLastX;
private float mLastY;
private boolean mMovePrepared;
@Override
public boolean onTouchEvent(MotionEvent event) {
        int action = event.getAction();
        float currentX = event.getX();
        float currentY = event.getY();
        float deltaX;
        float deltaY;

        switch(action){
            case MotionEvent.ACTION_DOWN:
                return true;

            case MotionEvent.ACTION_MOVE:
				//1
                if(!mMovePrepared){
                    mMovePrepared = true;
                    mLastX = currentX;
                    mLastY = currentY;
                }

                deltaX = currentX - mLastX;
                deltaY = currentY - mLastY;

                scrollBy((int)-deltaX,(int)-deltaY);

                mLastX = currentX;
                mLastY = currentY;
                break;

            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                mMovePrepared = false;
                break;
        }
        return super.onTouchEvent(event);
}

解释一下mMovePrepared，它是用来消除滑动抖动的，抖动会导致用户体验变差。一次滑动会触发多次ACTION_MOVE事件，这个标记会 “浪费” 掉第一个ACTION_MOVE事件来更新mLastX 和 mLastY，这样就可以消除抖动了。（感兴趣的朋友可以把代码块1注释掉，看看抖动是怎样的）

效果展示

最后

实现了拖拽效果后实际上整个树形布局的基本功能就算是完成了，对完整代码感兴趣的朋友可以到Github项目阅读，喜欢这个布局控件的话可以star一下以示鼓励。

下一篇讲解树形布局分支限制。