Android触摸事件传递机制实践——可拖动大小切换的SizeSwitchView

Posted 2022-11-28 炎之铠

出处：
炎之铠邮箱：[e-mail]
博客地址：http://blog.csdn.net/totond
本文原创，转载请注明本出处！
本项目GitHub地址：https://github.com/totond/SizeSwitchViewDemo
欢迎 Star or Fork！

前言

　　对于android的触摸事件传递机制，网上有很多讲解，有结合源码的，有图文结合的，其中不乏一些讲解清晰明了的文章，看完之后都能有所收获。然而，理论终究是要应用在实践上的，最近工作的时候，做出了一个可拖动，可以大小切换，大形态嵌套着ViewGroup的SizeSwitchView,其中涉及了比较复杂的触摸事件处理，实践完之后我感觉对事件传递机制熟悉了很多，在这里做出记录，并分享给大家。

介绍

　　这个需求是做一个方向键，然后这个方向键有5个按键，整体比较大，可能会挡着其他的内容，然后就要求支持拖动和大小切换：

　　由于SizeSwitchView的可扩展性不高（大形态的ViewGroup可以是多种多样的），要修改的话改动比较大，功能也不是很全面（只支持父ViewGroup为RelativeLayout），所以我把它定位为demo的方式分享出去，就不把它封装并上传到Jcenter了。

实现

1.结构分析

　　SizeSwitchView本质上是一个ViewGroup，里面包含两个互斥居中的控件（一个显示，另外一个就不显示），一个是小形态的控件，就只是一个ImageView，另一个是大形态的控件，是一个ViewGroup，里面包含着5个ImageView,也就是下面的BigDirectionKey：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <yanzhikai.sizeswitchview.BigDirectionKey
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:id="@+id/big_dk"/>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:id="@+id/small_dk"
        android:clickable="true"
        android:scaleType="fitCenter"
        android:src="@drawable/direction"
        android:background="@drawable/background_button"
        />

</RelativeLayout>

2.状态切换

　　关于大小形态的互相切换，主要注意的有两个点：宽高和位置的变化、动画的处理。

宽高和位置的变化

　　由于大形态和小形态的宽高不同，所以SizeSwitchView就要根据形态来变化大小，这里使用修改LayoutParams的方式来修改大小和位置：

    public void setMode(boolean isSmallMode)
        this.isSmallMode = isSmallMode;
        Log.d(TAG, "setMode: ");
        //设置大小形态的宽高和位置
        if (isSmallMode)
            LayoutParams smallParams = (LayoutParams) getLayoutParams();
            smallParams.width = mSmallWidth;
            smallParams.height = mSmallHeight;
            smallParams.leftMargin += (getWidth() - mSmallWidth)/2;
            smallParams.bottomMargin += (getHeight() - mSmallHeight)/2;
            setLayoutParams(smallParams);
        else 
            LayoutParams bigParams = (LayoutParams) getLayoutParams();
            bigParams.width = mBigWidth;
            bigParams.height = mBigHeight;
            bigParams.leftMargin -= (mBigWidth - mSmallWidth)/2;
            bigParams.bottomMargin -= (mBigHeight - mSmallHeight)/2;
            setLayoutParams(bigParams);
//            requestLayout();
        
        setKeysVisibility();
        isDraggable = true;
    

　　通过getLayoutParams()获取LayoutParams来改动SizeSwitchView的宽高和位置，然后根据大小的宽高变化量来调整位置，使大小形态的中心点保持在同一个点上，这样就让人看起来是在中心点缩放变化一样。
　　这个LayoutParams的类型取决于父ViewGroup，所以这里就限定了父ViewGroup是要使用RelativeLayout（使用到Margin属性）。

动画的处理

　　这个切换的动画实际上就是一个旋转缩小透明度减少的动画，加上反向旋转放大透明度增加的动画，这两个组合起来（没错，就是在模仿宇智波带土的神威）。。。

旋转缩小透明度减少动画shrink.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400">

    <rotate
        android:fromDegrees="0"
        android:toDegrees="360"
        android:pivotX="50%"
        android:pivotY="50%"
        />

    <scale
        android:fromXScale="1"
        android:fromYScale="1"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0"
        android:toYScale="0" />

    <alpha
        android:fromAlpha="1"
        android:toAlpha="0.3"
        />
</set>

反向旋转放大透明度增加动画：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="400">
    <rotate
        android:fromDegrees="0"
        android:toDegrees="-360"
        android:pivotX="50%"
        android:pivotY="50%"
        />

    <scale
        android:fromXScale="0"
        android:fromYScale="0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1"
        android:toYScale="1" />

    <alpha
        android:fromAlpha="0.3"
        android:toAlpha="1"
        />
</set>

