0. 簡介
參考：http://www.cnblogs.com/langtianya/p/3902801.html
參考：http://www.cnblogs.com/ios8/p/iOS-UICollectionView.html
UIICollectionView 必須實現UICollectionDataSource、UICollectionViewDelegate、UICollectionViewDelegateFlowLayout這三個協議。
0.1. 相似控件
UICollectionView, UITableView, NSCollectionView
0.2. UICollectionView的優勢
- 高度定制內容
- 優秀的管理數據的能力
- 高效處理大量數據
0.3. 構成
0.3.1. 單元格
Cells，主要的顯示視圖。
0.3.2. 補充View
Supplementary Views，頁眉頁腳。
0.3.3. 裝飾View
Decoration Views，背景效果。
1. 常用協議
1.1. Section的個數
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
1.2. 每個Section里Item的個數
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
1.3. 每個UICollectionViewCell展示的內容
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { static NSString * CellIdentifier = @"GradientCell"; UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath]; cell.backgroundColor = [UIColor colorWithRed:((10 * indexPath.row) / 255.0) green:((20 * indexPath.row)/255.0) blue:((30 * indexPath.row)/255.0) alpha:1.0f]; return cell; }
1.4. 每個UICollectionViewCell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { return CGSizeMake(96, 100); }
1.5. 每個UICollectionView Section的margin
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(5, 5, 5, 5); }
1.6. UICollectionViewCell選中時
//UICollectionView被選中時調用的方法 -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath]; cell.backgroundColor = [UIColor whiteColor]; }
1.7. UICollectionView是否可以被選中
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath { return YES; }
2. 重用
2.1. 注冊Cell類
- (void)registerClass:forCellWithReuseIdentifier: - (void)registerClass:forSupplementaryViewOfKind:withReuseIdentifier: - (void)registerNib:forCellWithReuseIdentifier: - (void)registerNib:forSupplementaryViewOfKind:withReuseIdentifier:
2.2. 從隊列取出Cell
-(id)dequeueReusableCellWithReuseIdentifier:forIndexPath: -(id)dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
2.3.1. 示例代碼
2.3.1.1. 注冊
在CollectionView類中注冊Cell類：
[collectionView registerClass:[MyCellclass] forCellWithReuseIdentifier:@”MY_CELL_ID”]
2.3.1.2. 使用Cell
取出后直接使用即可，不需要再進行空值判斷和初始化：
-(UICollectionView*)collectionView:(UICollectionView*)cv cellForItemAtIndexPath:(NSIndexPath*)indexPath{ MyCell *cell =[cv dequeueReusableCellWithReuseIdentifier:@”MY_CELL_ID”]; //if (!cell) { //Well, nothingreally. Never again} // Configure thecell's content cell.imageView.image= ... return cell; }
3. 內容顯示
UICollectionView繼承自UIScrollView，UICollectionView通過UICollectionViewLayout和UICollectionViewFlowLayout對cell和其它view進行布局。
UICollectionViewCell由三部分組成：
- Background View
- Selected Background View
- Content View
3.1. UICollectionViewLayout
3.1.1. 使用自定義的Layout（UICollectionViewLayout）
這是一個抽象基類，需要繼承自它，來為collection view 生成layout信息。Layout對象的作用是決定cells、Supplementary views和 Decorationviews在collection view中的布局。需要計算這些view的layout屬性。
3.1.2. 使用系統Layout（UICollectionViewLayoutAttributes）
主要包含：
- 位置
- 大小
- 透明度
- ZIndex
- 轉場
3.2. Flow Layout
3.2.1. 核心概念
UICollectionViewFlowLayout是一個具體的layout對象，用來把Items布局在網格中，並且可選頁眉和頁腳。在collection view中的Items，可以從一行或一列flow至下一行或下一列（行或列取決於滾動的方向）。每行都會根據情況，包含盡可能多的Cells。Cells可以是相同的尺寸，也可以是不同的尺寸。下面是FlowLayout的一些特性：
- 面向線性布局
- 可配置為網格
- 一組lines
- 具有頁眉和頁腳
3.2.2. 自定義 Flow Layout
Flow Layout可以定制的主要功能如下：
- Item size
- Line spacing
- Inter cell spacing
- Scrolling direction
- Header and forter size
- Section inset
幾乎所有的定制屬性都是在UICollectionViewFlowLayout中，delegate實際上是collection view 的delegate.UICollectionViewDelegateFlowLayout只是對UICollectionViewDelegate進行了一些擴展。
3.2.2.1. Item size（每個Item的大小）
3.2.2.1.1. 在全局中配置
@property(CGSize)itemSize layout.itemSize= CGSizeMake(30,20);
3.2.2.1.2. 通過delegate對每個item進行配置
collectionView:layout:sizeForItemAtIndexPath: { return...; }
3.2.2.2. Line spacing（每行的間距）
3.2.2.2.1. 在全局中配置
@property(CGFloat) minimumLineSpacing
3.2.2.2.2. 通過delegate對每個Section進行配置
ollectionView:layout:minimumLineSpacingForSectionAtIndex:
3.2.2.3. Inter cell spacing（每行內部cell item的間距）
3.2.2.3.1. 在全局中配置
@property(CGFloat) minimumInteritemSpacing
3.2.2.3.2. 通過delegate對每個section進行配置
collectionView:layout:minimumInteritemSpacingForSectionAtIndex:
3.2.2.4. Scrolling direction（滾動方向）
設置scrollDirection屬性即可。兩個值如下：UICollectionViewScrollDirectionVertical和UICollectionViewScrollDirectionHorizontal。即縱向或橫向。
3.2.2.5. Header and footer size（頁眉和頁腳大小）
頁眉和頁腳，即UICollectionElementKindSectionHeader和UICollectionElementKindSectionFooter，通過數據源方法提供內容：
-collectionView:viewForSupplementaryElementOfKind:atIndexPath:
同樣需要注冊一個類，並從隊列中取出view：
- registerClass:forSupplementaryViewOfKind:withReuseIdentifier: -registerNib:forSupplementaryViewOfKind:withReuseIdentifier: -dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
頁眉和頁腳，當垂直的時候，需要設置的是Height，當水平的時候，需要設置的是Width。頁眉和頁腳的size配置方式如下：
3.2.2.5.1. 在全局中配置
@property(CGSize) headerReferenceSize
@property(CGSize) footerReferenceSize
3.2.2.5.2. 通過delegate對每個item進行配置
collectionView:layout:referenceSizeForHeaderInSection:
collectionView:layout:referenceSizeForFooterInSection:
3.2.2.6. Sections Insets
通過兩個圖來看一下什么是Section Insets:
3.2.2.6.1. 在全局中配置
@propertyUIEdgeInsets sectionInset;
3.2.2.6.2. 通過delegate對每個item進行配置
- (UIEdgeInsets)collectionView:layout:insetForSectionAtIndex: