自定义控件(2)-拖拽实现开关切换

在这里,我们的主要工作就是在原有代码的基础上,增加一个重写的onTouchEvent方法,刚添加上来的时候是这个样子的:

@Override
    public boolean onTouchEvent(MotionEvent event) {
        return super.onTouchEvent(event);
    }

对于触摸事件来说,一般返回值为true的话,那么就代表在这里消费掉本次触摸,而返回false的话,就在当前位置对本次触摸不做处理或者不能完全处理,还需要继续将本次事件分发给后续view或者viewgroup响应,对于这里,我们定义的开关按钮已经是子view了,所以这里返回true就可以,现在看起来我们直接将return super.onTouchEvent(event);这一句删掉,然后加上return true;就可以了,会不会产生什么问题呢?我们暂时先这样处理。

之后的工作就比较简单了,我们需要根据event.getAction()的类型来做相应的处理,即我们基本上每天都在使用的:MotionEvent.ACTION_DOWN、MotionEvent.ACTION_MOVE和MotionEvent.ACTION_UP

由于在ACTION_MOVE的时候,我们想让滑块随着我们手指的位置的移动而移动,这里由于只是水平移动,所以我们只需要记录x方向的位置,需要两个值:int firstXint secondXfirstX负责记录上一次ACTION_MOVE时候的x值,secondX负责记录本次ACTION_MOVE时候的x值,然后这两个值相减,则可以得到手指在两次ACTION_MOVE触发的时间里移动的距离,得到这个距离之后还需要将firstX调整为当前的值,以便下次使用。然后将这个距离差值与我们滑块的位置进行求和,这样就可以调整我们滑块的位置随手指移动了,当然滑块的位置是有一个范围的,这里应该是[0,MAX_LEFT_DISTANCE]MAX_LEFT_DISTANCE = backgroundBitmap.getWidth()- slideButton.getWidth();,所以我们需要做一个判断,来限制滑块,不让其划出边界,好了,基本逻辑到这里,看看代码:

/**
     * 获取屏幕点击事件
     * 类似于ios中touchBegan方法
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        /**
         * 处理触摸手势
         * recognizer.state
         * UIGestureRecognizerStateBegan
         * UIGestureRecognizerStateChanged
         * UIGestureRecognizerStateEnd
         */
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            /**
             * 获取触摸点的x坐标
             * 类似于ios中的CGPoint point = [recognizer locationInView:recogznier.view];
             */
            firstTouchX = secondTouchX = (int)event.getX();
            isDrag = false;

            Log.i("test", "ACTION_DOWN..........");
            break;
        case MotionEvent.ACTION_MOVE:
            // 当移动的时候,计算手指在屏幕上移动的距离
            int distanceX = (int) (event.getX() - secondTouchX);
            if (Math.abs(distanceX) > 5) {
                isDrag = true;
            }

            secondTouchX = (int) event.getX();

            // 将滑动的距离累加到滑动按钮的X值
            switchBtnX = switchBtnX+distanceX;

            // 做一个判断,防止滑块超出边界,滑块的范围应该在[0,MAX_LEFT_DISTANCE]
            if (switchBtnX < 0) {
                switchBtnX = 0;
            } else {
                if (switchBtnX > switchBtnMaxSlideDistance) { // 如果按钮的X坐标超过了按钮可以移动的最大距离
                    switchBtnX = switchBtnMaxSlideDistance;
                }
            }
            Log.i("test", "ACTION_MOVE..........");
            break;
        case MotionEvent.ACTION_UP:
            // 当抬起的时候,判断松开的位置是哪里,由此决定开关的的状态
            if (switchBtnX < switchBtnMaxSlideDistance / 2) {
                switchBtnX = 0;
            } else if (switchBtnX >= switchBtnMaxSlideDistance /2 ) {
                switchBtnX = switchBtnMaxSlideDistance;
            }
            break;
        default:
            break;
        }
        invalidate(); // 刷新当前状态,类似于ios中的setNeedDisplay方法
        return true;
    }

写成现在这样会导致只有拖动效果,而点击效果不起作用了。。。

问题在哪里呢,实际上对于一个view来说,当点击事件传入的时候是先会调用onTouchEvent方法,然后才是调用onClickonLongClick等方法;但是我们也没有看到这个方法里面能够如何调用onClick方法啊?其实,秘密就在我们之前删掉的

return super.onTouchEvent(event);这一句里面。

