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

Posted 炎之铠

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Android触摸事件传递机制实践——可拖动大小切换的SizeSwitchView相关的知识,希望对你有一定的参考价值。

出处
炎之铠邮箱:yanzhikai_yjk@qq.com
博客地址: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都是属于我做的一个项目,目前项目处于总结阶段,在实现功能中学到很多东西,做完过段时间将这些东西整理一遍,又改进了一遍,自己理解得又更深了。

以上是关于Android触摸事件传递机制实践——可拖动大小切换的SizeSwitchView的主要内容,如果未能解决你的问题,请参考以下文章

Android 事件传递机制进阶

android事件传递机制详解

Android Touch事件传递机制详解

Android触摸事件分发机制总结

Android高级开发知识总结

android事件分发机制