自定义gridView仿头条频道拖动管理

于 2019-12-24 21:39:58 发布
阅读量358 收藏 2
点赞数
分类专栏： android自定义view 文章标签： android 拖动gridview
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014763302/article/details/103682923
版权

项目中遇到这样个需求：app的功能导航需要可拖动排序，类似头条中的频道拖动管理。效果如下，gif不是很顺畅，真机会好很多。
在这里插入图片描述
虽然类似的文章网上搜一下有很多，但写的都不令人满意，注释不清晰，而且动画还不够流畅。经本人整理优化后，拿出来供后续有需要的使用。

实现原理：

  • gridView作为基本控件
  • WindowManager.addView的方式实现可拖动的view
  • TranslateAnimation实现移动动画，动画完后更新adapter即可

主要的实现原理上面已经说明，源码中关键的地点也有注释，因此下面直接上源码。

package com.hai.draggrid;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.PixelFormat;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.GridView;
import android.widget.ImageView;

/**
 * 长按拖动图标可以调整item位置的Gridview
 * Created by huanghp on 2019/10/15.
 * Email h1132760021@sina.com
 */
public class DragGridView extends GridView {
    private static final String TAG = "DragGridView";
    private int downX, downY;
    private int rawX, rawY;
    private int lastPosition = INVALID_POSITION;

    private int viewL, viewT;
    private int itemHeight, itemWidth;
    private int itemCount;

    private double dragScale = 1.2D;//拖动view的放大比例

    private ImageView dragImageView;
    private WindowManager windowManager = null;
    private WindowManager.LayoutParams windowParams = null;

    private boolean isMoving = false;
    private Animation lastAnimation;
    private static final long TIME_ANIMATE = 300;

