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的协议方法,如下图:




ios uiview 加载xib ios uicollectionview_数据





ios uiview 加载xib ios uicollectionview_子类_02




4)实现delegate协议,如下图主要功能为(选定某个单元cell,修改这个CollectionView的滑动显示方式是横向?还是动向?(当然这样的功能很不合理,只是为了测试))



ios uiview 加载xib ios uicollectionview_控件_03




5)实现FlowLayout协议,如下图(修改单元格的大小)



ios uiview 加载xib ios uicollectionview_子类_04




6)在UICollectionView中默认还支持header标题显示,效果如下图:


                  

ios uiview 加载xib ios uicollectionview_ios uiview 加载xib_05


实现方式为:在storybord中选中Collection View 点击属性框,选中Section Header,在View的顶部则会显示一个长条黑框


                  

ios uiview 加载xib ios uicollectionview_子类_06


往黑框中托一个label标签,设定好长宽,位置,然后新建文件UICollectionReusableView的子类MySupplementaryView,将这个类设定为section header对应的类。将header中的label元素拖动到MySupplementaryView,充当该类的属性。



然后再主ViewController中重写dataSource协议的方法,设定header的value



ios uiview 加载xib ios uicollectionview_ios uiview 加载xib_07




6)实现删除某个元素的功能。如果要删除某个元素,需要首先删除源数据中的 对应数据,然后删除CollectionView中对应的cell元素。具体实现如下:



ios uiview 加载xib ios uicollectionview_子类_08




7) 个性化设置布局,其中 UICollectionViewLayout是一个抽象类,用于设置设置CollectionView的布局(包括设置每个单元cell的  UICollectionViewLayoutAttributes,即cell的现实样式)。  如果没有个性化需求,CollectionView会默认提供一个layout,可以通过:   self.collectionView.collectionViewLayout获取默认的layout。



下面例子为自己实现一个UICollectionViewLayout。



ios uiview 加载xib ios uicollectionview_子类_09






ios uiview 加载xib ios uicollectionview_数据_10






ios uiview 加载xib ios uicollectionview_控件_11





定义好这个layout之后,在主Controller中将其设置为当前collectionView的默认layout,如下



ios uiview 加载xib ios uicollectionview_ios uiview 加载xib_12



上述代码中同时给当前view中添加了一个pinch gesture,使得用户通过pinch动作改变点击的cell的center和scale。 pinch对应的方法实现如下:



ios uiview 加载xib ios uicollectionview_ios uiview 加载xib_13