1、自定义GridLayout实现增加条目过度动画操作

public class MyGridLayout extends GridLayout {
public MyGridLayout(Context context) {
//super(context);
this(context,null);
}
public MyGridLayout(Context context, AttributeSet attrs) {
//super(context, attrs);
this(context,attrs,-1);
}
public MyGridLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
// 设置 GridLayout 中的条目增加过渡动画***********************
this.setLayoutTransition(new LayoutTransition());
}
}

2、创建条目

private void addTextView(String string) {
TextView textView = new TextView(getContext());
textView.setText(string);
textView.setTextColor(Color.BLACK);
textView.setBackgroundResource(R.drawable.shape_selecitem_black_bg);
textView.setGravity(Gravity.CENTER);
textView.setPadding(15, 5, 15, 5);
GridLayout.LayoutParams params = new LayoutParams();
params.setMargins(5, 5, 5, 5);
// 设置 params 给 TextView, 使用 margins 效果生效
textView.setLayoutParams(params);
// 将 textview 添加 Gridlayout 中展示
this.addView(textView);
}

3、拖拽效果的实现

3.1 设置条目的长按事件

  

public void addTextView(String string) {
....
// 设置 textview 的长按事件,实现拖拽效果
textView.setOnLongClickListener(longClickListener);
// 将 textview 添加 Gridlayout 中展示
this.addView(textView);
}

  3.2 长按事件中实现拖拽效果 

  

private OnLongClickListener longClickListener = new OnLongClickListener() {
// 长按控件调用的方法
// 参数:被长按的控件
@Override
public boolean onLongClick(View v) {
// 设置控件开始拖拽
// 参数 1 :拖拽要显示的数据,一般 null
// 参数 2 :拖拽显示的阴影样式 ,DragShadowBuilder(v): 根据拖拽的控件,设置拖拽阴影的样式效果
// 参数 3 :拖拽的控件的状态,一般 null
// 参数 4 :拖拽的其他设置的标示,一般 0
v.startDrag(null, new DragShadowBuilder(v), null, 0);
// 返回 true 表示处理长按事件, false 就是不处理
return true;
}
};

4、拖拽移动操作的实现

核心理念:根据 textview 创建矩形,矩形中包含有原先 textview 的左上角和右下角的坐标,移动的时候,判断按下的坐标是否在矩形的坐标内,如果在就说明移动到了相应的矩形的位置,也就是相应的 textview 的位置

/** 拖拽监听操作 **/
private OnDragListener dragListener = new OnDragListener() {
// 当拖拽操作执行的时候调用的方法
// 参数 1 :拖拽的控件
// 参数 2 :拖拽的事件
@Override
public boolean onDrag(View v, DragEvent event) {
switch (event.getAction()) {
case DragEvent.ACTION_DRAG_STARTED:// 开始拖拽
System.out.println(" 开始拖拽 ");
// 根据 textview 创建矩形
createRect();
break;
case DragEvent.ACTION_DRAG_ENTERED:// 开始拖拽控件后,进入拖拽控件范围事件
System.out.println(" 进入拖拽控件范围 ");
break;
case DragEvent.ACTION_DRAG_EXITED:// 开始拖拽控件后,离开拖拽控件范围事件
System.out.println(" 离开拖拽控件范围 ");
break;
case DragEvent.ACTION_DRAG_LOCATION:// 开始拖拽控件后,移动控件或者是拖拽控件执行的操作
System.out.println(" 拖拽控件移动 ");
// 根据拖拽的按下的坐标,获取拖拽控件移动的位置
int index = getIndex(event);
//MyGridLayout.this.getChildAt(index) != currentView : 判断移动到位置的 textview 和拖拽的 textview 是否一致,一致不进行移动,不一致进行移动操作
if (index != -1 && currentView != null && MyGridLayout.this.getChildAt(index) != currentView) {
// 实现 Gridlayout 的移动操作
// 将原来位置的拖拽的特性 tview 删除
MyGridLayout.this.removeView(currentView);
// 将拖拽的 textview 添加到移动的位置
MyGridLayout.this.addView(currentView, index);// 将 view 对象,添加到那个位置
}
break;
case DragEvent.ACTION_DRAG_ENDED:// 结束拖拽
System.out.println(" 结束拖拽 ");
// 设置拖拽的 textview 背景改为黑色边框的背景
if (currentView != null) {
currentView.setEnabled(true);
}
break;
case DragEvent.ACTION_DROP:// 结束拖拽,在控件范围内,松开手指,在控件范围外不执行操作
System.out.println(" 松开手指 ");
break;
}
return true;
}
};
/**
* 根据 textview 创建矩形
*
* 2016 年 12 月 30 日 上午 11:44:08
*/
protected void createRect() {
//getChildCount() : 获取 Gridlayout 的子控件的个数
rects = new Rect[this.getChildCount()];
// 根据孩子的个数,创建相应个数的矩形
for (int i = 0; i < this.getChildCount(); i++) {
// 根据子控件的索引,获取子控件的 view 对象
View view = this.getChildAt(i);
// 创建一个矩形
// 参数 1,2 :左上角的 x 和 y 的坐标
// 参数 3,4 :右下角的 x 和 y 的坐标
Rect rect = new Rect(view.getLeft(), view.getTop(), view.getRight(), view.getBottom());
// 保存到就行到数组中
rects[i] = rect;
}
}
/**
* 根据拖拽按下的坐标,获取拖拽控件移动的位置
*
* 2016 年 12 月 30 日 上午 11:50:20
*/
protected int getIndex(DragEvent event) {
for (int i = 0; i < rects.length; i++) {
// 判断按下的坐标是否包含在矩形的坐标范围内容
if (rects[i].contains((int)event.getX(), (int)event.getY())) {
return i;
}
}
return -1;
}

