CollectionView-簡(jiǎn)單的布局:圓形布局

1.對(duì)于圓形布局的設(shè)置:


Snip20150904_1.png

1.1 不同于流水布局,因?yàn)榱魉季值慕缑?只有水平方向上的布置以及豎直方向上的布置兩種.
1.2 新的布局 為圓形布局,是所有的圖片圍成一圈的排列.所以新的布局不能繼續(xù)繼承于流水布局,而屬于自己去安排布局,繼承于他的基類 UICollectionViewLayout.

2.和水平縮放布局很像,對(duì)于布局元素 應(yīng)該在- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect此方法中安排顯示的布局集合.
3.重寫- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds使布局因素能夠?qū)崟r(shí)更新

Snip20150904_2.png

代碼如下:

// 確保能實(shí)時(shí)更新布局
- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}
// 進(jìn)行圓形布局,設(shè)置其每個(gè)元素的相關(guān)因素(主要是它的 frame,中心點(diǎn))
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
{
// 創(chuàng)建可變數(shù)組,用于儲(chǔ)存所有的布局因素
    NSMutableArray *layoutAtts = [NSMutableArray array];   
// 取出對(duì)應(yīng)布局中的 collectionView 的元素的數(shù)目(為的就是給一個(gè)個(gè)cell 獨(dú)立設(shè)置其的布局)
    NSInteger count =  [self.collectionView numberOfItemsInSection:0];
// 設(shè)置每個(gè) cell 的高度和寬度
    CGFloat WH = 50;
// 取出圓形視圖的中心點(diǎn) (也就是 collectionView 的中心點(diǎn))    
CGFloat centerX = self.collectionView.frame.size.width * 0.5;
    CGFloat centerY = self.collectionView.frame.size.height * 0.5; 
// 設(shè)置 圓形布局半徑   
    CGFloat randius = centerY- 30;   
// 獲得每個(gè) cell 之間的間距 (所有 cell 平分了整個(gè)圓) 
    CGFloat angelMargin = M_PI * 2 / count;   
// 遍歷進(jìn)行設(shè)置布局  
  for (int i = 0; i < count ; i ++) {       
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
// 創(chuàng)建對(duì)應(yīng)索引的布局
        UICollectionViewLayoutAttributes *layoutAtt = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
// 根據(jù)三角函數(shù)設(shè)置布局的中心點(diǎn)
        CGFloat a = sin(i * angelMargin) * randius;
        CGFloat b = cos(i * angelMargin) * randius;
        layoutAtt.center = CGPointMake(centerX + a, b+ centerY);
        layoutAtt.size = CGSizeMake(WH, WH);   
        [layoutAtts addObject:layoutAtt];
    }
    return layoutAtts;
}  
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容