UICollectionViewFlowLayout

UICollectionViewFlowLayout是系統(tǒng)提供給我們一個封裝好的流布局設(shè)置類,它的父類是UICollectionViewLayout置蜀,相對于父類它具有一些特別的屬性奈搜。

UICollectionViewFlowLayout的屬性

下面依次講解每個屬性:

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;

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末瓮下,一起剝皮案震驚了整個濱河市翰铡,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌讽坏,老刑警劉巖锭魔,帶你破解...
    沈念sama閱讀 218,755評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異路呜,居然都是意外死亡赂毯,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,305評論 3 395
  • 文/潘曉璐 我一進(jìn)店門拣宰,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人烦感,你說我怎么就攤上這事巡社。” “怎么了手趣?”我有些...
    開封第一講書人閱讀 165,138評論 0 355
  • 文/不壞的土叔 我叫張陵晌该,是天一觀的道長。 經(jīng)常有香客問我绿渣,道長朝群,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,791評論 1 295
  • 正文 為了忘掉前任中符,我火速辦了婚禮姜胖,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘淀散。我一直安慰自己右莱,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,794評論 6 392
  • 文/花漫 我一把揭開白布档插。 她就那樣靜靜地躺著慢蜓,像睡著了一般。 火紅的嫁衣襯著肌膚如雪郭膛。 梳的紋絲不亂的頭發(fā)上晨抡,一...
    開封第一講書人閱讀 51,631評論 1 305
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼耘柱。 笑死如捅,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的帆谍。 我是一名探鬼主播伪朽,決...
    沈念sama閱讀 40,362評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼汛蝙!你這毒婦竟也來了烈涮?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,264評論 0 276
  • 序言:老撾萬榮一對情侶失蹤窖剑,失蹤者是張志新(化名)和其女友劉穎坚洽,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體西土,經(jīng)...
    沈念sama閱讀 45,724評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡讶舰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了需了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片跳昼。...
    茶點(diǎn)故事閱讀 40,040評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖肋乍,靈堂內(nèi)的尸體忽然破棺而出鹅颊,到底是詐尸還是另有隱情,我是刑警寧澤墓造,帶...
    沈念sama閱讀 35,742評論 5 346
  • 正文 年R本政府宣布堪伍,位于F島的核電站,受9級特大地震影響觅闽,放射性物質(zhì)發(fā)生泄漏帝雇。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,364評論 3 330
  • 文/蒙蒙 一蛉拙、第九天 我趴在偏房一處隱蔽的房頂上張望尸闸。 院中可真熱鬧,春花似錦刘离、人聲如沸室叉。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,944評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽茧痕。三九已至,卻和暖如春恼除,著一層夾襖步出監(jiān)牢的瞬間踪旷,已是汗流浹背曼氛。 一陣腳步聲響...
    開封第一講書人閱讀 33,060評論 1 270
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留令野,地道東北人舀患。 一個月前我還...
    沈念sama閱讀 48,247評論 3 371
  • 正文 我出身青樓,卻偏偏與公主長得像气破,于是被迫代替她去往敵國和親聊浅。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,979評論 2 355

推薦閱讀更多精彩內(nèi)容