UICollectionView主要包括了下面幾部分:
UICollectionView-內(nèi)容顯示的主視圖斥滤,類(lèi)似于UITableView泄隔。
UICollectionViewCell-類(lèi)似于UITableViewCell在UITableView中系草。這些cell組成了視圖中的內(nèi)容。
Supplementary Views-如果你除了cell之外,還有信息需要展示框产,你可以使用supplementary views道批。通常被用作section的header或者footer
Decoration View-裝飾視圖,用來(lái)提升UICollectionView的背景視覺(jué)效果的骑冗。
除了上面這些可見(jiàn)的組成部分赊瞬,UICollectionView還有用來(lái)布局內(nèi)容的不可見(jiàn)組成部分。
UICollectionViewLayout- 用來(lái)處理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)畫(huà)效果缓熟,都要?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 -用來(lái)旋轉(zhuǎn)瞎抛,縮放的屬性
zIndex -子視圖的層級(jí)
hidden -view是否隱藏
布局的生命周期
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:去決定新的可見(jiàn)元素的布局砚著。
當(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是抽象類(lèi),所以在布局的時(shí)候可以使用Apple提供的UICollectionViewFlowLayout或者自定義Layout
UICollectionViewFlowLayout
這是一個(gè)典型的柵格布局赶撰,就像上圖所以的下廚房的集市頁(yè)布局舌镶。它有以下的一些屬性:
scrollDrirection:決定了scroll view的滾動(dòng)方向
minimumLineSpacing:決定了每行的間隔
minimumIteriItemSpacing:決定了Item之間的間隔
itemSize:決定了Item的大小
sectionInset:section四周的邊距
headerReferenceSize:header的大小
footerReferenceSize:footer的大小
自定義UICollectionViewLayout:
自定義UICollectionViewLayout一般是繼承UICollectionViewLayout類(lèi)柱彻。重載下列方法:
-(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í)餐胀,是否重新布局哟楷。
3.https://github.com/mokagio/UICollectionViewLeftAlignedLayout
4.https://github.com/ChenYilong/CollectionViewClassifyMenu
5.http://www.reibang.com/p/22adf62ea491