UICollectionView的简单介绍
在iOS6发布前,开发人员都习惯用UITableView来展示所有类型的数据集合。虽然苹果公司在照片应用中使用过很长一段时间类似UICollectionView视图的UI,但第三方开发人员无法使用它。当时我们可以利用第三方框架(如three20)来做类似的功能。在iOS6苹果引入了一个新的控制器UICollectionViewController。提供了一个更加优雅的方法,把各种类型的数据显示在视图中。
现在, 在各种类型的APP中,UICollectionView的身影随处可见,不管在什么应用,总有UICollectionView的应用场景,而苹果也在iOS10中对UICollectionView做了更好的优化。本文主要是展示UICollectionView的常用动画和装逼动画,也会在本文对所有的动画进行详细的讲解。先看效果
效果1:
效果2 : 圆形放大
效果3 :
效果4:
开车前
大家看标题就能知道,前两个效果需要掌握自定义转场的相关姿势,如果有的同学不太了解,简书上有很多相关的文章.也可以参考下喵神的的博客->WWDC 2013 Session笔记 – iOS7中的ViewController切换.或者先看下相册效果实现的思路.
效果1实现思路
先说下长按拖拽单元格的实现,这个是最简单的,只需要实现UICollectionView的collectionView?.moveItemAtIndexPath(NSIndexPath, toIndexPath: NSIndexPath)所以我们要先记录移动之前的indexPath记录为lastPath,根据手指的位置获取目标位置的indexPath记录为curPath,移动完成后记录lastPath = curPath就能实现拖拽单元格的动画效果。最后一步就是修改数据源了,刚开始做的时候我傻逼的在手势结束的修改数据源,这是不行的.因为在移动的时候单元格已经变化太多了,所以一定要在移动的状态修改数据源.
添加长按手势
|
1 2 |
let longGest = UILongPressGestureRecognizer(target: self, action: "longGestHandle:") collectionView?.addGestureRecognizer(longGest) |
核心代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
func longGestHandle(longGest : UILongPressGestureRecognizer){ switch longGest.state{ case .Began : // 获取点击的点 let touchP = longGest.locationInView(collectionView) // 拿到这个点对应的indexPath guard let indexPath = collectionView?.indexPathForItemAtPoint(touchP) else {return} // 记录 curPath = indexPath lastPath = indexPath // 拿到indexPath对应的cell let cell = collectionView?.cellForItemAtIndexPath(indexPath) as! TheFirstCell self.cell = cell let imageView = UIImageView() imageView.frame = cell.frame imageView.image = cell.image imageView.transform = CGAffineTransformMakeScale(1.15, 1.15) collectionView?.addSubview(imageView) self.imageView = imageView case .Changed : cell?.alpha = 0 // 获取手指的位置 let touchP = longGest.locationInView(collectionView) imageView?.center = touchP // 根据手指位置获取对应的indexpath let indexPath = collectionView?.indexPathForItemAtPoint(touchP) if (indexPath != nil) { curPath = indexPath collectionView?.moveItemAtIndexPath(lastPath!, toIndexPath: curPath!) } // 修改数据源 if lastPath != nil{ let lastImg = imageArr[lastPath!.item] imageArr.removeAtIndex(lastPath!.item) imageArr.insert(lastImg, atIndex: curPath!.item) lastPath = curPath } case .Ended : imageView?.removeFromSuperview() cell?.alpha = 1 default : break } } } |
图片浏览器思路
思考
- 点击
cellModal出来的View是什么类型的? - 怎么让Modal的
View显示cell里面的图片? - 怎么才能知道点击
cell的frame? - 怎么才能知道dismiss之后
cell的frame?
第一个问题的答案已经很明显了,肯定是UICollectionView,我们可以在modalVC用属性记录点击cell的indexPath,通过调用collectionView.scrollToItemAtIndexPath(NSIndexPath, atScrollPosition: UICollectionViewScrollPosition, animated: Bool),值得注意的是animated要传false,你懂得.
关于第三个问题,我们可以直接计算让modalVC的一个属性来接收.我们还可以通过另外一种优雅的方式(代理)来获取。
第四个问题,因为最终的indexPath只有modalVC才能知道,所以也能通过代理来获得dismiss之后cell的frame.
协议和代理方法的定义
UICollectionViewController。提供了一个更加优雅的方法,把各种类型的数据显示在视图中。现在, 在各种类型的APP中,
UICollectionView的身影随处可见,不管在什么应用,总有UICollectionView的应用场景,而苹果也在iOS10中对UICollectionView做了更好的优化。本文主要是展示UICollectionView的常用动画和装逼动画,也会在本文对所有的动画进行详细的讲解。先看效果
效果1:
效果2 : 圆形放大
效果3 :
效果4:
开车前
大家看标题就能知道,前两个效果需要掌握自定义转场的相关姿势,如果有的同学不太了解,简书上有很多相关的文章.也可以参考下喵神的的博客->WWDC 2013 Session笔记 – iOS7中的ViewController切换.或者先看下相册效果实现的思路.
效果1实现思路
先说下长按拖拽单元格的实现,这个是最简单的,只需要实现UICollectionView的collectionView?.moveItemAtIndexPath(NSIndexPath, toIndexPath: NSIndexPath)所以我们要先记录移动之前的indexPath记录为lastPath,根据手指的位置获取目标位置的indexPath记录为curPath,移动完成后记录lastPath = curPath就能实现拖拽单元格的动画效果。最后一步就是修改数据源了,刚开始做的时候我傻逼的在手势结束的修改数据源,这是不行的.因为在移动的时候单元格已经变化太多了,所以一定要在移动的状态修改数据源.
添加长按手势
|
1 2 |
let longGest = UILongPressGestureRecognizer(target: self, action: "longGestHandle:") collectionView?.addGestureRecognizer(longGest) |
核心代码
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
func longGestHandle(longGest : UILongPressGestureRecognizer){ switch longGest.state{ case .Began : // 获取点击的点 let touchP = longGest.locationInView(collectionView) // 拿到这个点对应的indexPath guard let indexPath = collectionView?.indexPathForItemAtPoint(touchP) else {return} // 记录 curPath = indexPath lastPath = indexPath // 拿到indexPath对应的cell let cell = collectionView?.cellForItemAtIndexPath(indexPath) as! TheFirstCell self.cell = cell let imageView = UIImageView() imageView.frame = cell.frame imageView.image = cell.image imageView.transform = CGAffineTransformMakeScale(1.15, 1.15) collectionView?.addSubview(imageView) self.imageView = imageView case .Changed : cell?.alpha = 0 // 获取手指的位置 let touchP = longGest.locationInView(collectionView) imageView?.center = touchP // 根据手指位置获取对应的indexpath let indexPath = collectionView?.indexPathForItemAtPoint(touchP) if (indexPath != nil) { curPath = indexPath collectionView?.moveItemAtIndexPath(lastPath!, toIndexPath: curPath!) } // 修改数据源 if lastPath != nil{ let lastImg = imageArr[lastPath!.item] imageArr.removeAtIndex(lastPath!.item) imageArr.insert(lastImg, atIndex: curPath!.item) lastPath = curPath } case .Ended : imageView?.removeFromSuperview() cell?.alpha = 1 default : break } } } |
图片浏览器思路
思考
- 点击
cellModal出来的View是什么类型的? - 怎么让Modal的
View显示cell里面的图片?
