2019-03-21 关于可移动窗口View的实现

最近实现可以随手指移动的窗口View,也看了各种网上实现的方法,下面就说一下我所看到的各种方法.

1 . 使用layout去设置位置。

实现的思想是通过自定View的onTouchEvent()方法。

  • onTouchEvent()用于处理事件,返回值决定当前控件是否消费(consume)了这个事件,也就是说在当前控件在处理完Touch事件后,是否还允许Touch事件继续向上(父控件)传递,一但返回True,则父控件不用操心自己来处理Touch事件。 返回false,则向上传递给父控件(注:可能你会觉得是否消费了有关系吗,反正我已经针对事件编写了处理代码?答案是有区别!比如ACTION_MOVE或者ACTION_UP发生的前提是一定曾经发生了ACTION_DOWN,如果你没有消费ACTION_DOWN,那么系统会认为ACTION_DOWN没有发生过,所以ACTION_MOVE或者ACTION_UP就不能被捕获。)
    这个时候就要引入onInterceptTouchEvent()这个概念。
  • onInterceptTouchEvent()是用于处理事件(重点onInterceptTouchEvent这个事件是从父控件开始往子控件传的,直到有拦截或者到没有这个事件的view,然后就往回从子到父控件,这次是onTouch的)(类似于预处理,当然也可以不处理)并改变事件的传递方向,也就是决定是否允许Touch事件继续向下(子控件)传递,一但返回True(代表事件在当前的viewGroup中会被处理),则向下传递之路被截断(所有子控件将没有机会参与Touch事件),同时把事件传递给当前的控件的onTouchEvent()处理;返回false,则把事件交给子控件的onInterceptTouchEvent()
    关于view的事件传递机制,大家可以自行深入了解,这里只是简单的引入一个概念,这样大家有所理解后,开始详细说明。
 @Override
    public boolean onTouchEvent(MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                /**
                 *   触摸点相对于父控件的Y轴距离
                 */
                touchX = event.getX();
                /**
                 * 触摸点相对于父控件的X轴距离
                 */
                touchY = event.getY();
                break;
            case MotionEvent.ACTION_MOVE:
                /**
                 * 这里Y轴要减掉barHeight
                 * 因为计算时,View的默认坐标原点在状态栏下面
                 * 而屏幕的坐标是包含着状态栏的
                 * getRawY()是当前触摸点相对于屏幕默认坐标系,也就是屏幕顶端X轴的距离
                 * getRawY()是当前触摸点相对于屏幕默认坐标系,也就是屏幕顶端Y轴的距离
                 */
                /**
                 * nowY也就是当前控件距离屏幕坐标系,状态下距离X轴的距离
                 */
                float nowY = event.getRawY() - touchY - barHeight;
                /**
                 * nowX也就是当前控件距离屏幕坐标系,状态下距离Y轴的距离
                 */
                float nowX = event.getRawX() - touchX;

                nowX = nowX < 0 ? 0 : (nowX + width > screenWidth) ? (screenWidth - width) : nowX;
                nowY = nowY < 0 ? 0 : nowY + height > screenHeight ? screenHeight - height : nowY;
                this.setY(nowY);
                this.setX(nowX);
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                //这里做动画贴边效果
                float centerX = getX() + width / 2;
                if (centerX > screenWidth / 2) {
                    ObjectAnimator.ofFloat(this, "translationX",
                            getX(), screenWidth - width)
                            .setDuration(500)
                            .start();
                } else {
                    ObjectAnimator.ofFloat(this, "translationX",
                            getX(), 0)
                            .setDuration(500)
                            .start();
                }
                touchX = 0;
                touchY = 0;
                break;
            default:
                return super.onTouchEvent(event);
        }
        return true;
    }

上面demo这个确实能够实现随手指移动,但是,如果我们刷新控件就会回到原来的位置,这个我看了各种CSDN的博客,终于找到了一篇描述出现这个问题的原因,这里给大家一个链接,转载自忆_析风博客,原因是刷新时会调用bringToFront()这个方法,所以我们就采用了第二种方法去实现。

2. 使用layoutParams去设置位置。

废话不多说,直接上代码