我们不妨进入到super.onTouchEvent(event);里面一探究竟,找到switch(event.getAction()){}这一块核心代码:

 if (((viewFlags & CLICKABLE) == CLICKABLE ||
                (viewFlags & LONG_CLICKABLE) == LONG_CLICKABLE)) {
            switch (event.getAction()) {
          case MotionEvent.ACTION_UP:
            ...
             if (!post(mPerformClick)) {
                                    performClick();
                                }
            ...
        break;
        case MotionEvent.ACTION_DOWN:
            ...
             else {
                            // Not inside a scrolling container, so show the feedback right away
                            setPressed(true);
                            checkForLongClick(0);
                        }
            ...
        break;
        ...
    }
    ...
}

而在performClick()之中我们可以发现:

public boolean performClick() {
    ...
    li.mOnClickListener.onClick(this);
    ...
}

到这里基本上就清楚了,onClickonLongClick是在super.onTouchEvent方法里被调用的,onClick是在ACTION_UP的时候可能被调用,而onLongClick是在ACTION_DOWN的时候可能被调用。所以在这里我们虽然去掉了 return super.onTouchEvent(event);这一句,但是super.onTouchEvent(event);是需要保留的。

做完这一步之后我们会发现又可以响应到onClick方法了,但是还是有些不完美;我们希望在拖动之后就不要有点击操作,点击也不要有拖动效果(点击当然不会有拖动效果...),由于onClick点击的判断只是单纯的检测ACTION_DOWN之后是否有一个ACTION_UP,如果有,那么就判断为一次点击事件,至于中间的过程是否滑动了,它却不管。所以在这里我们需要再加上一个boolean类型的判断标志isDrag,在ACTION_DOWN的时候将其设置为false,如果触发了ACTION_MOVE了,则将其置为true。然后在onClick方法里面,加上一个条件,如果isDrag为假才执行点击的对应操作,否则就跳过。这样就比较完美了。。。来看看最终的onTouchEventonClick的写法:

private boolean isDrag = false;

    /**
     * 获取屏幕点击事件
     * 类似于ios中touchBegan方法
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        /**
         * 处理触摸手势
         * recognizer.state
         * UIGestureRecognizerStateBegan
         * UIGestureRecognizerStateChanged
         * UIGestureRecognizerStateEnd
         */
        switch (event.getAction()) {
        case MotionEvent.ACTION_DOWN:
            /**
             * 获取触摸点的x坐标
             * 类似于ios中的CGPoint point = [recognizer locationInView:recogznier.view];
             */
            firstTouchX = secondTouchX = (int)event.getX();
            isDrag = false;

            Log.i("test", "ACTION_DOWN..........");
            break;
        case MotionEvent.ACTION_MOVE:
            // 当移动的时候,计算手指在屏幕上移动的距离
            int distanceX = (int) (event.getX() - secondTouchX);
            if (Math.abs(distanceX) > 5) {
                isDrag = true;
            }

            secondTouchX = (int) event.getX();

            // 将滑动的距离累加到滑动按钮的X值
            switchBtnX = switchBtnX+distanceX;

            // 做一个判断,防止滑块超出边界,滑块的范围应该在[0,MAX_LEFT_DISTANCE]
            if (switchBtnX < 0) {
                switchBtnX = 0;
            } else {
                if (switchBtnX > switchBtnMaxSlideDistance) { // 如果按钮的X坐标超过了按钮可以移动的最大距离
                    switchBtnX = switchBtnMaxSlideDistance;
                }
            }
            Log.i("test", "ACTION_MOVE..........");
            break;
        case MotionEvent.ACTION_UP:
            // 当抬起的时候,判断松开的位置是哪里,由此决定开关的的状态
            if (switchBtnX < switchBtnMaxSlideDistance / 2) {
                switchBtnX = 0;
            } else if (switchBtnX >= switchBtnMaxSlideDistance /2 ) {
                switchBtnX = switchBtnMaxSlideDistance;
            }
            break;
        default:
            break;
        }
        invalidate(); // 刷新当前状态,类似于ios中的setNeedDisplay方法
        return super.onTouchEvent(event);
    }
/** 当点击时调用此方法 */
    private void switchBtnClick() {
        if (switchBtnX == 0) {
            switchBtnX = switchBtnMaxSlideDistance;
        } else {
            switchBtnX = 0;
        }

        invalidate(); // 类似于ios中[self setNeedDisplay]方法
    }

最终效果:

时间: 2024-11-05 06:17:08

自定义控件(2)-拖拽实现开关切换的相关文章

【转】C#.net拖拽实现获得文件路径

C#.net拖拽实现获得文件路径 作者Attilax ,  EMAIL:[email protected] 思路: 通过DragEnter事件获得被拖入窗口的“信息”(可以是若干文件,一些文字等等), 在DragDrop事件中对“信息”进行解析. 窗体的AllowDrop属性必须设置成true; 且必须有DragEnter事件(单独写DragDrop事件是不会具有拖拽功能的) private void Form1_DragEnter(object sender, DragEventArgs e)