    public DragGridView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public DragGridView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        setOnItemLongClickListener(new OnItemLongClickListener() {
            @Override
            public boolean onItemLongClick(AdapterView<?> parent, View view, int position, long id) {
                lastPosition = position;

                View dragView = getChildAt(lastPosition - getFirstVisiblePosition());
                itemHeight = dragView.getHeight();
                itemWidth = dragView.getWidth();
                itemCount = getCount();
                int rows = itemCount / getNumColumns();// 算出行数
                int left = (itemCount % getNumColumns());// 算出最后一行多余的数量

                if (lastPosition != INVALID_POSITION) {
                    viewL = downX - dragView.getLeft();
                    viewT = downY - dragView.getTop();
                    dragView.destroyDrawingCache();
                    dragView.setDrawingCacheEnabled(true);
                    Bitmap bitmap = Bitmap.createBitmap(dragView.getDrawingCache());
                    startDrag(bitmap);

                    dragView.setVisibility(INVISIBLE);
                    isMoving = false;
                    ((Adapter) getAdapter()).setIsDrag(true);
                    requestDisallowInterceptTouchEvent(true);
                    return true;
                }
                return false;
            }
        });
    }

    private void startDrag(Bitmap dragBitmap) {
        stopDrag();
        windowParams = new WindowManager.LayoutParams();
        windowParams.gravity = Gravity.TOP | Gravity.LEFT;
        //得到preview左上角相对于屏幕的坐标
        windowParams.x = rawX - viewL;
        windowParams.y = rawY - viewT;
        //设置拖拽item的宽和高
        windowParams.width = (int) (dragScale * dragBitmap.getWidth());// 放大dragScale倍，可以设置拖动后的倍数
        windowParams.height = (int) (dragScale * dragBitmap.getHeight());// 放大dragScale倍，可以设置拖动后的倍数
        this.windowParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE
                | WindowManager.LayoutParams.FLAG_NOT_TOUCHABLE
                | WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON
                | WindowManager.LayoutParams.FLAG_LAYOUT_IN_SCREEN;
        this.windowParams.format = PixelFormat.TRANSLUCENT;
        this.windowParams.windowAnimations = 0;
        ImageView iv = new ImageView(getContext());
        iv.setImageBitmap(dragBitmap);
        windowManager = (WindowManager) getContext().getSystemService(Context.WINDOW_SERVICE);
        windowManager.addView(iv, windowParams);
        dragImageView = iv;
    }

    private void stopDrag() {
        if (dragImageView != null && windowManager != null) {
            windowManager.removeView(dragImageView);
            dragImageView = null;
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent ev) {
        int x = (int) ev.getX();
        int y = (int) ev.getY();
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                downX = x;
                downY = y;
                rawX = (int) ev.getRawX();
                rawY = (int) ev.getRawY();
                break;
            case MotionEvent.ACTION_MOVE:
                if (dragImageView != null && lastPosition != INVALID_POSITION) {
                    updateDrag((int) ev.getRawX(), (int) ev.getRawY());
                    if (!isMoving) onMove(x, y, false);
                }
                break;
            case MotionEvent.ACTION_UP:
//                Log.e(TAG, "dragImageView is null=" + (dragImageView == null) + ",lastposition=" + lastPosition
//                        + ",pointToPosition=" + pointToPosition(x, y) + ",ismove=" + isMoving);
                if (dragImageView != null && lastPosition != INVALID_POSITION) {
//                    if (isMoving) onMove(x, y, true);//动画还未执行完的情况下，重设动画会清除之前设置的动画。
                    stopDrag();
                    ((Adapter) getAdapter()).setIsDrag(false);
                    ((BaseAdapter) getAdapter()).notifyDataSetChanged();
                    requestDisallowInterceptTouchEvent(false);
                }
                break;
        }
        return super.onTouchEvent(ev);
    }

    private void onMove(int moveX, int moveY, boolean isMoveUp) {
        final int targetPosition = pointToPosition(moveX, moveY);
        if (targetPosition != INVALID_POSITION) {
            if (targetPosition == lastPosition) {
                //移动位置在还未到新item内
                return;
            }
            //移需要移动的动ITEM数量
            int moveCount = targetPosition - lastPosition;
            if (moveCount != 0) {
                if (isMoveUp) {//手指抬起时，不执行动画直接交换数据
                    Adapter adapter = (Adapter) getAdapter();
                    adapter.exchange(lastPosition, targetPosition);
                    lastPosition = targetPosition;
                    isMoving = false;
                } else {
                    int moveCountAbs = Math.abs(moveCount);
                    float toXvalue = 0, toYvalue = 0;
                    //moveXP移动的距离百分比（相对于自己长度的百分比）
                    float moveXP = ((float) getHorizontalSpacing() / (float) itemWidth) + 1.0f;
                    float moveYP = ((float) getVerticalSpacing() / (float) itemHeight) + 1.0f;
                    int holdPosition;
//                    Log.d(TAG, "start annimation=" + moveCountAbs);
                    for (int i = 0; i < moveCountAbs; i++) {
                        //从左往右，或是从上往下
                        if (moveCount > 0) {
                            holdPosition = lastPosition + i + 1;
                            //同一行
                            if (lastPosition / getNumColumns() == holdPosition / getNumColumns()) {
                                toXvalue = -moveXP;
                                toYvalue = 0;
                            } else if (holdPosition % getNumColumns() == 0) {
                                toXvalue = (getNumColumns() - 1) * moveXP;
                                toYvalue = -moveYP;
                            } else {
                                toXvalue = -moveXP;
                                toYvalue = 0;
                            }
                        } else {
                            //从右往左，或是从下往上
                            holdPosition = lastPosition - i - 1;
                            if (lastPosition / getNumColumns() == holdPosition / getNumColumns()) {
                                toXvalue = moveXP;
                                toYvalue = 0;
                            } else if ((holdPosition + 1) % getNumColumns() == 0) {
                                toXvalue = -(getNumColumns() - 1) * moveXP;
                                toYvalue = moveYP;
                            } else {
                                toXvalue = moveXP;
                                toYvalue = 0;
                            }
                        }
                        View holdView = getChildAt(holdPosition);
                        Animation moveAnimation = createAnimation(toXvalue, toYvalue);
                        moveAnimation.setAnimationListener(new Animation.AnimationListener() {

                            @Override
                            public void onAnimationStart(Animation animation) {
                                isMoving = true;
                            }

                            @Override
                            public void onAnimationRepeat(Animation animation) {

                            }

                            @Override
                            public void onAnimationEnd(Animation animation) {
                                // 如果为最后个动画结束，那执行下面的方法
                                if (animation == lastAnimation) {
                                    Adapter adapter = (Adapter) getAdapter();
                                    adapter.exchange(lastPosition, targetPosition);
                                    lastPosition = targetPosition;
                                    isMoving = false;
                                }
                            }
                        });
                        holdView.startAnimation(moveAnimation);
                        if (holdPosition == targetPosition) {
                            lastAnimation = moveAnimation;
                        }
                    }
                }
            }
        }
    }

    public Animation createAnimation(float toXValue, float toYValue) {
        TranslateAnimation mTranslateAnimation = new TranslateAnimation(
                Animation.RELATIVE_TO_SELF, 0.0F, Animation.RELATIVE_TO_SELF, toXValue,
                Animation.RELATIVE_TO_SELF, 0.0F, Animation.RELATIVE_TO_SELF, toYValue);
        mTranslateAnimation.setFillAfter(true);// 设置一个动画效果执行完毕后，View对象保留在终止的位置。
        mTranslateAnimation.setDuration(TIME_ANIMATE);
        return mTranslateAnimation;
    }

    private void updateDrag(int rawX, int rawY) {
        windowParams.alpha = 0.6f;
        windowParams.x = rawX - viewL;
        windowParams.y = rawY - viewT;
        windowManager.updateViewLayout(dragImageView, windowParams);
    }

    static abstract class Adapter extends BaseAdapter {
        protected boolean isDrag;
        protected int holdPosition = -1;

        public void setIsDrag(boolean isDrag) {
            this.isDrag = isDrag;
        }

        public void exchange(int startPosition, int endPositon) {
            holdPosition = endPositon;
        }
    }
}

