uicollectionview的基本使用

1. UICollectionView介绍

 

 

2. 为什么要学习UICollectionView

－ UICollectionView可以很高效的实现"九宫格"布局

－ UICollectionView可以非常灵活、高效的进行各种布局

 

 

3. UICollectionView的简单使用

 

 - UICollectionViewFlowLayout的部分属性

  itemSize：确定cell尺寸

  sectionInset：组内容边距

  minimumInteritemSpacing：最小水平间距

  minimumLineSpacing：最小行间距

 

- 通过纯代码的方式使用 UICollectionView

* UICollectionView使用注意两点:

1》创建UICollectionView的时候必须指定一个"布局参数"

不能直接使用UICollectionViewLayout（抽象类），使用子类UICollectionViewFlowLayout.

 

 

2》创建Cell 的时候必须先"注册 Cell"【只有通过storyboard (PrototypeCell: 原型 Cell)的方式自定义 Cell 【无需手动注册Cell】】

 

- 通过 "storyboard" + "纯代码的方式" 使用 UICollectionView

   1》self.collectionView和self.View 不是同一的View

   2》collectionViewCell没有提供像tableViewCell的默认子控件

 

 

4. UICollectionView自定义 Cell 完成"应用管理"案例

- 通过纯代码的方式自定义 Cell – 需要注册cell,将ID绑定类

- 通过 xib 的方式自定义 Cell – 需要注册Nib,ID绑定的Nib,Nib内部的cell需要设置重用ID和类型

- 通过 storyboard (Prototype Cell: 原型 Cell)的方式自定义 Cell 【无需手动注册Cell】 - 需要原型cell设置重用ID和类型

 

   1》collectionViewCell添加子控件需要重写initWithFrame方法

   2》建议将布局子控件的代码写在layoutSubViews

 

 

5. 纵向照片查看器案例

- 说明 UICollectionView每组的 header view(组头) 和 footer view(组尾) 使用UICollectionReusableView

 

每组只有一张图片

 

-    返回每一组的header和 footer的方法

-    (UICollectionReusableView *)collectionView:(UICollectionView *)collectionViewviewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {}

前提是，设置设置组header和 footer的大小

   //  设置每组的header和 footer的大小

    self.flowLayout.headerReferenceSize =CGSizeMake(0,49);

    self.flowLayout.footerReferenceSize =CGSizeMake(0,49);

 

 

  // 注册header view

    [self.collectionViewregisterClass:[HMSectionHeaderViewclass] forSupplementaryViewOfKind:UICollectionElementKindSectionHeaderwithReuseIdentifier:@"header"];

    // 注册footer View

  [self.collectionViewregisterClass:[HMSectionFooterViewclass] forSupplementaryViewOfKind:UICollectionElementKindSectionFooterwithReuseIdentifier:@"footer"];

 

利用kind参数来判断创建的是哪个类型的UICollectionReusableView。

 

 

6.1 App 新特性界面案例

 

 

6.2 改进一下, 实现"图片无限轮播器"

- 1》先实现图片的正常滚动

- 2》实现无限轮播

- 3》实现无限轮播时正确显示图片