/**
     * 可移动的逻辑
     *
     * @param event
     * @return
     */
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        /**
         * 是否能够移动
         */
        if (isCanMove) {
            /**
             * 每一次走到ACTION_DOWN的方法时候,就获取当前绝对坐标值x,y
             */
            int x = (int) event.getRawX();
            int y = (int) event.getRawY();
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN:
                    lastX = x;
                    lastY = y;
                    inX = (int) event.getX();
                    inY = (int) event.getY();
                    break;
                case MotionEvent.ACTION_MOVE:
                    /**
                     * 获取当前手指移动的距离x,y的坐标值
                     * 并返回他们的绝对值大小,比较x,y中哪个数值比较大,
                     * 并判断当前最大的数值是否我们定义的点击事件容差距离TOUCH_SLOP大,
                     * 如果小,就是点击事件,如果大,就是移动事件。
                     */
                    final int diff = Math.max(Math.abs(lastX - x), Math.abs(lastY - y));
                    if (diff < TOUCH_SLOP) {
                        return false;
                    }
                    //如果此时控件的横向移动距离desrX小于0的话,就默认左边left为0;
                    if (x - inX <= 0) {
                        destX = 0;
                        //如果此时控件的横向移动距离大于整个屏幕的宽度的话,就让其左边left距离为ScreenUtil.screenWidth - view.getWidth()
                    } else if (x - inX + getWidth() >= screenWidth) {
                        destX = screenWidth - getWidth();
                        //如果都不是,则横向移动距离等于left.
                    } else {
                        destX = x - inX;
                    }

                    //如果此时控件的纵向移动距离destY小于0的话,就默认顶部top为20
                    if (y - inY <= 0) {
                        destY = 0;
                        //如果此时控件的纵向移动距离大于整个屏幕的高度的话,就让其顶部top距离为ScreenUtil.screenHeight - view.getHeight()
                    } else if (y - inY + getHeight() >= screenHeight - navBarHeight) {
                        destY = screenHeight - getHeight() - navBarHeight;
                    } else {
                        //如果都不是,则纵向移动距离等于left.
                        destY = y - inY;
                    }

                    /**
                     * 这里需要注意是和父容器的布局想对应的
                     */
                    FrameLayout.LayoutParams params = (FrameLayout.LayoutParams) getLayoutParams();
                    params.gravity = Gravity.NO_GRAVITY;
                    params.leftMargin = destX;
                    params.topMargin = destY;
                    setLayoutParams(params);
                    break;
                case MotionEvent.ACTION_UP:
                    //这里做动画贴边效果
                    FrameLayout.LayoutParams params1 = (FrameLayout.LayoutParams) getLayoutParams();
                    float centerX = getX() + getWidth() / 2;
                    if (centerX > screenWidth / 2) {
                        params1.leftMargin = screenWidth - getWidth();
                        params1.topMargin = getTop();
                        setLayoutParams(params1);
                    } else {
                        params1.leftMargin = 0;
                        params1.topMargin = getTop();
                        setLayoutParams(params1);
                    }
                    break;
            }
            return true;
        }
        return false;
    }

注释都已经写的很详细了,随时就能拿来用,相信大家都能看懂,思想就是去不断改变view自身在父布局的位置,从而达到移动效果,这里实现了一个简单的贴边。这里我使用的是NoActionBar的AppTheme。其他的可能触摸点有偏移,内部修改一下逻辑就行了,这是推荐的,算是比较稳定的。还有第三种。

1 . 使用DrapHelp去实现。

这里给大家推荐鸿洋博客https://blog.csdn.net/lmj623565791/article/details/46858663
主要注意的是,这是是ViewGroup对每个子View进行处理,不能像上面一样单独的View就能实现移动逻辑。
注意鸿洋博客的里面关于ViewDrapHelpCallback里面回调的方法

  • onViewDragStateChanged

当ViewDragHelper状态发生变化时回调(IDLE,DRAGGING,SETTING[自动滚动时])

  • onViewPositionChanged

当captureview的位置发生改变时回调

  • onViewCaptured

当captureview被捕获时回调

  • onViewReleased 已用

  • onEdgeTouched

当触摸到边界时回调。

  • onEdgeLock

true的时候会锁住当前的边界,false则unLock。

  • onEdgeDragStarted 已用

  • getOrderedChildIndex

改变同一个坐标(x,y)去寻找captureView位置的方法。(具体在:findTopChildUnder方法中)

  • getViewHorizontalDragRange 已用

  • getViewVerticalDragRange 已用

  • tryCaptureView 已用

  • clampViewPositionHorizontal 已用

  • clampViewPositionVertical 已用

Ok,关于可移动View的介绍就到这里。欢迎大家浏览github请戳这里

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,524评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,869评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,813评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,210评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,085评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,117评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,533评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,219评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,487评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,582评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,362评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,218评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,589评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,899评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,176评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,503评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,707评论 2 335

推荐阅读更多精彩内容