图片拖拽排序自定义控件实现（gallery、custom ViewGroup）

最新推荐文章于 2022-09-22 08:53:18 发布
最新推荐文章于 2022-09-22 08:53:18 发布
阅读量348 收藏 1
点赞数
分类专栏： 自定义ViewGroup 文章标签： 拖拽 排序 自定义容器 动画
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/mjlong123123/article/details/102808194
版权

一、实现效果

 

二、应用到的主要技术点

  1. android:animateLayoutChanges="true"设置这个属性有效。主要的作用是当childView 显示位置发生变化时，系统自动播放动画。
  2. 自定义ViewGroup要求我们自己实现onMeasure和onLayout控制childView的大小和显示位置。
  3. 重写onInterruptTouchEvent方法判断自定义ViewGroup是否需要截断事件，判断依据是是否有有效滑动距离产生。
  4. 重写onTouchEvent方法实现childViewd的拖拽显示（拖拽的是childView的截图）。
  5. 重写draw方法用于绘制被拖拽的childView截图。（注意：在自定义ViewGroup初始化阶段要调用setWillNotDraw(false);关闭系统的绘制优化，否则ViewGroup接到invalidate事件后，draw方法不会被调用）
  6. 调用childView.getDrawingCache()创建childView截图。

三、实现细节

1.通过重写onMeasure和onLayout方法控制childView显示大小和位置。


    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int childCount = getChildCount();
        int width = MeasureSpec.getSize(widthMeasureSpec);
        int height = MeasureSpec.getSize(heightMeasureSpec);
        //由于需要支持RTL布局，所以开始布局的横坐标根据padding而不同。
        int statLeft = Build.VERSION.SDK_INT < 17 ? getPaddingLeft() : getPaddingStart();
        int starTop = getPaddingTop();
        //布局第一个大图
        if (childCount > 0) {
            View childView = getChildAt(0);
            LayoutParameter layoutParameter = (LayoutParameter) childView.getLayoutParams();
            //view的宽度是等于容器的宽度减掉容器的padding，高度等于跨度
            int childWidth = width - getPaddingLeft() - getPaddingRight();
            childView.measure(MeasureSpec.makeMeasureSpec(childWidth, EXACTLY), MeasureSpec.makeMeasureSpec(childWidth, EXACTLY));
            //在自定义的LayoutParameter中保存view显示的位置，在onLayout阶段可以直接使用这个数据进行布局。
            layoutParameter.left = statLeft;
            layoutParameter.top = starTop;
            layoutParameter.right = layoutParameter.left + childView.getMeasuredWidth();
            layoutParameter.bottom = layoutParameter.top + childView.getMeasuredHeight();
            starTop = layoutParameter.bottom;
        }
        starTop += divideSpace;
        //计算第二行小图的宽度，排除容器的padding和小图间的空隙进行4等分
        int secondLineChildWidth = width - getPaddingLeft() - getPaddingRight() - secondLineLeftSpace - secondLineRightSpace - (secondLineDivideSpace * 3);
        secondLineChildWidth /= 4;

        bitmapRect.set(0, 0, secondLineChildWidth, secondLineChildWidth);

        statLeft = Build.VERSION.SDK_INT >= 17 ? getPaddingStart() : getPaddingLeft();
        statLeft += secondLineLeftSpace;
        //RTL布局排列第二行的小图
        if (Build.VERSION.SDK_INT >= 17 && getLayoutDirection() == LAYOUT_DIRECTION_RTL) {
            for (int i = childCount - 1; i > 0; i--) {
                View childView = getChildAt(i);
                LayoutParameter layoutParameter = (LayoutParameter) childView.getLayoutParams();
                //小图的宽高也是相等的。
                childView.measure(MeasureSpec.makeMeasureSpec(secondLineChildWidth, EXACTLY), MeasureSpec.makeMeasureSpec(secondLineChildWidth, EXACTLY));
                layoutParameter.left = statLeft;
                layoutParameter.top = starTop;
                layoutParameter.right = layoutParameter.left + childView.getMeasuredWidth();
                layoutParameter.bottom = layoutParameter.top + childView.getMeasuredHeight();
                statLeft = layoutParameter.right;
                statLeft += secondLineDivideSpace;
            }
        } else {
            //LTR布局排列第二行
            for (int i = 1; i < childCount; i++) {
                View childView = getChildAt(i);
                LayoutParameter layoutParameter = (LayoutParameter) childView.getLayoutParams();
                childView.measure(MeasureSpec.makeMeasureSpec(secondLineChildWidth, EXACTLY), MeasureSpec.makeMeasureSpec(secondLineChildWidth, EXACTLY));
                layoutParameter.left = statLeft;
                layoutParameter.top = starTop;
                layoutParameter.right = layoutParameter.left + childView.getMeasuredWidth();
                layoutParameter.bottom = layoutParameter.top + childView.getMeasuredHeight();
                statLeft = layoutParameter.right;
                statLeft += secondLineDivideSpace;
            }
        }
        //设置容器的大小
        setMeasuredDimension(width, height);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {
        int childCount = getChildCount();
        View childView;
        LayoutParameter layoutParameter;
        for (int i = 0; i < childCount; i++) {
            childView = getChildAt(i);
            layoutParameter = (LayoutParameter) childView.getLayoutParams();
            //根据onMeasure阶段保存的位置数据进行布局
            childView.layout(layoutParameter.left, layoutParameter.top, layoutParameter.right, layoutParameter.bottom);
        }
    }

