collectionView實現(xiàn)簡易的折疊效果

先看看效果 ?折疊的幅度可以自己調(diào)節(jié)


擼碼前 先理下幾點思路?

1 . ? 每個item的高度實時在變化 ? 由于基于 collectionView ?所以需要自定義layout 來重新布局 ?(使用UICollectionViewFlowLayout)

2.? ? 每個item包含一張可折疊的圖片? 這里需要item的兩個子視圖 imageView 隨 ?collectionView 滾動 做不同的transform變換

3. ? ?屏幕最初的形態(tài)是 頂端item已經(jīng)完全展開 中間item為大半展開狀態(tài) 下面看不見的item為小半展開狀態(tài)

4. ?在這里展開的過程 和 滾動距離 成線性函數(shù)關(guān)系?


基于幾點思路展開

布局的原理?

首先規(guī)定IC_CELL_HEIGHT(item展開后高度)為每輪固定滾動距離 從中間item 到頂端item的過程 滾動的距離相對于item展開后的高度?

所以我們需要在這個滾動距離內(nèi)完成一次展開的過程?

展開的過程中 imageView由于變換 他的frame.size.height 是不停變化的?

所以在展開的過程中 我們要實時的擴(kuò)展item的高度 并且下移下面的imageview

讓兩個imageview剛好貼合


此方法進(jìn)行重新布局

-(NSArray*)layoutAttributesForElementsInRect:(CGRect)rect


當(dāng)前 item(大半)的indexpath.row

floorf(scroll_y/IC_CELL_HEIGHT) + 1


這樣才能給定相應(yīng)計算方法 讓上一個item(完全的)保持不變 讓當(dāng)前的(大半的)和下一個(小半) imageview做相應(yīng)transform變化

if (fix_foldCell)

{self.height_secondItem = [self rotation_imageViewWithPercent:current_percent atCell:fix_foldCell atIndex:1];}

attributes.frame = CGRectMake(0, IC_CELL_HEIGHT*row, IC_CELL_WIDTH,self.height_secondItem);


上面方法有個對 fix_foldcell 的判斷?

由于布局方法是先于cell調(diào)用的 所以在初始化布局時候 我們是無法得知cell初始化的狀態(tài) 也就無法得知imageview的初始狀態(tài) 所以在cell初始化的時候 需要給定indexpath.row=1 和2時imageview相應(yīng)的初始狀態(tài)?

同時由于布局先調(diào)用 需要提供indexpath.row=1 和2時的item高度 所以在這里我的解決方法是用一個模型view模擬imageview在此位置時候變換的相應(yīng)高度


給定 內(nèi)容尺寸的大小 ?

我們需要讓所有item都能完成展開 尺寸就是如下

-(CGSize)collectionViewContentSize{

return? CGSizeMake(IC_UISCREEN_BOUNDS_WIDTH, IC_UISCREEN_BOUNDS_HEIGHT+(self.itemCount-1)*IC_CELL_HEIGHT);

}


以上只是零星片段的思路? 僅作參考 可能有點表述不清 請多多指正??

具體細(xì)節(jié)? 完整的代碼po這里了 微博 @itchycat


??

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌叫胁,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件钧忽,死亡現(xiàn)場離奇詭異油够,居然都是意外死亡瘦癌,警方通過查閱死者的電腦和手機(jī)艾帐,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評論 3 399
  • 文/潘曉璐 我一進(jìn)店門乌叶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人柒爸,你說我怎么就攤上這事∈屡ぃ” “怎么了捎稚?”我有些...
    開封第一講書人閱讀 169,421評論 0 362
  • 文/不壞的土叔 我叫張陵,是天一觀的道長求橄。 經(jīng)常有香客問我今野,道長,這世上最難降的妖魔是什么罐农? 我笑而不...
    開封第一講書人閱讀 60,114評論 1 300
  • 正文 為了忘掉前任条霜,我火速辦了婚禮,結(jié)果婚禮上涵亏,老公的妹妹穿的比我還像新娘宰睡。我一直安慰自己蒲凶,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 69,116評論 6 398
  • 文/花漫 我一把揭開白布拆内。 她就那樣靜靜地躺著旋圆,像睡著了一般。 火紅的嫁衣襯著肌膚如雪麸恍。 梳的紋絲不亂的頭發(fā)上灵巧,一...
    開封第一講書人閱讀 52,713評論 1 312
  • 那天,我揣著相機(jī)與錄音抹沪,去河邊找鬼刻肄。 笑死,一個胖子當(dāng)著我的面吹牛融欧,可吹牛的內(nèi)容都是我干的肄方。 我是一名探鬼主播,決...
    沈念sama閱讀 41,170評論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼蹬癌,長吁一口氣:“原來是場噩夢啊……” “哼权她!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起逝薪,我...
    開封第一講書人閱讀 40,116評論 0 277
  • 序言:老撾萬榮一對情侶失蹤隅要,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后董济,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體步清,經(jīng)...
    沈念sama閱讀 46,651評論 1 320
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,714評論 3 342
  • 正文 我和宋清朗相戀三年虏肾,在試婚紗的時候發(fā)現(xiàn)自己被綠了廓啊。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,865評論 1 353
  • 序言:一個原本活蹦亂跳的男人離奇死亡封豪,死狀恐怖谴轮,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情吹埠,我是刑警寧澤第步,帶...
    沈念sama閱讀 36,527評論 5 351
  • 正文 年R本政府宣布,位于F島的核電站缘琅,受9級特大地震影響粘都,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜刷袍,卻給世界環(huán)境...
    茶點故事閱讀 42,211評論 3 336
  • 文/蒙蒙 一翩隧、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧呻纹,春花似錦堆生、人聲如沸专缠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,699評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽藤肢。三九已至,卻和暖如春糯景,著一層夾襖步出監(jiān)牢的瞬間嘁圈,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,814評論 1 274
  • 我被黑心中介騙來泰國打工蟀淮, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留最住,地道東北人。 一個月前我還...
    沈念sama閱讀 49,299評論 3 379
  • 正文 我出身青樓怠惶,卻偏偏與公主長得像涨缚,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子策治,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,870評論 2 361

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