UICollectionView其实和tableView的功能类似,都是向用户展示数据列表,只不过 CollectionView可以更加灵活的设计和现实数据内容。
UICollectionViewDelegateFlowLayout协议主要用于设置cell的layout(例如:修改每个cell的显示大小等)。
下面展示一个UICollectionView的例子:
1)首先创建UICollectionViewController的子类MyCollectionViewController(同UITableViewController),在storybord中删除原来的view,在控件框中脱出CollectionView控件放入storybory中,设置对应的类为 刚才创建的MyCollectionViewController.
2)在storybord中显示为黑色背景,左上角一个单元格,这个单元格即对应于tableView中的cell,可以直接自定义UICollectionViewCell的样式,然后创建UICollectionViewCell的子类MyCollectionViewCell,拖入cell中的元素(方便以后给每个cell赋值)。
3)实现dataSource的协议方法,如下图:
4)实现delegate协议,如下图主要功能为(选定某个单元cell,修改这个CollectionView的滑动显示方式是横向?还是动向?(当然这样的功能很不合理,只是为了测试))
5)实现FlowLayout协议,如下图(修改单元格的大小)
6)在UICollectionView中默认还支持header标题显示,效果如下图:
实现方式为:在storybord中选中Collection View 点击属性框,选中Section Header,在View的顶部则会显示一个长条黑框
往黑框中托一个label标签,设定好长宽,位置,然后新建文件UICollectionReusableView的子类MySupplementaryView,将这个类设定为section header对应的类。将header中的label元素拖动到MySupplementaryView,充当该类的属性。
然后再主ViewController中重写dataSource协议的方法,设定header的value
6)实现删除某个元素的功能。如果要删除某个元素,需要首先删除源数据中的 对应数据,然后删除CollectionView中对应的cell元素。具体实现如下:
7) 个性化设置布局,其中 UICollectionViewLayout是一个抽象类,用于设置设置CollectionView的布局(包括设置每个单元cell的 UICollectionViewLayoutAttributes,即cell的现实样式)。 如果没有个性化需求,CollectionView会默认提供一个layout,可以通过: self.collectionView.collectionViewLayout获取默认的layout。
下面例子为自己实现一个UICollectionViewLayout。
定义好这个layout之后,在主Controller中将其设置为当前collectionView的默认layout,如下
上述代码中同时给当前view中添加了一个pinch gesture,使得用户通过pinch动作改变点击的cell的center和scale。 pinch对应的方法实现如下: