UICollectionView簡(jiǎn)介
UICollectionView是一種應(yīng)用廣泛的數(shù)據(jù)展示方式，是iOS6.0以后引進(jìn)的。在各大app都有廣泛的引用。
UICollectionView主要包括了下面幾部分：
- UICollectionView-內(nèi)容顯示的主視圖，類似于UITableView。
- UICollectionViewCell-類似于UITableViewCell在UITableView中。這些cell組成了視圖中的內(nèi)容。
- Supplementary Views-如果你除了cell之外,還有信息需要展示，你可以使用supplementary views。通常被用作section的header或者footer
- Decoration View-裝飾視圖，用來提升UICollectionView的背景視覺效果的。
除了上面這些可見的組成部分，UICollectionView還有用來布局內(nèi)容的不可見組成部分。
- UICollectionViewLayout- 用來處理cell在屏幕上的布局。使用一系列的代理方法在UICollectionView上放置cell，而且布局效果是可以在運(yùn)行時(shí)，隨時(shí)改變的。
創(chuàng)建UICollectionView的常用方法
-
UICollectionView
1.創(chuàng)建cell以及header,footer
使用代碼創(chuàng)建
- registerClass:forCellWithReuseIdentifier:
- registerClass:forSupplementaryViewOfKind:withReuseIdentifier:
使用xib創(chuàng)建
- registerNib:forCellWithReuseIdentifier:
- registerNib:forSupplementaryViewOfKind:withReuseIdentifier:
復(fù)用cell
- dequeueReusableCellWithReuseIdentifier:forIndexPath:
- dequeueReusableSupplementaryViewOfKind:
:withReuseIdentifier:forIndexPath:2.獲取Collection View中的Item及位置 - indexPathForItemAtPoint: - indexPathsForVisibleItems - indexPathForCell: - cellForItemAtIndexPath: 3.獲取Collection View的狀態(tài) - numberOfSections - numberOfItemsInSection: -
UICollectionViewDelegate
1.處理選擇的Cells
- collectionView:shouldSelectItemAtIndexPath:
- collectionView:didSelectItemAtIndexPath:
- collectionView:shouldDeselectItemAtIndexPath:
- collectionView:didDeselectItemAtIndexPath:2.處理Cells的高亮 - collectionView:shouldHighlightItemAtIndexPath: - collectionView:didHighlightItemAtIndexPath: - collectionView:didUnhighlightItemAtIndexPath: -
UICollectionViewDataSource
1.獲取Section和Item的數(shù)量
- collectionView:numberOfItemsInSection:
- numberOfSectionsInCollectionView:2.獲取Items的視圖 - collectionView:cellForItemAtIndexPath: - collectionView:viewForSupplementaryElementOfKind： atIndexPath:
會(huì)變魔術(shù)的UICollectionViewLayout
UICollectionView之所以可以有千變?nèi)f化的樣式，各種酷帥屌炸天的動(dòng)畫效果，都要?dú)w功于UICollectionViewLayout，玩好的UICollectionViewLayout可以實(shí)現(xiàn)你想要的各種效果。
UICollectionViewLayout會(huì)對(duì)屏幕上的cells進(jìn)行組織布局。
UICollectionViewLayoutAttributes描述了具體如何布局cells, supplementary views, decoration views，具體包括以下屬性：
- frame -view在collection view的坐標(biāo)系統(tǒng)中的具體位置
- center -view在collection view的坐標(biāo)系統(tǒng)中的中心
- size -view的大小
- transform3D -用來旋轉(zhuǎn)，縮放的屬性
- zIndex -子視圖的層級(jí)
- hidden -view是否隱藏
布局的生命周期：
- 藍(lán)框代表colletion view在布局時(shí)使用的方法
- 橙框代表colletion view的狀態(tài)
- 綠框代表collection view的使用者調(diào)用的方法
collection view首先調(diào)用prepareLayout ,在其中設(shè)置布局需要的內(nèi)部數(shù)據(jù)結(jié)構(gòu)。這時(shí)collection view已經(jīng)弄清了要展示的數(shù)據(jù)，但還不知道如何布局，所以你可以在prepareLayout中使用numberOfSections或numberOfItemsInSection:這些方法。然后調(diào)用collectionViewContentSize獲取content size進(jìn)行布局。之后調(diào)用layoutAttributesForElementsInRect
對(duì)可以在屏幕中顯示的部分進(jìn)行布局。layout必須返回屏幕中所有元素的布局屬性，包括UICollectionViewCell或者Supplementary Views或者Decoration Views。這時(shí)，collectionView了解了足夠多的信息去布局cells。當(dāng)scrollview滑動(dòng)時(shí)，collection view會(huì)繼續(xù)調(diào)用layoutAttributesForElementsInRect:去決定新的可見元素的布局。
當(dāng)下面三種情況發(fā)生時(shí)，又會(huì)調(diào)用布局的相關(guān)方法。
- invalidateLayout -所有布局重新布局
-
insertItemAtIndexPaths或deleteItemsAtIndexPaths
-這個(gè)會(huì)發(fā)生在用戶添加或者移除collection view中的
item時(shí)，這時(shí)會(huì)調(diào)用prepareForCollectionViewUpdate: **
和finalizeAnimatedBoundsChange：** - 當(dāng)collection view的約束改變時(shí) - 調(diào)用
prepareForAnimatedBoundsChange和
finalizeAnimatedBoundsChange
由于UICollectionViewLayout是抽象類，所以在布局的時(shí)候可以使用Apple提供的UICollectionViewFlowLayout或者自定義Layout
UICollectionViewFlowLayout
這是一個(gè)典型的柵格布局，就像上圖所以的下廚房的集市頁布局。它有以下的一些屬性：
scrollDrirection:決定了scroll view的滾動(dòng)方向
minimumLineSpacing:決定了每行的間隔
minimumIteriItemSpacing:決定了Item之間的間隔
itemSize:決定了Item的大小
sectionInset:section四周的邊距
headerReferenceSize:header的大小
footerReferenceSize:footer的大小
自定義UICollectionViewLayout：
自定義UICollectionViewLayout一般是繼承UICollectionViewLayout類。重載下列方法：
-(void)prepareLayout：設(shè)定一些初始化參數(shù)。
-(CGSize)collectionViewContentSize：設(shè)定Collection View的尺寸
-(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect：返回屏幕中所有元素的布局屬性
-(UICollectionViewLayoutAttributes _)layoutAttributesForItemAtIndexPath:(NSIndexPath _)indexPath：返回indexPath位置的cell的布局屬性
-(UICollectionViewLayoutAttributes _)layoutAttributesForSupplementaryViewOfKind:(NSString _)kind atIndexPath:(NSIndexPath *)indexPath：返回indexPath位置的補(bǔ)充視圖的布局屬性
-(UICollectionViewLayoutAttributes * )layoutAttributesForDecorationViewOfKind:(NSString_)decorationViewKind atIndexPath:(NSIndexPath _)indexPath：返回indexPath位置的裝飾視圖的布局屬性
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds:邊界改變時(shí)，是否重新布局。
在下一篇中將介紹幾種常用的布局，如開篇的截圖所示，柵格網(wǎng)狀，靠左對(duì)齊，瀑布流的布局。雖然早已有相關(guān)輪子，但是作為初學(xué)者，模仿輪子，知道輪子的造法，還是很有必要的。
參考
1.http://onevcat.com/2012/06/introducing-collection-views/
2.《iOS 6 By Tutorials》
3.https://github.com/mokagio/UICollectionViewLeftAlignedLayout
4.https://github.com/ChenYilong/CollectionViewClassifyMenu
5.http://www.itdecent.cn/p/22adf62ea491
