iOS工作系列iOSiOS Blog

UICollectionView

2015-12-17  本文已影响5973人  Girl_iOS

在WWDC2012中的Introducing Collection Views,苹果首次介绍了UICollectionView,类似UITableView的用法使人很容易接受,但强大的自定义布局,又使其相较于UITableView有了选择它的更多理由.

其实前好几天就想写的,而且想着要写就写出一篇UICollectionView的大集合,包含方方面面,力求完美.但发现好几天了,仍未出炉,以自己现在的功力,还不够火候.而且刚好看到一句话"做出来比做的完美重要".有时候写文章就像产品,刚出来也许不完美,需要经过不断的迭代才会慢慢完善,而首先要将他做出来.

前段时间有个模块需要UICollectionView,首先遇到的就是如何来显示每个UICollectionViewCell之间的分隔线,以前项目中是用顶部、底部、右边分别用一条UIView的线条来达到显示分隔线的目的.而再做的时候我用了另一种方法就是让每个Cell的间隔刚好为线条的宽度,而背景色设置为线条的颜色即可,而微博上@Programmer毒 也说过此种方法.有没有更好的方法呢?

如何来实现Cell的移动?

move.gif
iOS9有了自带的方法来实现,主要用到了以下方法:
    public func beginInteractiveMovementForItemAtIndexPath(indexPath: NSIndexPath) -> Bool
    public func updateInteractiveMovementTargetPosition(targetPosition: CGPoint)
    public func endInteractiveMovement()

定位到要移动的cell后将其移动到手指停的位置,继而插入重新排列. 具体的实现,可以查看UICollectionViews Now Have Easy Reordering

印象笔记的交互令人深刻:

Evernote.gif

有人用UICollectionView实现了此效果,可以查看印象笔记交互效果的实现.

iOS7刚出来的时候因为有了UIKit Dynamics,而将此和UICollectionView结合后,可以写出很多拥有物理特性的效果:

springyCollectionView.gif newtonianCollectionView.gif

上面的图片来自objc.io的一篇文章,可以查看原文UICollectionView + UIKit Dynamics来了解其实现.另外还有篇Custom Collection View Layouts来让你了解UICollectionView的自定义布局.

而UICollectionView的更多教程可以看看Ray家的.比如要实现这个效果:

Pinterse.png
可以查看UICollectionView Custom Layout Tutorial: Pinterest

实现一个翻书的效果:

BookOpening.gif

可以查看How to Create an iOS Book Open Animation

UITableView中的很多效果都可以用UICollectionView来替代.比如下面这个效果:

LongPress.gif

Ray的文章Cookbook: Moving Table View Cells with a Long Press Gesture有具体的实现原理,而文章的最后也给了UICollectionView的实现版本,可以在Github找到.

Ray家的视频系列也有UICollectionView的讲解,而@walkingway做了布局系列视频的笔记来实现下面的效果:

one.gif two.gif
这个效果还可以参考Ray的文章Swift Expanding Cells in iOS Collection Views three.gif

看起来是不是很酷,顺便安利一下Ray家的视频订阅,一个月19刀,可以试试哦.

说到视频,这篇Beyond the Grid — Creating Unique, High Performance Interfaces With UICollectionView是讲UICollectionView的性能提升的:)

有本书iOS UICollectionView是专门来讲它的:

iOSUICollectionViewGuide.png

当然绝好的资料还要数苹果文档Collection View Programming Guide for iOS以及WWDC What's New in NSCollectionViewAdvanced User Interfaces with Collection Views

这些基本就是最近看的一些关于UICollectionView的资料.
最后一个小问题,UICollectionViewLayout和UICollectionViewFlowLayout的区别是什么呢? :)

Girl学iOS100天 第30天

上一篇下一篇

猜你喜欢

热点阅读