iOS流佈局UICollectionView系列五——圓環佈局的實現

iOS流佈局UICollectionView系列五——圓環佈局的實現

1、引言

        前邊的幾篇博客，咱們瞭解了UICollectionView的基本用法以及一些擴展，在不定高的瀑布流佈局中，咱們發現，能夠經過設置具體的佈局屬性類UICollectionViewLayoutAttributes來設置設置每一個item的具體位置，咱們能夠再擴展一下，若是位置咱們能夠自由控制，那個佈局咱們也能夠更加靈活，就好比建立一個以下的circleLayout：

這種佈局方式在apple的官方文檔中也有介紹，是UICollectionView的一個應用示例。

2、設計一個圓環佈局

        接着咱們之前的想法，依然時候隨機顏色的色塊來表達咱們的item，先自定義一個layout類，這個類繼承於UICollectionViewLayout，UICollectionLayout是一個佈局抽象基類，咱們要使用自定義的佈局方式，必須將其子類化，可能你還記得，咱們在進行瀑布流佈局的時候使用過UICollectionViewFlowLayout類，這個類就是繼承於UICollectionViewLayout類，系統爲咱們實現好的一個佈局方案。

@interface MyLayout : UICollectionViewLayout
//這個int值存儲有多少個item
@property(nonatomic,assign)int itemCount;
@end

 

咱們須要重寫這個類的三個方法，來進行圓環佈局的設置，首先是prepareLayout，爲佈局作一些準備工做，使用collectionViewContentSize來設置內容的區域大小，最後使用layoutAttributesForElementsInRect方法來返回咱們的佈局信息字典，這個前面瀑布流佈局的思路是同樣的：

@implementation MyLayout
{
    NSMutableArray * _attributeAttay;
}
-(void)prepareLayout{
    [super prepareLayout];
    //獲取item的個數
    _itemCount = (int)[self.collectionView numberOfItemsInSection:0];
    _attributeAttay = [[NSMutableArray alloc]init];
    //先設定大圓的半徑 取長和寬最短的
    CGFloat radius = MIN(self.collectionView.frame.size.width, self.collectionView.frame.size.height)/2;
    //計算圓心位置
    CGPoint center = CGPointMake(self.collectionView.frame.size.width/2, self.collectionView.frame.size.height/2);
    //設置每一個item的大小爲50*50 則半徑爲25
    for (int i=0; i<_itemCount; i++) {
        UICollectionViewLayoutAttributes * attris = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:[NSIndexPath indexPathForItem:i inSection:0]];
        //設置item大小
        attris.size = CGSizeMake(50, 50);
        //計算每一個item的圓心位置
        /*
         .
         . .
         .   . r
         .     .
         .........
         */
        //計算每一個item中心的座標
        //算出的x y值還要減去item自身的半徑大小
        float x = center.x+cosf(2*M_PI/_itemCount*i)*(radius-25);
        float y = center.y+sinf(2*M_PI/_itemCount*i)*(radius-25);
     
        attris.center = CGPointMake(x, y);
        [_attributeAttay addObject:attris];
    }
    
   
    
}
//設置內容區域的大小
-(CGSize)collectionViewContentSize{
    return self.collectionView.frame.size;
}
//返回設置數組
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
    return _attributeAttay;
}

 

在viewController中代碼以下：

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    MyLayout * layout = [[MyLayout alloc]init];
     UICollectionView * collect  = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, 320, 400) collectionViewLayout:layout];
    collect.delegate=self;
    collect.dataSource=self;
    
    [collect registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellid"];
    [self.view addSubview:collect];
}

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
    return 1;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 10;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    UICollectionViewCell * cell  = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellid" forIndexPath:indexPath];
    cell.layer.masksToBounds = YES;
    cell.layer.cornerRadius = 25;
    cell.backgroundColor = [UIColor colorWithRed:arc4random()%255/255.0 green:arc4random()%255/255.0 blue:arc4random()%255/255.0 alpha:1];
    return cell;
}

 

如上很是簡單的一些邏輯控制，咱們就實現哦圓環佈局，隨着item的多少，佈局會自動調整，若是不是UICollectionView的功勞，實現這樣的功能，咱們可能要寫上一陣子了^_^。

專一技術，熱愛生活，交流技術，也作朋友。

——琿少 QQ羣：203317592