自定义GridLayout实现条目的拖动动画特效的更多相关文章

  1. [置顶] android 自定义ListView实现动画特效

    通过自定义ListView实现动画特效,被点击元素A向前移,A之前元素往后移动. 重点在于动画的实现: 具体代码如下: package com.open.widget; import java.uti ...

  2. paip.关于动画特效原理 html js 框架总结

    paip.关于动画特效原理 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对象 ...

  3. 10款基于jquery的web前端动画特效

    1.jQuery横向手风琴图片切换动画 之前我们为大家分享过很多款基于jQuery和CSS3的手风琴菜单和手风琴焦点图插件,比如CSS3响应式垂直手风琴菜单和jQuery横向手风琴图片展示插件.今天要 ...

  4. 分享8款令人惊叹的HTML5 Canvas动画特效

    HTML5的确可以制作出非常绚丽的网页动画效果,尤其是利用HTML5 Canvas特性和HTML5 3D特性,我们更加可以欣赏到超酷的动画特效.今天我从html5tricks网站上整理了8款令人惊叹的 ...

  5. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  6. 有时候就是看不进论文-jQuery动画特效篇&MySQL

    hi 早上知道新的乱斗模式后,没忍住开了几把,然后就无心论文了...用这个来破吧 1.jQuery -----动画特效----- ----调用show()和hide()方法显示和隐藏元素 show() ...

  7. 三、jQuery--jQuery基础--jQuery基础课程--第7章 jQuery 动画特效

    1.调用show()和hide()方法显示和隐藏元素 show()和hide()方法用于显示或隐藏页面中的元素,它的调用格式分别为:$(selector).hide(speed,[callback]) ...

  8. android游戏动画特效的一些处理

    游戏中避免不了需要一些动画特效的处理,有些是不方便用美术或者美工来处理的,那么就由我们程序猿来搞了.直接进入正题. 首先是Animation,Animation针对view,可以控制view的位移.缩 ...

  9. 9个超绚丽的HTML5 3D图片动画特效

    在Web 1.0时代,我们的网页中图片数量非常少,而且都是以静态图片为主.HTML5的出现,推动了Web 2.0的发展,同时也催生出了很多绚丽的HTML5图片动画特效,特别是有些还有3D的动画效果.本 ...

随机推荐

  1. Oracle多关键字查询

    因项目需要,在某查询页面的查询字段支持多关键字查询,支持空格隔开查询条件,故实现如下: 使用的原理是:ORACLE中的支持正则表达式的函数REGEXP_LIKE, '|' 指明两项之间的一个选择.例子 ...

  2. 在MyEclipse 2013中使用图形界面快速配置Struts2的操作方法

    Normal 0 7.8 磅 0 2 false false false EN-US ZH-CN X-NONE /* Style Definitions */ table.MsoNormalTable ...

  3. orchard相关网址

    1.官网文档  http://docs.orchardproject.net/ 2.github  https://github.com/OrchardCMS/Orchard 3.stackoverf ...

  4. Dos.ORM Select查询 自定义列

    自定义列 .Select( p = >new{ test = p.id}) // 同sql 列名 as 新列名 如下是 自己在写代码的例子,查询,分页,where条件,排序 var where ...

  5. 七、rdd究竟是什么

    RDD是个抽象类,定义了诸如map().reduce()等方法,但实际上继承RDD的派生类一般只要实现两个方法: def getPartitions: Array[Partition] def com ...

  6. GridView Tab/Enter键插入新行

    此段代码是从DevExpress官方回复文件中得到的.可以用来优化GridView的操作体验. /// <summary> /// GridView添加新行 /// </summar ...

  7. flexbox应用举例

    我们常说的"flexbox"其实包含"父元素","子元素"2个部分,将"父元素"定义为一个flexbox,则在" ...

  8. vue+webpack构建项目

    概述 -- 项目中会用到的插件 vue-router vue-resource 打包工具 webpack 依赖环境 node.js start 安装vue开发的模板 # 全局安装 vue-cli $ ...

  9. ECMAScript6之Set结构和Map结构

    set数据结构 ES6提供了一个新的数据结构,Set,Set和Array数组相似,但是Set里没有重复的数据,可以说是一个值的集合. 同时,Set数据结构有以下属性和方法: size:返回成员总数 a ...

  10. shrio登录验证

    shiro的认证过程也就是判断用户名和密码的过程,在认证过程中,用户需要提交实体信息(用户名)(Principals)和凭据信息(密码)(Credentials)来判断用户是否合法,最常见的" ...