下面是动画的设置：

    //初始化动画
    private void initAnim()
        smallShrinkAnimation = AnimationUtils.loadAnimation(mContext,R.anim.shrink);
        bigLargenAnimation = AnimationUtils.loadAnimation(mContext,R.anim.largen);
        smallShrinkAnimation.setAnimationListener(new Animation.AnimationListener() 
            @Override
            public void onAnimationStart(Animation animation) 
                setKeysClickable(false);
                isDraggable = false;
            

            @Override
            public void onAnimationEnd(Animation animation) 
                setMode(false);
                startAnimation(bigLargenAnimation);
            

            @Override
            public void onAnimationRepeat(Animation animation) 

            
        );
        bigLargenAnimation.setAnimationListener(new Animation.AnimationListener() 
            @Override
            public void onAnimationStart(Animation animation) 

            

            @Override
            public void onAnimationEnd(Animation animation) 
                setKeysClickable(true);
                isDraggable = true;
                setSmallKeyClick();
                checkBoundary();
            

            @Override
            public void onAnimationRepeat(Animation animation) 

            
        );

        bigShrinkAnimation = AnimationUtils.loadAnimation(mContext,R.anim.shrink);
        smallLargenAnimation = AnimationUtils.loadAnimation(mContext,R.anim.largen);
        bigShrinkAnimation.setAnimationListener(new Animation.AnimationListener() 
            @Override
            public void onAnimationStart(Animation animation) 
                setKeysClickable(false);
                isDraggable = false;
            

            @Override
            public void onAnimationEnd(Animation animation) 
                setMode(true);
                startAnimation(smallLargenAnimation);
                setSmallKeyClick();
            

            @Override
            public void onAnimationRepeat(Animation animation) 

            
        );
        smallLargenAnimation.setAnimationListener(new Animation.AnimationListener() 
            @Override
            public void onAnimationStart(Animation animation) 

            

            @Override
            public void onAnimationEnd(Animation animation) 
                setKeysClickable(true);
                isDraggable = true;
                checkBoundary();
            

            @Override
            public void onAnimationRepeat(Animation animation) 

            
        );

    

　　上面主要是4个动画（变大变小各两个）监听器的实现，思路就是：动画开始的时候不能点击，不能拖动；等到缩小动画完毕之后瞬间切换大小状态，再进行放大动画；动画都结束后就是恢复可以点击和可拖动状态，还有进行一次边界检测，看变换后的View是否越出了父View的边界，越出了的话就移动越出的位移，这个checkBoundary()方法的实现在后面讲。

3.触摸事件处理

　　由于SizeSwitchView需要支持拖动，需要实现拦截触摸事件，但是它也是一个父ViewGroup，还需要把点击事件（DOWN和UP事件）传递到子ViewGroup里面的View。了解过Android触摸事件传递机制的都知道，如果父View拦截了DOWN事件之后，后面的事件就不会传递到它的子View了。
　　所以我在SizeSwitchView的拦截思路是这样的：

　　其实也不复杂，就是让父ViewGroup只有在拖动达到一定距离的时候才拦截MOVE事件，DOWN事件就传递给子View处理，但是这样有一个问题：在父ViewGroupOnTouchEvent()方法是没有DOWN事件的，不能在这里获取DOWN事件的坐标，MotionEvent.getX()和MotionEvent.getY()方法获取的只是点击事件相对于当前View的零点的位置，而不是在屏幕上的XY坐标，所以光靠MOVE事件的位置数据是无法准确计算SizeSwitchView的移动的（每次都要平移到View的零点才能正常拖动），如下面的效果：

　　所以就直接在onInterceptTouchEvent()里面获取DOWN事件的坐标，用全局变量保存着，用MOVE事件的坐标减去它，才能正确计算出它的位移，从而进行准确移动：

    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) 
        switch (ev.getAction())
            case MotionEvent.ACTION_DOWN:
                //记录DOWN事件的点击位置，因为不拦截DOWN事件，移动的时候需要这个起点坐标来计算距离。
                    lastX = ev.getX();
                    lastY = ev.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                //拖动距离超过最小拖动量才会被拖动
                if (Math.abs(ev.getX() - lastX) > clickOffset && Math.abs(ev.getY() - lastY )> clickOffset)
                    if (canDrag && isDraggable && ev.getAction() == MotionEvent.ACTION_MOVE)
                        return true;
                    
                
                break;
        
        return false;
    


    @Override
    public boolean onTouchEvent(MotionEvent event) 
        if (event.getAction() == MotionEvent.ACTION_UP)
            //抬手就进行一次边界检测
            checkBoundary();
        else if (event.getAction() == MotionEvent.ACTION_MOVE)
            //进行移动操作
            if (canDrag && isDraggable) 
                int offX = (int) (event.getX() - lastX);
                int offY = (int) (event.getY() - lastY);
                LayoutParams params =
                        (LayoutParams) getLayoutParams();
                params.leftMargin = params.leftMargin + offX;
                params.rightMargin = params.rightMargin - offX;
                params.topMargin += offY;
                params.bottomMargin -= offY;
                setLayoutParams(params);

                return true;
            
            return false;
        
        return super.onTouchEvent(event);
    