2.重写onInterruptTouchEvent和onTouchEvent方法实现childView的拖拽。


    @Override
    public boolean onInterceptTouchEvent(MotionEvent ev) {
        int action = ev.getActionMasked();
        switch (action) {
            case MotionEvent.ACTION_DOWN: {
                startX = 0;
                startY = 0;
                int x = (int) ev.getX();
                int y = (int) ev.getY();
                //根据坐标点找到对应的childView
                dragView = findViewByPosition(x, y);
                Log.d(TAG, "onInterceptTouchEvent ACTION_DOWN dragView " + dragView);
                if (dragView != null) {
                    Object object = dragView.getTag();
                    boolean canMove = false;
                    if (object != null && object instanceof Holder) {
                        canMove = ((Holder) object).canMove();
                    }
                    Log.d(TAG, "onInterceptTouchEvent ACTION_DOWN canMove " + canMove);
                    //如果找到的childView是可以移动的，那么保存当前的坐标。
                    if (canMove) {
                        Log.d(TAG, "onInterceptTouchEvent ACTION_DOWN find a view");
                        startX = x;
                        startY = y;
                    }
                }
                break;
            }
            case MotionEvent.ACTION_MOVE: {
                //其中有一个变量不为空，说明找到的childView是可移动的
                if (startX != 0 || startY != 0) {
                    int x = (int) ev.getX();
                    int y = (int) ev.getY();
                    //如果是长按或是移动距离发生溢出，我们启动childView拖拽功能。
                    if (ev.getEventTime() - ev.getDownTime() >= ViewConfiguration.getLongPressTimeout() || Math.abs(startX - x) > touchSlop || Math.abs(startY - y) > touchSlop) {
                        Log.d(TAG, "onInterceptTouchEvent ACTION_MOVE start move");
                        touchMode = TouchMode.DRAG;
                        //不允许其他控件进行事件截断。
                        requestDisallowInterceptTouchEvent(true);
                        lastX = x;
                        lastY = y;
                        //启动拖拽功能。
                        buildDragBitmap(x, y);
                    }
                }
                break;
            }
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                //重置拖拽参数、
                resetDragBitmap();
                break;
        }

        return touchMode == TouchMode.DRAG;
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        int action = event.getActionMasked();
        switch (action) {
            case MotionEvent.ACTION_DOWN:
                return true;
            case MotionEvent.ACTION_MOVE: {
                int x = (int) event.getX();
                int y = (int) event.getY();

                if (touchMode == TouchMode.DRAG && (Math.abs(x - lastX) > 5 || Math.abs(y - lastY) > 5)) {
                    Log.d(TAG, "onTouchEvent ACTION_MOVE ===========");
                    //移动childView的截图
                    moveDragBitmap(x - lastX, y - lastY);
                    lastX = x;
                    lastY = y;
                }
                break;
            }
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                touchMode = TouchMode.NORMAL;
                //重置拖拽参数。
                resetDragBitmap();
                break;
        }

        return touchMode == TouchMode.DRAG;
    }