主要的代码就是DragGridView，拿到此view实现起来就相当简单了。为了文章完整性，下面也贴上本效果图的主要使用代码。

String[] items = new String[]{"头条", "视频", "娱乐", "体育", "北京", "新时代"
            , "网易号", "段子", "冰雪运动", "科技", "汽车", "轻松一刻"
            , "时尚", "直播", "图片", "跟帖", "NBA", "态度公开课"
            , "推荐", "热点", "社会", "趣图", "美女", "军事"};
            
gridView.setAdapter(new DragGridView.Adapter() {
            @Override
            public void exchange(int startPosition, int endPositon) {
                super.exchange(startPosition, endPositon);
                String item = list.get(startPosition);
                if (startPosition < endPositon) {
                    list.add(endPositon + 1, item);
                    list.remove(startPosition);
                } else {
                    list.add(endPositon, item);
                    list.remove(startPosition + 1);
                }
                for (int i = 0; i < list.size(); i++) {
                    Log.e(TAG, "exchange: =" + list.get(i));
                }
                notifyDataSetChanged();
            }
			...省略部分代码
            @Override
            public View getView(int position, View convertView, ViewGroup parent) {
                //todo,这里需要优化，没有复用views。也不能按传统方式服用view，否则会造成拖动的view空白
//                if (convertView == null) {
                convertView = getLayoutInflater().inflate(R.layout.item, parent, false);
//                }
                ((TextView) convertView.findViewById(R.id.tv)).setText(getItem(position));
                if (isDrag && position == holdPosition) {
                    convertView.setVisibility(View.INVISIBLE);
                } else convertView.setVisibility(View.VISIBLE);

                return convertView;
            }
        });

本文到这就结束了，有需要的同学拿到轮子就可以直接使用了，谢谢！
不知道有没有眼尖的同学发现Adapterd的getView方法中有个 todo需要优化。原因是这样：如果打开注释中的代码，复用convertView，会造成gridView释放后的新位置一片空白，不知道什么原因，因此折中的方法就是每次都是新生成一个convertView。
希望路过的各位大神知道的可以帮忙完成这个todo，thanks ！

