UICollectionViewFlowLayout是系統(tǒng)提供給我們一個封裝好的流布局設(shè)置類,它的父類是UICollectionViewLayout置蜀,相對于父類它具有一些特別的屬性奈搜。
下面依次講解每個屬性:
1、設(shè)置行與行之間的間距最小距離
@property (nonatomic) CGFloat minimumLineSpacing;
2盯荤、設(shè)置列與列之間的間距最小距離
@property (nonatomic) CGFloat minimumInteritemSpacing;
3馋吗、設(shè)置每個item的大小
@property (nonatomic) CGSize itemSize;
4、設(shè)置每個Item的估計大小秋秤,一般不需要設(shè)置
@property (nonatomic) CGSize estimatedItemSize NS_AVAILABLE_IOS(8_0);
5宏粤、設(shè)置布局方向
@property (nonatomic) UICollectionViewScrollDirection scrollDirection;
6、設(shè)置頭視圖尺寸大小
@property (nonatomic) CGSize headerReferenceSize;
7灼卢、設(shè)置尾視圖尺寸大小
@property (nonatomic) CGSize footerReferenceSize;
8绍哎、設(shè)置分區(qū)的EdgeInset
@property (nonatomic) UIEdgeInsets sectionInset;
9、下面這兩個方法設(shè)置分區(qū)的頭視圖和尾視圖是否始終固定在屏幕上邊和下邊
@property (nonatomic) BOOL sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
@property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);
? ? ? ? 看到這里我想大家也明白了鞋真,UICollectionViewFlowLayout相對于父類添加的屬性就是更好地創(chuàng)建的表格視圖崇堰。常用的有兩種類型的 collection view 布局:
1.獨(dú)立于內(nèi)容的布局計算。這正是你所知道的像 UITableView 和 UICollectionViewFlowLayout 這些情況涩咖。每個 cell 的位置和外觀不是基于其顯示的內(nèi)容海诲,但所有 cell 的顯示順序是基于內(nèi)容的順序¢莼ィ可以把默認(rèn)的 flow layout 做為例子特幔。每個 cell 都基于前一個 cell 放置(或者如果沒有足夠的空間,則從下一行開始)闸昨。布局對象不必訪問實際數(shù)據(jù)來計算布局蚯斯,此時最方便的就是用系統(tǒng)封裝好的UICollectionViewFlowLayout類了,當(dāng)然你可以直接用零院,也可以繼承它溉跃,自定義一些表格流。
2.基于內(nèi)容的布局計算告抄。布局對象直接訪問 collection view 的數(shù)據(jù)源撰茎,根據(jù)數(shù)據(jù)源再指定相應(yīng)的布局。在很多情況下打洼,布局對象不僅需要取出當(dāng)前可見 cell 的數(shù)據(jù)龄糊,還需要從所有記錄中取出一些決定當(dāng)前哪些 cell 可見的數(shù)據(jù)。所以如果有一個依賴內(nèi)容的布局募疮,那就是暗示你需要寫自定義的布局類了炫惩,同時不能使用自定義的 UICollectionViewFlowLayout。
-----------------
好了阿浓,原理介紹完了下面講解一下UICollectionViewFlowLayout用法和注意點(diǎn)(對于父類UICollectionViewFLayout的講解需要等到下篇文章哦):
重寫prepareLayout方法
- 作用:在這個方法中做一些初始化操作
- 注意:一定要調(diào)用[super prepareLayout]
重寫layoutAttributesForElementsInRect:方法
- 作用:
- 這個方法的返回值是個數(shù)組
- 這個數(shù)組中存放的都是UICollectionViewLayoutAttributes對象
- UICollectionViewLayoutAttributes對象決定了cell的排布方式(frame等)
重寫shouldInvalidateLayoutForBoundsChange:方法
- 作用:如果返回YES他嚷,那么collectionView顯示的范圍發(fā)生改變時,就會重新刷新布局
- 一旦重新刷新布局,就會按順序調(diào)用下面的方法:
- prepareLayout
- layoutAttributesForElementsInRect:
重寫targetContentOffsetForProposedContentOffset:withScrollingVelocity:方法
- 作用:返回值決定了collectionView停止?jié)L動時最終的偏移量(contentOffset)
- 參數(shù):
- proposedContentOffset:原本情況下筋蓖,collectionView停止?jié)L動時最終的偏移量
- velocity:滾動速率卸耘,通過這個參數(shù)可以了解滾動的方向
--------------------
不多說了直接上代碼:
- (instancetype)init
{
if (self = [super init]) {
}
return self;
}
/**
* 當(dāng)collectionView的顯示范圍發(fā)生改變的時候,是否需要重新刷新布局
* 一旦重新刷新布局粘咖,就會重新調(diào)用下面的方法:
1.prepareLayout
2.layoutAttributesForElementsInRect:方法
*/
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
return YES;
}
/**
* 用來做布局的初始化操作(不建議在init方法中進(jìn)行布局的初始化操作)
*/
- (void)prepareLayout
{
[super prepareLayout];
// 水平滾動
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
// 設(shè)置內(nèi)邊距
CGFloat inset = (self.collectionView.frame.size.width - self.itemSize.width) * 0.5;
self.sectionInset = UIEdgeInsetsMake(0, inset, 0, inset);
}
/**
UICollectionViewLayoutAttributes *attrs;
1.一個cell對應(yīng)一個UICollectionViewLayoutAttributes對象
2.UICollectionViewLayoutAttributes對象決定了cell的frame
*/
/**
* 這個方法的返回值是一個數(shù)組(數(shù)組里面存放著rect范圍內(nèi)所有元素的布局屬性)
* 這個方法的返回值決定了rect范圍內(nèi)所有元素的排布(frame)
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
// 獲得super已經(jīng)計算好的布局屬性
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 計算collectionView最中心點(diǎn)的x值
CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.frame.size.width * 0.5;
// 在原有布局屬性的基礎(chǔ)上蚣抗,進(jìn)行微調(diào)
for (UICollectionViewLayoutAttributes *attrs in array) {
// cell的中心點(diǎn)x 和 collectionView最中心點(diǎn)的x值 的間距
CGFloat delta = ABS(attrs.center.x - centerX);
// 根據(jù)間距值 計算 cell的縮放比例
CGFloat scale = 1 - delta / self.collectionView.frame.size.width;
// 設(shè)置縮放比例
attrs.transform = CGAffineTransformMakeScale(scale, scale);
}
return array;
}
/**
* 這個方法的返回值,就決定了collectionView停止?jié)L動時的偏移量
*/
- (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已經(jīng)計算好的布局屬性
NSArray *array = [super layoutAttributesForElementsInRect:rect];
// 計算collectionView最中心點(diǎn)的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;
}