3.在开始拖拽的时候通过调用getDrawingCache创建childView截图并播放动画。


    private void buildDragBitmap(float x, float y) {
        dragBitmap = null;
        if (dragView == null) {
            Log.d(TAG, "buildDragBitmap dragView == null!!!");
            return;
        }
        Object obj = dragView.getTag();
        if (obj != null && obj instanceof Holder) {
            ((Holder) obj).beforeHideView();
        }
        //销毁老的drawing cache
        dragView.destroyDrawingCache();
        dragView.setDrawingCacheEnabled(true);
        //获取新的截图
        Bitmap bitmap = dragView.getDrawingCache();
        int offsetX = 0;
        int offsetY = 0;
        if (bitmap != null) {
            int width = bitmap.getWidth();
            int height = bitmap.getHeight();
            Matrix matrix = new Matrix();
            matrix.setScale(bitmapRect.width() * 1.0f / width, bitmapRect.height() * 1.0f / height);
            //根据要求的大小生成截图
            dragBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
            offsetX = (width - dragBitmap.getWidth()) / 2;
            offsetY = (height - dragBitmap.getHeight()) / 2;
        }
        if (dragBitmap == null) {
            Log.d(TAG, "buildDragBitmap dragBitmap == null!!!");
            return;
        }
        if (obj != null && obj instanceof Holder) {
            ((Holder) obj).hideView(indexOfChild(dragView));
        }
        dragBitmapWidth = dragBitmap.getWidth();
        dragBitmapHeight = dragBitmap.getHeight();
        //因为截图大小发生了变化，所以需要计算截图显示位置。
        dragBitmapX = dragView.getLeft() + offsetX;
        dragBitmapY = dragView.getTop() + offsetY;

        dragOffsetX = dragBitmapX;
        dragOffsetY = dragBitmapY;

        animationOffsetX = 0;
        animationOffsetY = 0;
        //播放动画显示childView到截图大小和位置的变化
        startAnimation(dragView.getLeft() + ((dragView.getWidth() - dragBitmapWidth) / 2.0f), x - (dragBitmapWidth / 2.0f), dragView.getTop() + ((dragView.getHeight() - dragBitmapHeight) / 2.0f),
                y - (dragBitmapHeight / 2.0f), dragView.getWidth() * 1.0f / dragBitmapWidth, 1.0f, null, startAnimationDuration);
    }

4.接收ACTION_MOVE事件更新childView的截图显示位置，拖动过程中判断是否更改childView的顺序。


    private void moveDragBitmap(float dx, float dy) {
        //如果正在播放动画则不处理移动事件
        if (animationIsRunning) {
            animationOffsetX += dx;
            animationOffsetY += dy;
            return;
        }
        //更新childView截图显示问题
        dragBitmapX += dx;
        dragBitmapY += dy;
        dragOffsetX += dx;
        dragOffsetY += dy;
        invalidate();
        if (dragView == null) {
            Log.d(TAG, "moveDragBitmap dragView == null");
            return;
        }
        currentTime = System.currentTimeMillis();
        //进行childView的重排序，判断是否重排序的时间间隔是300ms
        if (currentTime - lastFindIntersectTime < 300) {
            Log.d(TAG, "moveDragBitmap currentTime - lastFindIntersectTime < 300");
            return;
        }
        lastFindIntersectTime = currentTime;
        //找到截图下方重合的childView
        View childView = findViewByPosition((int) dragOffsetX + (dragBitmapWidth / 2), (int) dragOffsetY + (dragBitmapHeight / 2));
        if (childView == null) {
            Log.d(TAG, "moveDragBitmap childView == null");
            return;
        }
        //判断是否是上次获取的childView
        if (intersectView != null && intersectView == childView) {
            Log.d(TAG, "moveDragBitmap intersectView == childView");
            return;
        }
        Object object = childView.getTag();
        if (object != null && object instanceof Holder && !((Holder) object).canMove()) {
            Log.d(TAG, "moveDragBitmap child can not move");
            return;
        }
        intersectView = childView;
        //获取相交childView的index
        int intersectIndex = indexOfChild(intersectView);
        //获取被拖拽的childView的index
        int dragIndex = indexOfChild(dragView);
        if (intersectIndex < 0 || dragIndex < 0 || intersectIndex == dragIndex) {
            Log.d(TAG, "moveDragBitmap intersectIndex < 0 || dragIndex < 0 || intersectIndex == dragIndex");
            return;
        }
        //进行childView排序，同时系统的layout change animation开始播放。
        removeView(dragView);
        addView(dragView, intersectIndex);
    }

