美文网首页常用控件Android
安卓可拖拽悬浮按钮二

安卓可拖拽悬浮按钮二

作者: Ggx的代码之旅 | 来源:发表于2017-02-15 17:46 被阅读7171次

    几个月前,我写了一篇文章《Android 可拖拽悬浮吸附按钮》这篇文章的实现方式有点影响性能,介于当时的能力不足也是有一定原因的。这几天重新实现了一种效果更好的方式,这种方式的优点是,你可以就像使用普通的控件的一样使用它(实际上它就是普通的控件)并且满足按钮点击效果,代码上也大大的比之前简化了。记得之前的方式 应为事件被改写了还得单独写一个接口来用来判断点击事件。
    实现思路

    1. 通过重写控件的onTouchEvent方法监听触摸效果。
    2. 通过View的setX()和setY()方法实现移动。
    3. 使用属性动画实现边缘吸附效果。

    源代码没多少行,这里先把代码线上。此处我是继承了FloatingActionButton,使它拥有了拖拽移动的功能。

    public class DragFloatActionButton extends FloatingActionButton{
    
        private int parentHeight;
        private int parentWidth;
    
        public DragFloatActionButton(Context context) {
            super(context);
        }
    
        public DragFloatActionButton(Context context, AttributeSet attrs) {
            super(context, attrs);
    
        }
    
        public DragFloatActionButton(Context context, AttributeSet attrs, int defStyleAttr) {
            super(context, attrs, defStyleAttr);
    
        }
    
    
        private int lastX;
        private int lastY;
    
        private boolean isDrag;
    
        @Override
        public boolean onTouchEvent(MotionEvent event) {
            int rawX = (int) event.getRawX();
            int rawY = (int) event.getRawY();
            switch (event.getAction() & MotionEvent.ACTION_MASK) {
                case MotionEvent.ACTION_DOWN:
                    setPressed(true);
                    isDrag=false;
                    getParent().requestDisallowInterceptTouchEvent(true);
                    lastX=rawX;
                    lastY=rawY;
                    ViewGroup parent;
                    if(getParent()!=null){
                        parent= (ViewGroup) getParent();
                        parentHeight=parent.getHeight();
                        parentWidth=parent.getWidth();
                    }
                    break;
                case MotionEvent.ACTION_MOVE:
                    if(parentHeight<=0||parentWidth==0){
                        isDrag=false;
                        break;
                    }else {
                        isDrag=true;
                    }
                    int dx=rawX-lastX;
                    int dy=rawY-lastY;
                    //这里修复一些华为手机无法触发点击事件
                    int distance= (int) Math.sqrt(dx*dx+dy*dy);
                    if(distance==0){
                        isDrag=false;
                        break;
                    }
                    float x=getX()+dx;
                    float y=getY()+dy;
                    //检测是否到达边缘 左上右下
                    x=x<0?0:x>parentWidth-getWidth()?parentWidth-getWidth():x;
                    y=getY()<0?0:getY()+getHeight()>parentHeight?parentHeight-getHeight():y;
                    setX(x);
                    setY(y);
                    lastX=rawX;
                    lastY=rawY;
                    Log.i("aa","isDrag="+isDrag+"getX="+getX()+";getY="+getY()+";parentWidth="+parentWidth);
                    break;
                case MotionEvent.ACTION_UP:
                    if(!isNotDrag()){
                        //恢复按压效果
                        setPressed(false);
                        //Log.i("getX="+getX()+";screenWidthHalf="+screenWidthHalf);
                        if(rawX>=parentWidth/2){
                            //靠右吸附
                            animate().setInterpolator(new DecelerateInterpolator())
                                    .setDuration(500)
                                    .xBy(parentWidth-getWidth()-getX())
                                    .start();
                        }else {
                            //靠左吸附
                            ObjectAnimator oa=ObjectAnimator.ofFloat(this,"x",getX(),0);
                            oa.setInterpolator(new DecelerateInterpolator());
                            oa.setDuration(500);
                            oa.start();
                        }
                    }
                    break;
            }
            //如果是拖拽则消s耗事件,否则正常传递即可。
            return !isNotDrag() || super.onTouchEvent(event);
        }
    
        private boolean isNotDrag(){
            return !isDrag&&(getX()==0
                    ||(getX()==parentWidth-getWidth()));
        }
    }
    

    代码很简单,
    手指按下
    首先是处理手指按压下的事件,这里我们把拖拽标识符设置为false并记录当前点击的屏幕坐标。然后我们在移动事件处。
    手指移动
    这里我们把拖拽标识符设置为true,因为手指移动了。然后我们需要计算手指移动了多少偏移量

    //计算手指移动了多少
    int dx=rawX-lastX;
    int dy=rawY-lastY;
    

    而后的两行代码表示控件需要移动的具体距离,后面有一个简单的边缘检测计算。最终通过调用setX以及setY方法实现控件的移动。
    手指松开
    这里如果是拖拽动作我们才需要处理自己的逻辑否则直接跳过即可。在这里我们首先恢复了按钮的按压效果,在源代码中找到setPressed(boolean)方法,这是处理按钮点击效果用的,在这里当手指松开后我们需要恢复按钮原来的效果。然后在判断控件需要往哪边吸附,吸附的过程就是做属性动画而已,原理还是不断的改变setX方法让按钮靠边移动

    总结

    这种实现方式,我们能正常的使用控件的单击时间和长按事件,因为只有当控件拖拽的时候我们才自己消耗事件否则全部交给系统处理。这是一种比较好的实现方式,通过这个例子其实我们还能实现更多的控件移动效果。事实上只需要改变所继承的控件类型就可以了

    PS1:
    最近发现在部分华为手机上无法触发点击事件,调试发现当我手指按压的时候会一直触发MotionEvent.ACTION_MOVE事件而事实上我手指一点都没有动,且Log出现的数据显示移动距离一直是0.坑爹。只能加一个距离判断了。上面的代码已经修复了这个问题。
    PS2:
    修复拖拽到中心点的时候长按不会吸附到边缘的问题,
    优化实现定义,准确的说是让view在父控件中任意拖拽。

    欢迎共同探讨更多安卓,java,c/c++相关技术QQ群:392154157

    相关文章

      网友评论

      • a6393228bea9:感谢作者的思路 我写了一个更加方便的小demo,大家可以试试
        https://blog.csdn.net/LosingCarryJie/article/details/82228285
        Ggx的代码之旅:@分享杰 不客气
      • 4c03b907ffd5:我也发现一个问题,Android8.0,横屏的时候,拖拽一次,然后能不能推拽了。
        Ggx的代码之旅:@AnYng 8.0的机子没测试过
      • 3daa6f4ac8ae:博主,求源码地址
        Ggx的代码之旅:@千江月_fe8d 这上面的就已经是全部源码了
      • 8b33f54cbcc1:在action up的时候需要加一下判断 if (lastX > (parentWidth - getWidth()))
        lastX = parentWidth - getWidth();防止出现松开手后按钮滑出右侧屏幕的动画
      • 我看Android:y=getY()<0?0:getY()+getHeight()>parentHeight?parentHeight-getHeight():y;
        这一行在测试时发现如果滑动过快 控件可能会超出屏幕范围 换成
        y=y<0?0:y>parentHeight-getHeight()?parentHeight-getHeight():y;
        不知博主认为是否可行
      • 碎碎想:你好博主,你写的DragFloatActionButton 在三星手机上还是大概率不能触发点击事件。不过疯狂点击的话还是能触发的,求解
        悬浮生物:加了博主的Q群,
        //这里修复一些华为手机无法触发点击事件
        int distance = (int) Math.sqrt(dx * dx + dy * dy);
        if (distance < 10) {
        isDrag = false;
        break;
        }

        把distance =0改成<一个值就好了,感谢楼主的热情回答
      • 蓝色理想pro:为何测试无效?
      • cb1f5a8b497c:页面第一次初始化时没有做任何拖动,这个时候可以点击,当有任何拖动后再去点击就失效了,不知道为啥
        27efec53a72d:以上改动有个问题,不能是 OnClickListener生效。后来综合其他问题,又重新调整了代码,完整代码如下:
        Ggx的代码之旅:@麦典威 :+1:
        27efec53a72d:第一步:删除isNotDrag()方法
        第二部:修改 MotionEvent.ACTION_UP 以后的代码如下:

        case MotionEvent.ACTION_UP:
        //恢复按压效果
        setPressed(false);
        if (rawX >= parentWidth / 2) {
        //靠右吸附
        animate().setInterpolator(new DecelerateInterpolator())
        .setDuration(500)
        .xBy(parentWidth - getWidth() - getX())
        .start();
        } else {
        //靠左吸附
        ObjectAnimator oa = ObjectAnimator.ofFloat(this, "x", getX(), 0);
        oa.setInterpolator(new DecelerateInterpolator());
        oa.setDuration(500);
        oa.start();
        }
        break;
        }
        //如果是拖拽则消s耗事件,否则正常传递即可。
        return !isDrag || super.onTouchEvent(event);
      • 浮名虚誉架构师:只能拖拽一次吗,再次拖动就没效果了
        Ggx的代码之旅:@爱兔悠 手机版本告诉一下
        MarioAndroid:我也遇到一样,拖动一次后就没效果了
      • 6efac14493e6:你好博主,你写的DragFloatActionButton 在三星手机上还是大概率不能触发点击事件,经查看,执行完actiondown后又执行了actionmove,而且distance不等于0,在线求解
        Ggx的代码之旅:@婷在我心 你可以加群咨询
      • 37650f2822bc:这个可以继承ImageView或者ImageButton吗楼主
        Ggx的代码之旅:任意继承
      • 7c93fbc1df63:感谢博主提供了一种新思路,我说一下我发现的问题啊,1.如果移动到某一个点停留一会,手还没抬起来时会产生点击事件,而且吸附效果消失 2.fab移动之后相对与父控件的位置没有发生改变
        Ggx的代码之旅:问题一已经修复,问题2 没明白意思
        Ggx的代码之旅:好的 稍后我测试一下
      • 失落的胡某某:博主,正好有个拖拽按钮的需求,就采用你的方法了。使用过程中发现个小bug,有的时候长按按钮,按钮就不会吸附在边框上了。但是不影响使用,测试机三星s7e。
        失落的胡某某:@Ggx的代码之旅 给力的作者。
        Ggx的代码之旅:此问题已经修复了
        Ggx的代码之旅:好的稍后修复一下
      • 哆啦A梦是个蓝胖子:为什么把这个控件拖到屏幕底端的中间不会停留在屏幕底端中间反而跑到屏幕底端的左边或右边
        Ggx的代码之旅:这个就是吸附的效果 会自动往屏幕的两边吸的
      • 旺旺_d5d4:DisplayUtil这个工具类没有贴出来
        哆啦A梦是个蓝胖子:@Ggx的代码之旅 这个类能不能贴上呢:smile:
        Ggx的代码之旅:这只是一个我自己封装的计算单位转换的工具类 如dp2px px2dp px2sp等等,网上随便找找有很多的
      • hellonihao512:博主 代码拷贝进来 拖拽不起作用啊,就不不动,没有走到 case MotionEvent.ACTION_MOVE case 里面去,你有项目吗 ? 可以分享出来吗?
        Ggx的代码之旅:@hellonihao512 我原来那么做是有原因的,更加适应系统的写法,比如说你给一个按钮设置了点击状态,如果你不在代码中设置这个按钮的点击事件就看不到点击效果
        hellonihao512:我在 case MotionEvent.ACTION_DOWN: return true; 就可以了
        Ggx的代码之旅:@hellonihao512 你还需要设置点击事件监听就好了
      • 香沙小熊:怎么将红色圆圈换成图片
        Ggx的代码之旅:这篇文章是继承的FloatingActionButton,所以使用的时候就和平时的FloatingActionButton一样用。这篇文章的想法可以应用在各种系统存在的控件上。
        香沙小熊:@指间的灵动 DragFloatActionButton 默认效果不是红色圆圈吗?
        Ggx的代码之旅:什么叫红色的圆圈
      • e37662bff0a7:statusHeight=DisplayUtil.getStatusHeight((Activity) getContext());
        这是什么状态的高度啊?
        e37662bff0a7:@指间的灵动 好的 谢谢
        Ggx的代码之旅:这是系统状态栏的高度,这里是为去除系统状态栏的高度用的
      • c493c0f96856:可以可以- -学到了。。还有这种写法。之前根本没有想到啊- -!博主厉害。。。

      本文标题:安卓可拖拽悬浮按钮二

      本文链接:https://www.haomeiwen.com/subject/hwiqwttx.html