先看看效果 ?折疊的幅度可以自己調(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
??