CollectionView之石工布局

石工布局(Masonty Layout)是指集合視圖中的物件模仿石灰漿墻咱台,常用來在二維空間中平鋪大量物件屈嗤。

現(xiàn)在創(chuàng)建一個UICollectionViewLayout的子類并添加到工程中,布局子類中主要有兩個職責(zé)选浑,首先是計算集合視圖中每個物件的frame办素,其次是計算集合視圖整個內(nèi)容的大小。

子類需要覆蓋的方法:

1.- (void)prepareLayout欣尼;//布局之前被調(diào)用爆雹,在這個方法中計算所有item的frame

2.- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect;//返回給定矩形中所有物件的屬性

3.- (CGSize)collectionViewContentSize; //返回集合視圖內(nèi)容的大小

在本例中愕鼓,物件的寬度應(yīng)該有兩個變量決定钙态,列數(shù)和item之間的間距,這種情況下菇晃,引入變量numberOfColums和itemSpacing册倒。物件的高度則由數(shù)據(jù)源提供一個變量,可以聲明一個委托對象磺送,在委托中驻子,聲明一個collectionView:Layout:heightForItemAtIndexPath:協(xié)議方法。

聲明相關(guān)變量及代理

接下來就是計算每個item的frame估灿。

1.計算item的寬度

計算item的width

2.計算Item的x坐標

計算item的X坐標

其中currentColumn為item所在的列拴孤。

3.計算item的y和高度

通過調(diào)用剛才寫的協(xié)議方法來的得到高度,在加上在這一列前面所有item的高度來得到y(tǒng)甲捏,這里使用了lastYValueForColum字典來維護了布局中所有列的高度演熟。

計算item的Y和高度

開始先從字典lastYValueForColumn中獲取y值,然后給y加上高度itemSpacing再保存到lastYValueForColumn中司顿。計算完成后芒粹,就保存到layoutInfo中,在下一個方法layoutAttributesForElementsInRect:中調(diào)用到layoutInfo大溜。當集合視圖滾動時化漆,系統(tǒng)會調(diào)用這個方法并傳遞可見的矩形區(qū)域。用CGRectIntersectsRect方法可以把這個區(qū)域中的item篩選出來钦奋,返回一個裝有這些item的數(shù)組座云。代碼實現(xiàn)如下:

返回一個裝有可見item的attribute數(shù)組

接下來的任務(wù)就是計算集合視圖內(nèi)容的大小,y值已經(jīng)存在lastYValueForColumn字典中付材,我們擴遍歷這個字典中找到每列中最大y值作為集合視圖的contentSize的height朦拖。這個方法涉及到所有類型的視圖,也就是cell厌衔,supplementary views和decoration views璧帝。如果選擇忽略傳入的矩形,并且為collection view中的所有視圖返回布局屬性富寿。這將對性能產(chǎn)生非常壞的影響睬隶,特別是可見cell遠少于所有cell數(shù)量的時候锣夹,collection view和布局對象將會為那些不可見的視圖做額外不必要的工作。

集合集合視圖的contentSize

最后苏潜,當 collection view 的 bounds 改變時银萍,布局需要告訴 collection view 是否需要重新計算布局。scroll view 的 bounds 在滾動時也會改變恤左,這意味著你的布局每秒會被丟棄多次贴唇。根據(jù)計算的復(fù)雜性判斷,這將會對性能產(chǎn)生很大的影響赃梧。

當 collection view 的寬度改變時滤蝠,我們自定義的布局必須被丟棄,但這滾動并不會影響到布局授嘀。collection view 將它的新 bounds 傳給shouldInvalidateLayoutForBoundsChange:方法物咳。這樣我們便能比較視圖當前的bounds 和新的 bounds 來確定返回值:

是否丟棄原有的布局

好了,小工告成蹄皱。喜歡的點個贊览闰,不喜歡的打賞幾塊吧。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末巷折,一起剝皮案震驚了整個濱河市压鉴,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌锻拘,老刑警劉巖油吭,帶你破解...
    沈念sama閱讀 206,723評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異署拟,居然都是意外死亡婉宰,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,485評論 2 382
  • 文/潘曉璐 我一進店門推穷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來心包,“玉大人,你說我怎么就攤上這事馒铃⌒诽冢” “怎么了?”我有些...
    開封第一講書人閱讀 152,998評論 0 344
  • 文/不壞的土叔 我叫張陵区宇,是天一觀的道長娃殖。 經(jīng)常有香客問我,道長萧锉,這世上最難降的妖魔是什么珊随? 我笑而不...
    開封第一講書人閱讀 55,323評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮柿隙,結(jié)果婚禮上叶洞,老公的妹妹穿的比我還像新娘。我一直安慰自己禀崖,他們只是感情好衩辟,可當我...
    茶點故事閱讀 64,355評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著波附,像睡著了一般艺晴。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上掸屡,一...
    開封第一講書人閱讀 49,079評論 1 285
  • 那天封寞,我揣著相機與錄音,去河邊找鬼仅财。 笑死狈究,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的盏求。 我是一名探鬼主播抖锥,決...
    沈念sama閱讀 38,389評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼碎罚!你這毒婦竟也來了磅废?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,019評論 0 259
  • 序言:老撾萬榮一對情侶失蹤荆烈,失蹤者是張志新(化名)和其女友劉穎拯勉,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體憔购,經(jīng)...
    沈念sama閱讀 43,519評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡宫峦,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,971評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了倦始。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片斗遏。...
    茶點故事閱讀 38,100評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖鞋邑,靈堂內(nèi)的尸體忽然破棺而出诵次,到底是詐尸還是另有隱情,我是刑警寧澤枚碗,帶...
    沈念sama閱讀 33,738評論 4 324
  • 正文 年R本政府宣布逾一,位于F島的核電站,受9級特大地震影響肮雨,放射性物質(zhì)發(fā)生泄漏遵堵。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,293評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望陌宿。 院中可真熱鬧锡足,春花似錦、人聲如沸壳坪。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,289評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽爽蝴。三九已至沐批,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蝎亚,已是汗流浹背九孩。 一陣腳步聲響...
    開封第一講書人閱讀 31,517評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留发框,地道東北人躺彬。 一個月前我還...
    沈念sama閱讀 45,547評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像缤底,于是被迫代替她去往敵國和親顾患。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,834評論 2 345

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