之前我想用iOS完成安卓的 gallery 效果 我想到了cover flow 效果
最近在找工作比較閑就把這個(gè)效果給大家分享下
下面這個(gè)效果想必大家都能使用UIColletionView實(shí)現(xiàn)
最基本的.gif
上面的效果是我之前寫(xiě)的小demo在demo里面的注釋中可以看到我的思路
那么問(wèn)題來(lái)了這么讓兩個(gè)cell重疊并且讓中間的cell顯示在最上面呢?
讓cell重疊的方案:
// 在flowlayout類(lèi)中的這個(gè)方法中可以獲得attributes 對(duì)象
// 在這個(gè)方法中, 我們只要根據(jù)當(dāng)前的滾動(dòng), 對(duì)每個(gè)cell, 進(jìn)行對(duì)應(yīng)的縮放就可以了
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
// 在獲取到cell的attributes對(duì)象后對(duì)cell的size進(jìn)行放大
attr.size = CGSizeMake(self.itemSize.width * 1.5, self.itemSize.height * 1.5);
讓居中的cell的展現(xiàn)在最前面的解決方案是
在collectionView滾動(dòng)的時(shí)候 移動(dòng)collectionView的子控件使其位于collection 的center點(diǎn)的cell置頂
注意:一定要轉(zhuǎn)換坐標(biāo)系不然獲取不到中心點(diǎn)的cell
#pragma mark - didScorll
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
// 坐標(biāo)系轉(zhuǎn)換獲得collectionView上面的位于中心的cell
CGPoint pointInView = [self.view convertPoint:self.collectionView.center toView:self.collectionView];
// 獲取這一點(diǎn)的indexPath
NSIndexPath *indexPathNow = [self.collectionView indexPathForItemAtPoint:pointInView];
GLCell *cell = (GLCell *)[self.collectionView cellForItemAtIndexPath:indexPathNow];
[self.collectionView bringSubviewToFront:cell];
}
效果圖
畫(huà)廊.gif
demo下載地址:https://github.com/daleiLV/iOSCoverFlow
如有什么紕漏大家在評(píng)論中指出我會(huì)改正
