前言: 這是博主在學習舊知識筆記中的一篇, 誰叫我們入門晚呢, 學習的過程中, 不會的知識, 就是因為我們年輕而已(囧~) 我總是這樣安慰自己(逃~), 所以我們需要補充一下”錯過”的重要的東西, 下面列出了本文會提到的一些概念. 如不感興趣直接退出即可
UICollectionView, UICollectionViewDataSource, UICollectionViewDelegate, UICollectionViewDelegateFlowLayout, UICollectionViewLayout
在開始之前先有必要回憶一下UICollectionView
使用collectionView有一段時間了, 進行一個簡單的總結和理解~~~.
UICollectionView是一種類似於UITableView不同於UITableView的佈局方式.
- Cells 用於展示內容的主體，對於不同的cell可以指定不同尺寸和不同的內容, 且可以複用(一般需要自定義 沒有提供類似於tableview那麼多的屬性).
- Supplementary Views 追加檢視 可以理解為tableView每個Section的Header或者Footer，用來標記每個section的view, 且也可以被複用.
- Decoration Views 裝飾檢視 這是每個section的背景, 且也可以被複用.
關於Cell的說明:
- 首先是cell本身作為容器view
- 然後是一個大小自動適應整個cell的backgroundView，用作cell平時的背景
- 再其上是selectedBackgroundView，是cell被選中時的背景
- 最後是一個contentView，自定義內容應被加在這個view上
UICollectionViewDataSource
|
1 2 3 4 5 6 7 8 |
// 多少個Items - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section; // 顯示cell - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath; // 多少個Sections - (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView; |
實現上面三個方法, 基本就可以正常工作了.
UICollectionViewDelegate
進行一些行為操作時候用到的
- cell的高亮
- cell的點選
- cell的選中狀態等等.
對於點選cell發生哪些行為做一個說明
1collectionView:shouldHighlightItemAtIndexPath: 是否應該高亮？
2collectionView:didHighlightItemAtIndexPath: 如果1回答為是，那麼高亮
3collectionView:shouldSelectItemAtIndexPath: 無論1結果如何，都詢問是否可以被選中？
4collectionView:didUnhighlightItemAtIndexPath: 如果1回答為是，那麼現在取消高亮
5collectionView:didSelectItemAtIndexPath: 如果3回答為是，那麼選中cell
UICollectionViewDelegateFlowLayout
可以對cell的大小, 間隙進行調整 使用協議的方式
UICollectionViewFlowLayout
是UICollectionViewLayout(稍後會提到)的子類, 他提供一些對cell進行簡單設定的屬性, Flow Layout簡單說是一個直線對齊的layout.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
// 系統API提供的一些屬性 @property (nonatomic) CGFloat minimumLineSpacing; @property (nonatomic) CGFloat minimumInteritemSpacing; @property (nonatomic) CGSize itemSize; @property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0); // defaults to CGSizeZero - setting a non-zero size enables cells that self-size via -preferredLayoutAttributesFittingAttributes: @property (nonatomic) UICollectionViewScrollDirection scrollDirection; // default is UICollectionViewScrollDirectionVertical @property (nonatomic) CGSize headerReferenceSize; @property (nonatomic) CGSize footerReferenceSize; @property (nonatomic) UIEdgeInsets sectionInset; // Set these properties to YES to get headers that pin to the top of the screen and footers that pin to the bottom while scrolling (similar to UITableView). @property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0); @property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0); |
UICollectionViewLayout
它負責了將各個cell、Supplementary View和Decoration Views進行組織，為它們設定各自的屬性.可以有:位置, 尺寸, 透明, 層級, 形狀, 等等. 所以自定義各種樣式的佈局就需要自定義Layout了.
實現一個自定義layout一般繼承於UICollectionViewLayout然後需要重寫以下幾個方法:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
// 返回CollectionView的內容尺寸 -(CGSize)collectionViewContentSize // 返回rect中的所有的元素的佈局屬性, 返回的是包含UICollectionViewLayoutAttributes的NSArray, UICollectionViewLayoutAttributes可以是cell, Supplementary View和Decoration View -(NSArray *)layoutAttributesForElementsInRect:(CGRect)rect // 返回對應於indexPath的位置的cell的佈局屬性 -(UICollectionViewLayoutAttributes _)layoutAttributesForItemAtIndexPath:(NSIndexPath _)indexPath // 返回對應於indexPath的位置的追加檢視的佈局屬性 -(UICollectionViewLayoutAttributes _)layoutAttributesForSupplementaryViewOfKind:(NSString _)kind atIndexPath:(NSIndexPath *)indexPath // 返回對應於indexPath的位置的裝飾檢視的佈局屬性 -(UICollectionViewLayoutAttributes * )layoutAttributesForDecorationViewOfKind:(NSString_)decorationViewKind atIndexPath:(NSIndexPath _)indexPath: // 預設返回yes, 邊界發生變化時, 重新進行佈局. - (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds: |
注意: UICollectionViewLayout例項化之後, 有一些方法將自動被呼叫
|
1 2 3 4 |
// 一般在該方法中設定一些必要的layout的結構和初始需要的引數 -(void)prepareLayout // 處置collection應該佔據的尺寸(所有內容所佔的尺寸) collectionView的本質是一個scrollView, 需要滾動尺寸 -(CGSize) collectionViewContentSize |
需要更新layout時, 呼叫這個方法 有點UIView的setNeedsLayout的意思…
|
1 |
- invalidateLayout |
說了這麼多, 我覺得我理解的更深一點了, 你呢?
說的再多不如show you my demo 稍後有時間補上… [大笑.png]
這裡是官方的一個Dmeohttps://github.com/mpospese/CircleLayout.git
End
打賞支援我寫出更多好文章，謝謝！
打賞作者
打賞支援我寫出更多好文章，謝謝！
任選一種支付方式
