UI_集合视图

集合视图的概念

创建UICollectionView

集合视图的布局UICollectionViewFlowLayout

自定义cell

布局协议UICollectionViewDelegateFlowLayout  

---

集合视图的概念 

什么是集合视图？ 

1. UICollectionView也称之为集合视图。
2. UICollectionView是一种新的数据展示方式，简单来说可以把他理解成多列的UITableView(注意：这是UICollectionView的最简单的形式)。
3. iBooks就是UICollectionView的表现形式，或者iPad的iOS中的原声时钟应用中的各个时钟，也是UICollectionView的最简单的一个布局。 

• UICollectionView与UITableView的实现类似，需要设置delegate和dataSource
• 在collectionView中，cell的布局比tableView复杂，需要使用一个类描述集合视图的布局和行－UICollectionViewLayout 
• UICollectionViewDelegate\UICollectionViewDataSource－UICollectionView－UICollectionViewLayout-UICollectionViewFlowLayout

---

创建UICollectionView 

集合视图的创建步骤：

1. 使用系统的布局UICollectionViewFlowLayout
2. 设置代理，设置数据源
3. 设置自定义cell 

数据源: 

我们需要给CollectionView指定一个数据源，它负责给collectionView提供数据与显示。 

 //显示多少个元素
 - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
 //显示cell
 - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath 

---

集合视图的布局UICollectionViewFlowLayout

• UICollectionViewFlowLayout是一个基类，集合视图使用它自己的子类实现布局。
• UICollectionViewFlowLayout是系统提供的网络形式的布局类，只需要简单的配置。

 UICollectionViewFlowLayout

方法：

 1 //最小上下间距
 2 minimumLineSpacing
 3 //最小左右间距
 4 minimumInterItemSpacing
 5 //cell大小
 6 itemSize
 7 //滚动方向
 8 scrollDirection
 9 //页眉大小
 headerReferenceSize
 // 页脚大小
 footerReferenceSize
 //section中cell的边界范围 
 sectionInset

 

---

 

 自定义cell

• UICollectionView使用UICollectionCell创建cell
• UICollectionView包含contentView，但是没有提供其他控件（与tableView不同）
• 通常都使用自定义cell 

 

---

布局协议UICollectionViewDelegateFlowLayout  

通过协议设定

• 通过对UICollectionViewFlowLayout的设定来改变布局，限制性比较大，对于一些类似瀑布流的效果难以实现。
• 当我们发现每一张的图片都不是固定的，我们可以通过协议来实现每个item的设置。
• 我们所使用的协议是UICollectionViewDelegateFlowLayout，它是对UICollectionViewDelegate的扩展

 

 布局协议：

  //@protocol UICollectionViewDelegateFlowLayout <UICollectionViewDelegate>

 1 @optional
 2 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
 3 - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
 4 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
 5 - (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
 6 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
 7 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

 总结：

1. 集合视图UICollectionView和表视图UITableView很相似，可根据layout属性设置，显示单元格集合内容。
2. UICollectionViewDataSource类作为集合视图的数据源，向集合视图提供数据。集合视图依赖于委托(delegate)中定义的方法对用户交互进行相应。
3. 可以通过UICollectionViewDelegateFlowLayout来对其进行cell的自定义布局，它是UICollectionViewDelegate的扩充