5.拖拽childView截图的描绘


    private void drawDragBitmap(Canvas canvas) {
        if (dragBitmap != null) {
            canvas.save();
            dragMatrix.reset();
            //如果正在播放拖拽开始动画，要将位移动画的数值计算在内
            if (animationIsRunning) {
                if (animationRequestFinished) {
                    dragOffsetX += animationOffsetX;
                    dragOffsetY += animationOffsetY;
                    dragMatrix.setTranslate(dragOffsetX, dragOffsetY);
                    animationIsRunning = false;
                    animationRequestFinished = false;
                    animationOffsetX = 0;
                    animationOffsetY = 0;
                } else {
                    dragMatrix.setTranslate(dragOffsetX + animationOffsetX, dragOffsetY + animationOffsetY);
                }
            } else {//没有播放动画时直接根据拖拽的位置描绘
                dragMatrix.setTranslate(dragOffsetX, dragOffsetY);
            }
            //设置缩放比例
            dragMatrix.preScale(dragScale, dragScale, dragBitmapWidth / 2.0f, dragBitmapHeight / 2.0f);
            //应用变换矩阵并描绘截图
            canvas.concat(dragMatrix);
            canvas.drawBitmap(dragBitmap, 0, 0, paint);
            canvas.restore();
        }
    }

6.拖拽结束播放结束动画


    private void resetDragBitmap() {
        if (dragView == null) {
            return;
        }
        startAnimation(dragOffsetX, dragView.getLeft() + (dragView.getWidth() / 2.0f) - (dragBitmapWidth / 2.0f), dragOffsetY,
                dragView.getTop() + (dragView.getHeight() / 2.0f) - (dragBitmapHeight / 2.0f), dragScale, dragView.getWidth() * 1.0f / dragBitmapWidth, new Runnable() {
                    @Override
                    public void run() {
                        if (dragView != null) {
                            Object obj = dragView.getTag();
                            if (obj != null && obj instanceof Holder) {
                                ((Holder) obj).showView(indexOfChild(dragView));
                            }
                        }
                        dragBitmap = null;
                        dragView = null;
                        intersectView = null;
                        notifyAllHolderChange();
                        invalidate();
                    }
                }, endAnimationDuration);
    }

四、代码

https://github.com/mjlong123123/SortLayout

我的公众号已经开通，公众号会同步发布。
欢迎关注我的公众号

​​​​​​​

 