html5简单拖拽实现自动左右贴边+幸运大转盘

此篇文章主要实现两个功能: 1.点击屏幕下方签到悬浮按钮: 2.弹出幸运大转盘,转盘抽奖签到 效果如图: 鉴于初入前端之路,方法有限,仅供参考. 在网上找了很多拖拽的js实现方式,大部分都是这一种,html5的touch事件,但是没找到点击按钮可以向两边贴边的拖拽,所以自己稍微修改了一点.代码如下: //签到按钮拖拽 var dragBox = document.getElementById('signCorner'); //拖拽中 dragBox.addEventListener('touch

asp.net Repeater拖拽实现排序并同步排序字段到数据库中

数据库表中有一个单位表,里面包括ID.Name.Order等字段,现在有个后台管理功能,可以设置这些单位在某些统计表格中的先后显示顺序,于是想到用拖拽方式实现,这样操作起来更简便. 使用了GifCam软件做了一个示例动画,效果如下图所示: 于是就动手起来,发现jquery.ui中提供sortable函数,可用于排序,界面中从数据库绑定的单位使用Repeater控件,下面简单介绍下主要步骤: 1.项目中使用到的jquery-1.7.2.min.js和jquery-ui.min.js请点击进行下载,

【WPF】这可能是全网最全的拖拽实现方法的总结

前文 本文只对笔者学习掌握的一般的拖动问题的实现方法进行整理和讨论,包括窗口.控件等内容的拖动. 希望本文能对一些寻找此问题的解决方法的人和一些刚入门的人一些帮助.笔者为WPF初学者,能得到各位的批评指正也是荣幸万分.有更好更多的方法,劳烦与我分享,不胜感激. 本文的各种实现方法其他博客中也都有提及,很多文章内容详实,有图有代码,笔者就不重复造轮子了.就写写自己的一些理解吧. 关键词 Window, UserControls, Drag 参考资料 http://www.cnblogs.com/D

html界面元素拖拽实现[超简单]

就是一个十分简单的小功能,将一个html界面元素从一个地方拖到另一个地方(复制或移动) html部分,省略部分非关键代码 <!-- 被拖拽元素 :draggable属性,表明元素可拖拽--> <div id="ma" class="MA" draggable="true"> A股 </div> <!-- 拖拽目标区域 --> <div id="box" class=&quo

自定义控件,可拖动的开关:SlideSwitch

可以拖动的开关,开关滑块随着手指拖动而变化. 使用 int 值来区分状态,相比使用boolean值区分状态使代码更加容易理解.更容易些代码.有三种状态: 白天.黑夜.滚动状态. canvas画布在滚动状态时,如何画开.关两种状态. 供用户回调的监听器在哪设置? 点击事件.滑块没有滑满就松手.滑块滑满了.这三个地方添加回调方法. 自定义控件:先看构造方法: public SlideSwitchButton(Context context) { this(context, null); } publ

自定义控件——可拖拽排序的ListView

前言 最经研究了一下拖拽排序的ListView,跟酷狗里的播放列表排序一样,但因为要添加自己特有的功能,所以研究了好长时间.一开始接触的是GitHub的开源项目--DragSortListView,实现的效果和流畅度都很棒.想根据他的代码自己写一个,但代码太多了,实现的好复杂,看别人的代码你懂的了,就去尝试寻找其他办法.最后还是找到了更简单的实现方法,虽然跟开源项目比要差一点,但对我来说可以了,最重要的是完全可以自定义. 实现的效果如下: 主要问题 如何根据触摸的位置确定是哪个条目? ListV

【Android】自定义控件实现可滑动的开关(switch)

~转载请注明来源:http://blog.csdn.net/u013015161/article/details/46704745 介绍 昨天晚上写了一个Android的滑动开关, 即SlideSwitch.效果如下: 实现 实现的思路其实很简单,监听控件上的touch事件,并不断刷新,让滑块在手指的位置上绘出,达到滑块跟着手指滑动的显示效果. 先看一下代码: SlideSwitch.java package com.example.slideswitchexample; import andr

自定义控件(1)-点击实现开关按钮切换

自定义控件的步骤.用到的主要方法:   1.首先需要定义一个类,继承自View:对于继承View的类,会需要实现至少一个构造方法:实际上这里一共有三个构造方法: public View (Context context)是在java代码创建视图的时候被调用(使用new的方式),如果是从xml填充的视图,就不会调用这个 public View (Context context, AttributeSet attrs)这个是在xml创建但是没有指定style的时候被调用 public View (C