　　然后就是边界检测了，具体思路很简单，就是计算SizeSwitchView当前位置是不是超出它的父ViewGroup的范围，如果超过的话就要移回来：

  //检测View是否跑出边界，如果是则移回来
    private void checkBoundary()
        Log.d("checkBoundary", "checkBoundary: ");
        ViewGroup parent = (ViewGroup) getParent();
        boolean isOut = false;
        int moveX = 0;
        int moveY = 0;
        if (getLeft() < 0)
            moveX = getLeft();
            isOut = true;
        
        if (getTop() < 0)
            moveY = getTop();
            isOut = true;
        
        if (getRight() > parent.getWidth())
            moveX = (getRight() - parent.getWidth());
            isOut = true;
        
        if (getBottom() > parent.getHeight())
            moveY = (getBottom() - parent.getHeight());
            isOut = true;
        
        //有出界才进行LayoutParams的设置，节省性能
        if (isOut) 
            LayoutParams params =
                    (LayoutParams) getLayoutParams();
            params.setMargins(params.leftMargin - moveX,
                    params.topMargin - moveY,
                    params.rightMargin + moveX,
                    params.bottomMargin + moveY);
            setLayoutParams(params);
        
    

　　这样的话拖动的功能就处理好了，点击事件也传进去子ViewGroup了，但是怎样把子ViewGroup的点击实现实现接口传出来呢？这就和我上一篇的YMenuView的设计差不多了：由于在大形态的BigDirectionKey有5个子View，所以就自己实现一个带index索引的接口OnKeyClickListener去实现点击，外层调用的话只需要实现这个OnKeyClickListener然后传入进来就行了。

    private OnKeyClickListener mOnKeyClickListener;

    //初始化
    private void initKeys()
        okKey = new ImageView(mContext);
        upKey = new ImageView(mContext);
        downKey = new ImageView(mContext);
        leftKey = new ImageView(mContext);
        rightKey = new ImageView(mContext);

        okKey.setImageResource(R.drawable.background_ok);
        upKey.setImageResource(R.drawable.background_up);
        downKey.setImageResource(R.drawable.background_down);
        leftKey.setImageResource(R.drawable.background_left);
        rightKey.setImageResource(R.drawable.background_right);

        okKey.setClickable(true);
        upKey.setClickable(true);
        downKey.setClickable(true);
        leftKey.setClickable(true);
        rightKey.setClickable(true);

        okKey.setScaleType(ImageView.ScaleType.FIT_XY);
        upKey.setScaleType(ImageView.ScaleType.FIT_XY);
        downKey.setScaleType(ImageView.ScaleType.FIT_XY);
        leftKey.setScaleType(ImageView.ScaleType.FIT_XY);
        rightKey.setScaleType(ImageView.ScaleType.FIT_XY);

        okKey.setId(generateViewId());
        upKey.setId(generateViewId());
        downKey.setId(generateViewId());
        leftKey.setId(generateViewId());
        rightKey.setId(generateViewId());

        addView(okKey);
        addView(upKey);
        addView(downKey);
        addView(leftKey);
        addView(rightKey);

        setBackgroundResource(R.drawable.button_shape);

        //设置点击监听器
        for (int i = 0; i < getChildCount(); i++)
            getChildAt(i).setOnClickListener(new MyOnClickListener(i));
        
    

    //重写一个带索引的OnClickListener，索引用于标识5个子View
    private class MyOnClickListener implements OnClickListener 
        private int index;

        public MyOnClickListener(int index) 
            this.index = index;
        

        @Override
        public void onClick(View v) 
            if (mOnKeyClickListener != null) 
                mOnKeyClickListener.onKeyClick(index);
            
        
    

    //暴露给外部的点击接口
    public interface OnKeyClickListener
        public void onKeyClick(int index);
    

　　这样子，在Activity里面只需要实现BigDirectionKey.OnKeyClickListener接口然后重写里面的方法就可以处理点击事件了：

    @Override
    public void onKeyClick(int index) 
        switch (index)
            case 0:
                mSizeSwitchView.toSmallMode();
                break;
            case 1:
                makeToast("1");
                break;
            case 2:
                makeToast("2");
                break;
            case 3:
                makeToast("3");
                break;
            case 4:
                makeToast("4");
                break;
        
    

总结

　　这样就介绍完了SizeSwitchView大体实现思路了，总体来说就是点击、切换、拖动。其实难点并不多，但是实现的时间还是不短的，就是实现的时候遇到搞不定的功能会各种各种的尝试，最后才得到解决方法，而且思路还是很乱，经过总结原理之后发现很多可以改善的地方，小改的地方我都优化了，可以大改的地方，如换一种移动的方式（使用layout()方法的方式，可以大大减少Measure的次数，让拖动更平滑），这个改动比较大，留到后面。

后话

　　这个SizeSwitchView和上一篇的YMenuView都是属于我做的一个项目，目前项目处于总结阶段，在实现功能中学到很多东西，做完过段时间将这些东西整理一遍，又改进了一遍，自己理解得又更深了。