UICollectionViewFlowLayout是系統提供給我們一個封裝好的流布局設置類,它的父類是UICollectionViewLayout,相對于父類它具有一些特別的屬性。
下面依次講解每個屬性:
1、設置行與行之間的間距最小距離
@property (nonatomic) CGFloat minimumLineSpacing;
2、設置列與列之間的間距最小距離
@property (nonatomic) CGFloat minimumInteritemSpacing;
3、設置每個item的大小
@property (nonatomic) CGSize itemSize;
4、設置每個Item的估計大小,一般不需要設置
@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0);
5、設置布局方向
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
6、設置頭視圖尺寸大小
@property (nonatomic) CGSize headerReferenceSize;
7、設置尾視圖尺寸大小
@property (nonatomic) CGSize footerReferenceSize;
8、設置分區的EdgeInset
@property (nonatomic) UIEdgeInsets sectionInset;
9、下面這兩個方法設置分區的頭視圖和尾視圖是否始終固定在屏幕上邊和下邊
@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
? ? ? ? 看到這里我想大家也明白了,UICollectionViewFlowLayout相對于父類添加的屬性就是更好地創建的表格視圖。常用的有兩種類型的 collection view 布局:
1.獨立于內容的布局計算。這正是你所知道的像 UITableView 和 UICollectionViewFlowLayout 這些情況。每個 cell 的位置和外觀不是基于其顯示的內容,但所有 cell 的顯示順序是基于內容的順序。可以把默認的 flow layout 做為例子。每個 cell 都基于前一個 cell 放置(或者如果沒有足夠的空間,則從下一行開始)。布局對象不必訪問實際數據來計算布局,此時最方便的就是用系統封裝好的UICollectionViewFlowLayout類了,當然你可以直接用,也可以繼承它,自定義一些表格流。
2.基于內容的布局計算。布局對象直接訪問 collection view 的數據源,根據數據源再指定相應的布局。在很多情況下,布局對象不僅需要取出當前可見 cell 的數據,還需要從所有記錄中取出一些決定當前哪些 cell 可見的數據。所以如果有一個依賴內容的布局,那就是暗示你需要寫自定義的布局類了,同時不能使用自定義的 UICollectionViewFlowLayout。
-----------------
好了,原理介紹完了下面講解一下UICollectionViewFlowLayout用法和注意點(對于父類UICollectionViewFLayout的講解需要等到下篇文章哦):
重寫prepareLayout方法
- 作用:在這個方法中做一些初始化操作
- 注意:一定要調用[super prepareLayout]
重寫layoutAttributesForElementsInRect:方法
- 作用:
- 這個方法的返回值是個數組
- 這個數組中存放的都是UICollectionViewLayoutAttributes對象
- UICollectionViewLayoutAttributes對象決定了cell的排布方式(frame等)
重寫shouldInvalidateLayoutForBoundsChange:方法
- 作用:如果返回YES,那么collectionView顯示的范圍發生改變時,就會重新刷新布局
- 一旦重新刷新布局,就會按順序調用下面的方法:
- prepareLayout
- layoutAttributesForElementsInRect:
重寫targetContentOffsetForProposedContentOffset:withScrollingVelocity:方法
- 作用:返回值決定了collectionView停止滾動時最終的偏移量(contentOffset)
- 參數:
- proposedContentOffset:原本情況下,collectionView停止滾動時最終的偏移量
- velocity:滾動速率,通過這個參數可以了解滾動的方向
--------------------
不多說了直接上代碼:
- (instancetype)init
{
if (self = [super init]) {
}
return self;
}
/**
* 當collectionView的顯示范圍發生改變的時候,是否需要重新刷新布局
* 一旦重新刷新布局,就會重新調用下面的方法:
1.prepareLayout
2.layoutAttributesForElementsInRect:方法
*/
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
/**
* 用來做布局的初始化操作(不建議在init方法中進行布局的初始化操作)
*/
- (void)prepareLayout
{
[super prepareLayout];
// 水平滾動
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 設置內邊距
CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}
/**
UICollectionViewLayoutAttributes *attrs;
1.一個cell對應一個UICollectionViewLayoutAttributes對象
2.UICollectionViewLayoutAttributes對象決定了cell的frame
*/
/**
* 這個方法的返回值是一個數組(數組里面存放著rect范圍內所有元素的布局屬性)
* 這個方法的返回值決定了rect范圍內所有元素的排布(frame)
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
// 獲得super已經計算好的布局屬性
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 計算collectionView最中心點的x值
CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
// 在原有布局屬性的基礎上,進行微調
for (UICollectionViewLayoutAttributes *attrs in array) {
// cell的中心點x 和 collectionView最中心點的x值 的間距
CGFloat delta = ABS(attrs.center.x - centerX);
// 根據間距值 計算 cell的縮放比例
CGFloat scale = 1 - delta / self.collectionView.frame.size.width;
// 設置縮放比例
attrs.transform = CGAffineTransformMakeScale(scale, scale);
}
return array;
}
/**
* 這個方法的返回值,就決定了collectionView停止滾動時的偏移量
*/
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{
// 計算出最終顯示的矩形框
CGRect rect;
rect.origin.y = 0;
rect.origin.x = proposedContentOffset.x;
rect.size = self.collectionView.frame.size;
// 獲得super已經計算好的布局屬性
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 計算collectionView最中心點的x值
CGFloat centerX = proposedContentOffset.x + self.collectionView.frame.size.width * 0.5;
// 存放最小的間距值
CGFloat minDelta = MAXFLOAT;
for (UICollectionViewLayoutAttributes *attrs in array) {
if (ABS(minDelta) > ABS(attrs.center.x - centerX)) {
minDelta = attrs.center.x - centerX;
}
}
// 修改原有的偏移量
proposedContentOffset.x += minDelta;
return proposedContentOffset;
}