自定义安卓拖拽动画排序ViewGroup
weixin_38282516的博客
04-15 718
本代码通过OnDragListener实现安卓的拖拽。 OnDragListener API 11 加⼊入的⼯工具类，⽤用于拖拽操作。 使⽤用场景:⽤用户的「拖起 -> 放下」操作，重在内容的移动。可以附加拖拽数据 不不需要写⾃自定义 View，使⽤用 startDrag() / startDragAndDrop() ⼿手动开启拖拽 拖拽的原理理是创造出⼀一个图像在屏幕的最上层，⽤用户的⼿手...
Android 图片可拖拽排序
08-23
编辑个人资料，图片可拖拽排序。有点像可拖拽的gridView，但是会更流畅。
树型控件拖拽排序
weixin_34212189的博客
06-21 1011
上次分享了“一个可以拖拽的异步按需加载树”，但没有实现拖拽后更新数据库，今天抽空把他实现了，这里分享下思路及关键代码。 拖拽方法入口： function onDrop(event, treeId, treeNodes, targetNode, moveType, isCopy) { if (targetNode != null) { ...
自定义控件——可拖拽排序的ListView
热门推荐
Ralap Zhong的专栏
05-12 1万+
前言最经研究了一下拖拽排序的ListView，跟酷狗里的播放列表排序一样，但因为要添加自己特有的功能，所以研究了好长时间。一开始接触的是GitHub的开源项目——DragSortListView，实现的效果和流畅度都很棒。想根据他的代码自己写一个，但代码太多了，实现的好复杂，看别人的代码你懂的了，就去尝试寻找其他办法。最后还是找到了更简单的实现方法，虽然跟开源项目比要差一点，但对我来说可以了，最重要
Android控件之Gallery实现图片列表
{丸の子}
07-18 192
先来看下运行效果: [img]http://dl.iteye.com/upload/attachment/519668/ca23a5bc-e55e-31c0-9b46-c9a40c6eaa3b.jpg[/img] 费话不多说，直接看代码........... values/attrs.xml: [code="java"] [/code] ...
图片+文字自定义控件的实现
03-04
本文将深入探讨如何利用Gallery组件来实现一个图片加文字的自定义控件。Gallery是一个Android提供的水平滚动视图，通常用于展示一系列的图片，用户可以左右滑动浏览。我们将结合文字展示，使其功能更加强大。 首先...
掌握Android Gallery自定义技巧：边框与底部小圆点
通过上述步骤，我们可以实现一个具有自定义边框和底部小圆点的Android Gallery控件，并且通过编程实现了自动切换的功能。这样的Gallery不仅外观更加美观，而且也提高了用户的交互体验。需要注意的是，在实际开发过程...
使用Gallery做出图片层叠效果
08-21
在Android开发中，`Gallery`控件是一种古老但功能强大的组件，主要用于展示一系列的视图，如图片或小图标，并允许用户左右滑动来选择不同的项目。本教程将深入讲解如何利用`Gallery`控件创建出类似iPhone音乐播放器...
自定义Adapter适合绝大多数情形的应用 ListView
08-30
本篇文章将深入探讨自定义Adapter在ListView上的应用，并且适用于GridView和Gallery等其他控件。 首先，Adapter是Android中的一个接口，用于将数据转化为可以在View中显示的格式。在ListView中，Adapter的主要任务...
android 循环gallery 选中放大 按键控制
07-01
在Android开发中，`Gallery`组件是一个非常有用的控件，它允许用户在多个项目之间进行水平滑动选择，常用于图像浏览或者选项选择等场景。本篇将详细讲解如何实现一个具有循环滚动、选中放大功能，并且可以使用按键...
Android 图片选择、预览、九宫格图片控件、拖拽排序九宫格图片控件
09-08
Android 图片选择、预览、九宫格图片控件、拖拽排序九宫格图片控件
可对列表自由拖拽排序的jQuery插件.zip
07-04
dragslot.js是一款可以对列表自由拖拽排序的jQuery插件。该插件主要的功能是实现了列表项可以在各个列表中相互拖拽. 对于像todo list, 分配任务列表都可以应用这个效果。
Android-DragGridView条目拖拽排序控件主要用于新闻条目
08-13
DragGridView 条目拖拽排序控件（主要用于新闻条目）
Android-Android图片选择预览九宫格图片控件拖拽排序九宫格图片控件
08-13
Android 图片选择、预览、九宫格图片控件、拖拽排序九宫格图片控件
自定义Gridview 拖动控件排序移动textview
12-22
自定义Gridview 拖动控件排序移动textview
android 控件拖拽功能,Android自定义图片拖拽控件
weixin_42355999的博客
05-25 896
效果图基本思路布局示意图我们先考虑简单的情况，两个控件之间的图片拖拽，首先我们需要准备ImageViewA和ImageViewB两个ImageView,然后在里面设置图片。接着我们需要考虑拖拽事件的触发条件，这里假设为手指从ImageView的某个边缘滑出一段距离即触发拖拽事件假设我们此时在ImageViewA的边缘向下滑动了一段距离，在触发拖拽事件的时候我们需要将ImageViewA的图片隐藏,...
最近写的一个控件——Well Swipe 拖拽排序实现
顾明伟
04-20 4186
Protocol Buffers protocol buffers 是一种平台无关的，中性的，可扩展机制的序列化结构化数据 What are protocol buffers？ Protocol
sortablejs拖拽排序插件
ICode联盟
09-22 206
功能强大的Javript拖拽排序库Sortable，拖拽兼容性好，零依赖。主要特色兼容性好-支持触屏设备和大部分浏览器简单-简单的API，方便使用原生-基于原生HTML5中的拖放APICSS框架兼容性-支持所有的css框架，像Bootstrap零依赖-不依赖Jquery等其他框架SPA支持良好-支持多种框架（angular、vue、react等）
一个流畅的拖动排序DragSortGridView,自动滚屏
虎躯一震的博客
06-03 8418
先上效果流畅效果超越了网易新闻和UC浏览器的栏目收藏.gif图和实际效果有差距1.拖拽可以移动item,并且其他item会立即自动补位,快速拖拽也非常流畅 2.item太多时,拖拽到边缘时会自动滚屏. 3.可以自定义被拖拽的的View放大,添加阴影等效果 4.长按启动删除模式,需要自己实现item的删除按钮展示,自己管理删除模式的切换 5.可以放在ScrollView中拖动排序,需要Scro
Android自定义控件深入：继承ViewGroup创建自定义容器
"Android自定义控件的进阶教程，主要关注如何通过继承ViewGroup来创建新的布局容器。" 在Android开发中，自定义控件能够极大地提升应用的用户体验和界面设计的灵活性。本节我们将深入探讨如何基于ViewGroup来创建...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

mjlong123123

你的鼓励时我创作最大的动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值