梦天2015
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
Android 仿今日头条频道管理，可拖动item进行排列，删除添加
05-31
仿今日头条频道管理，可拖动item进行排列，删除添加，Android实现demo
Android 频道管理----高仿 网易、今日头条 （可以拖动的GridView）demo
03-22
Android 高仿 频道管理----网易、今日头条（可以拖动的GridView）demo
Android 仿今日头条频道管理（下）（GridView之间Item的移动和拖拽）
aoe41606的博客
07-03 266
前言 上篇博客我们说到了今日头条频道管理的操作交互体验，我也介绍了2个GridView之间Item的相互移动。详情请參考：Android 仿今日头条频道管理（上）（GridView之间Item的移动和拖拽） 今天把相对照较复杂的gridView的拖拽也记录下。在開始之前我们事先要了解下Android的事件分发机制。网上这方面的资料也比較多。由于自己定义控件大部分要用到事件分发...
Android 仿今日头条、网易新闻的频道管理
万物weiyi
09-18 7915
最近做新闻类型的项目，用到了频道管理，点击删除排序，拖动排序。来分享一下下面上代码：MainActivity 布局<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.an
DayTopNewsChangeTabs-仿今日头条、网易新闻首页动态添加tab，并实现拖拽排序，编辑等.zip
09-24
仿今日头条、网易新闻首页动态添加tab，并实现拖拽排序，编辑等
Android自定义gridView仿头条频道拖动管理功能
08-25
实现Android自定义`GridView`仿头条频道拖动管理功能的关键在于理解触摸事件的处理，合理使用`WindowManager`，以及恰当的动画效果。通过这些技术手段，我们可以创建出具有类似头条应用中频道拖动管理功能的界面，...
Android 仿今日头条频道管理 （全）（GridView的Item移动、拖拽）
01-09
在Android开发中，实现类似今日头条频道管理功能，涉及到的关键技术是GridView的自定义与拖拽交互。本项目名为"MyDragGridViewDemo"，旨在提供一种用户可以自由调整频道顺序的交互体验，通过拖拽GridView中的Item来...
仿新闻类频道管理（gridview）
10-26
在本项目中，我们关注的是一个名为"仿新闻类频道管理（gridview）"的实现，它利用了Android的GridView控件，并且具有拖拽排序的功能，还加入了动画效果，使得用户体验更加生动。下面将详细讲解这个项目中的关键知识...
android 高仿 频道管理----网易、今日头条、腾讯视频 （可以拖动的GridView）
05-05
这次实现的功能是很多新闻阅读器（网易，今日头条，360新闻等）以及腾讯视频等里面都会出现的频道管理功能。 对应博文地址:http://blog.csdn.net/vipzjyno1/article/details/25005851
仿今日头条频道编辑，带数据库，可实现频道更改后存储
01-16
仿今日头条频道编辑，带数据库，可实现频道更改后存储，下载后击能用了。滑动效果很棒
Android 仿zaker效果的拖拽排序.zip
07-10
Android 仿zaker效果的拖拽排序可以动态设置列数，动态增加或者减少item，当一页填满自动增加到下一页，当页数大于1，可以左右翻页。
Android RecyclerView仿新闻头条的频道管理功能
08-30
主要介绍了Android RecyclerView仿新闻头条的频道管理功能,需要的朋友可以参考下
仿头条、网易新闻频道管理
11-20
移动端 频道管理拖动、随意编排你想要的频道，筛选你感性群的内容
Android 防今日头条频道管理（GridView的Item移动、拖拽）
01-08
Android 防今日头条频道管理功能、实现GridView之间的Item的移动、效果超赞、后续带来Item拖拽的功能。详情见博客：http://blog.csdn.net/u011916937
Android 频道管理(简单)
吃鱼的博客
11-22 872
1 导入依赖 compile 'com.github.andyoom:draggrid:v1.0.1' maven { url &quot;https://jitpack.io&quot; } ----------&amp;gt; （在项目的build.gradle导入） allprojects { repositories { google() jcenter() ...
Android 仿今日头条频道管理（GridView之间Item的移动和拖拽）
shenggaofei的博客
06-07 3770
很多博客上都有类似今日头条的一些案例，频道管理GridView之间的拖拽移动，flowtaglayouttaglayout流式布局等不相上下，下面我们来看看这次的效果： 上图是2个gridview组成、2个gridview之间的Item是可以相互更换的、而且我的频道的Item是可以拖拽进行排序。仔细观察、今日头条有些细节做的的非常好，当一个gridview1的item移动到另一个...
Android 仿今日头条的频道管理
xiaozhang0414的博客
05-04 2774
//主布局 activity_main.xml<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:l
Android使用RecyclerView实现今日头条频道管理功能
01-20
使用过今日头条的伙计们对这个效果肯定很熟悉。拖拽可排序，点击标签后可以删除。今天我们采用RecyclerView来实现。 实现思路： 通过ItemTouchHelper来绑定RecyclerView的子控件触摸事件。 当滑动拖拽的时候，通知适配器来交换两个子控件的显示位置。 更改数据源，使数据源与子空间显示内容一致。 这就是实现的基本思路，是不是很简单?当然，首先要了解一下ItemTouchHelper这哥们儿是干啥的，有什么作用。 This is a utility class to add swipe to dismiss and drag & drop support to Recyc
asp自定义GridView Columns
最新发布
05-25
ASP.NET GridView 控件可以通过绑定数据源来自动生成列，但如果需要自定义列的样式、行为或内容，可以使用自定义列的方式来实现。 以下是一些常见的自定义列方式： 1. TemplateField：通过在GridView 中添加 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值