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.collectionView registerClass:[HMSectionHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
// 注册footer View
[self.collectionView registerClass:[HMSectionFooterView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];
利用kind参数来判断创建的是哪个类型的UICollectionReusableView。
6.1 App 新特性界面案例
6.2 改进一下, 实现"图片无限轮播器"
- 1》先实现图片的正常滚动
- 2》实现无限轮播
- 3》实现无限轮播时正确显示图片