Swift2.0下UICollectionViews拖拽效果的实现
原文链接:http://www.jianshu.com/p/569c65b12c8b
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。
原文UICollectionViews Now Have Easy Reordering。本着好东西要分享的原则以及出于对个人技能的提升,在此作一个粗陋的翻译,翻译尽量保留原作内容。本文主要是基于Swift 2.0实现的一个简单的UICollectionView的cell的拖拽效果,编译环境是Xcode 7。效果虽然简单,但足够用不是吗? 对于翻译,本人也是第一次,难免有失误或错误之处,万望不吝赐教,以便及时修正。
我是UICollectionView
的忠实粉丝。相对于它的兄长UITableView
,UICollectionView
可定制性更高,且更加灵活。时至今日,我使用UICollectionView
要远多于UITableView
。随着IOS9的发布,使的它的排序(即拖拽效果)更加简单。在这之前,想要通过原生控件达到开箱即用的效果,那是一件不可能的事情,如果想要达到效果势必要完成大量的工作。首先让我们重新回顾一下相关的API,然后你可以在通过Github下载示例Demo。
实现简单的拖动排序效果最简单的办法就是使用UICollectionViewController
。现在它有一个新增的属性installsStandardGestureForInteractiveMovement
,通过添加手势对cell进行排序。这是一个BOOL类型的属性,默认为YES,并且我们需要重写一个方法以来达到我们想要的效果。
override func collectionView(collectionView: UICollectionView, moveItemAtIndexPath sourceIndexPath: NSIndexPath, toIndexPath destinationIndexPath: NSIndexPath) {
//调整数据源数据的顺序
}
当我们重写了moveItemAtIndexPath
,collectionView就认为cell是可以移动的。
如果我们使用带有collectionView的普通UIViewController
实现拖拽效果,就会变得很复杂。我们不仅要实现UICollectionViewDataSource
上面提到的的代理方法,还要重写installsStandardGestureForInteractiveMovement
。但是不要担心,实现起来同样简单。UILongPressGestureRecognizer
长按手势,能够完全满足拖拽需求。
private var longPressGesture: UILongPressGestureRecognizer!
override func viewDidLoad() {
super.viewDidLoad()
longPressGesture = UILongPressGestureRecognizer(target: self, action: "handleLongGesture:")
self.collectionView.addGestureRecognizer(longPressGesture)
}
func handleLongGesture(gesture: UILongPressGestureRecognizer) {
switch(gesture.state) {
case UIGestureRecognizerState.Began:
guard let selectedIndexPath = self.collectionView.indexPathForItemAtPoint(gesture.locationInView(self.collectionView)) else {
break
}
collectionView.beginInteractiveMovementForItemAtIndexPath(selectedIndexPath)
case UIGestureRecognizerState.Changed:
collectionView.updateInteractiveMovementTargetPosition(gesture.locationInView(gesture.view!))
case UIGestureRecognizerState.Ended:
collectionView.endInteractiveMovement()
default:
collectionView.cancelInteractiveMovement()
}
}
当手势生效时,获取手势所在cell的indexPath,然后根据手势的不同状态调用collectionView的相关方法,具体如下:
beginInteractiveMovementForItemAtIndexPath(indexPath: NSIndexPath)
开始拖拽某个cell时调用此方法,并把将被拖拽的cell的indexPath传入方法。updateInteractiveMovementTargetPosition(targetPosition: CGPoint)
根据手势更新被拖拽的cell的位置endInteractiveMovement()
手势结束时调用,结束拖拽cancelInteractiveMovement()
手势取消时调用,取消拖拽
这样能够实现我们想要的拖拽效果了。
使用普通UIViewController
最终达到的效果跟我们使用UICollectionViewController
实现的效果是一样的。相当酷,不是吗?但是我们可以通过自定义UICollectionViewLayout
使它变得更酷。下面我们来实现一个简单的瀑布流。
啊哈,看起来相当酷,但是如果我们不想在拖拽的过程中改变cell的size,我们应该怎么做呢?被拖拽的cell在移动的过程中,应该保持size不变。这当然是可以实现的。UICollectionViewLayout
为我们提供了相关方法来解决这个问题。
func invalidationContextForInteractivelyMovingItems(targetIndexPaths: [NSIndexPath], withTargetPosition targetPosition: CGPoint, previousIndexPaths: [NSIndexPath], previousPosition: CGPoint) -> UICollectionViewLayoutInvalidationContext
func invalidationContextForEndingInteractiveMovementOfItemsToFinalIndexPaths(indexPaths: [NSIndexPath], previousIndexPaths: [NSIndexPath], movementCancelled: Bool) -> UICollectionViewLayoutInvalidationContext
cell在起始indexPath和目标indexPath拖拽期间,会调用第一个方法。第二个方法类似,但是它仅会在拖拽结束后调用。根据这一点,我们可以通过使用一个小技巧达到我们的需求。
internal override func invalidationContextForInteractivelyMovingItems(targetIndexPaths: [NSIndexPath], withTargetPosition targetPosition: CGPoint, previousIndexPaths: [NSIndexPath], previousPosition: CGPoint) -> UICollectionViewLayoutInvalidationContext
{
var context = super.invalidationContextForInteractivelyMovingItems(targetIndexPaths, withTargetPosition: targetPosition, previousIndexPaths: previousIndexPaths, previousPosition: previousPosition)
self.delegate?.collectionView!(self.collectionView!, moveItemAtIndexPath: previousIndexPaths[0], toIndexPath: targetIndexPaths[0])
return context
}
解决方法简单直接。获取当前被拖拽的cell的起始indexPath和目标indexPath,然后调用UICollectionViewDataSource
代理方法移动当前正在被拖拽的cell。
毫无疑问,一个可以拖拽的的collectionView会带来非常棒的体验效果。特别感谢UIKit工程师们的付出!
Swift2.0下UICollectionViews拖拽效果的实现的更多相关文章
- 学习笔记---Javascript事件Event、IE浏览器下的拖拽效果
学习笔记---Javascript事件Event.IE浏览器下的拖拽效果 1. 关于event常用属性有returnValue(是否允许事件处理继续进行, false为停止继续操作).srcE ...
- JS实现漂亮的窗口拖拽效果(可改变大小、最大化、最小化、关闭)
转自<JS实现漂亮的窗口拖拽效果(可改变大小.最大化.最小化.关闭)>:http://www.jb51.net/article/73157.htm 这篇文章主要介绍了JS实现漂亮的窗口 ...
- 拖拽系列一、JavaScript实现简单的拖拽效果
前端拖拽相关应用汇总 在现实生活中就像男孩子牵着(拖着)女朋友的手穿过马路:从马路的一端走到另一端这种场景很常见: 而在前端开发中拖拽效果也算是前端开发中应用最常见.最普遍的特效:其拖拽涉及知 ...
- JavaScript实现最简单的拖拽效果
一.一些无关痛痒的唠叨 拖拽还是挺不错的一个页面效果,我个人认为,其生命力在于可以让用户自己做一些操作,所谓自定义.例如: ①浏览器标签顺序的拖拽切换 现在基本上所有的选项卡式的浏览器都有顺序拖拽切换 ...
- vue模块拖拽效果
正巧在之前面试中遇到问实现拖拽效果 当时面试的时候简单回答了实现的方式与逻辑. 现在闲来无事,把这个东西实现了一下. 原理很简单,写的很方便. 数据驱动,建立一个数组,数组初始长度为1 拖动触发时,添 ...
- 原生js简单实现拖拽效果
实现弹窗拖拽效果的原理是:按下鼠标并移动——拖拽移动物体,抬起鼠标——停止移动.主要触发三个事件:onmousedown.onmousemove以及onmouseup: 首先搭建结构:一个宽350px ...
- 超强的纯 CSS 鼠标点击拖拽效果
背景 鼠标拖拽元素移动,算是一个稍微有点点复杂的交互. 而在本文,我们就将打破常规,向大家介绍一种超强的仅仅使用纯 CSS 就能够实现的鼠标点击拖拽效果. 在之前的这篇文章中 -- 不可思议的纯 CS ...
- 再谈React.js实现原生js拖拽效果
前几天写的那个拖拽,自己留下的疑问...这次在热心博友的提示下又修正了一些小小的bug,也加了拖拽的边缘检测部分...就再聊聊拖拽吧 一.不要直接操作dom元素 react中使用了虚拟dom的概念,目 ...
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
随机推荐
- c# 预处理命令
在编译之前进行的处理. 预处理命令以符号“#”开头. #define 只能 定义符号 不能定义宏(#define PI 3.14 这是错的,在c#中没宏) #region #endregion #if ...
- C# 连接SQL数据库
感觉很有必要总结一下 一:C# 连接SQL数据库 Data Source=myServerAddress;Initial Catalog=myDataBase;User Id=myUsername;P ...
- 破解Windows Server 2003只允许3个用户远程登陆
导读:WIN2003在使用远程桌面登录的时候,一台机器默认情况下只允许3个用户同时登录. 这很不方便.我们修改WIN2003远程桌面的连接数,可以设置3个以上用户远程桌面. 1.启动终端服务:在&qu ...
- Python----定义
变量的定义: 变量第一次出现不是声明类型就是赋初值,才能后续使用. 函数的定义: ''' 函数的返回值不用声明类型 函数参数值最好赋一个类型值,例如整型赋值0,列表[] 函数名后面必须跟: ''' d ...
- [转]使用wireshark分析TCP/IP协议中TCP包头的格式
本文简单介绍了TCP面向连接理论知识,详细讲述了TCP报文各个字段含义,并从Wireshark俘获分组中选取TCP连接建立相关报文段进行分析. 一.概述 TCP是面向连接的可靠传输协议,两个进程互发数 ...
- MyEclipse导入Maven项目报错 Plugin execution not covered by lifecycle configuration:
web项目使用到mybatis,需要使用mybatis的自动生成代码插件,配置build部分如下: <build> <pluginManagement></pluginM ...
- Linux "top" 命令解析
TOP命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况. TOP是一个动态显示过程,即可以通过用户按键来不断刷新当前状态.如果在前台执行该命令,它将独占前台,直到用户 ...
- smarty练习:考试系统
考试系统 (0607) 做一个类似于驾校考试的系统,可以选择要考试试题类型,选好后进入考试页面 使用的数据库表格:timu(题目)表,xuanxiang(选项)表,shiti(试题)表,shititi ...
- ubuntu 14.0 下github 配置
一:创建Repositories 1:首先在github下创建一个帐号.这个不用多说,然后创建一个Repositories. 2:然后在ubuntu下安装git相关的东东: 1 sudo apt-ge ...
- Applet: 用HTML调用Applet的几个注意事项
问题:HTML找不到java class. 首先,如果xxx.java文件与HTML文件在同一目录下,直接运行cmd-javac 该 xxx.java文件,生成xxx.class文件.HTML中的&l ...