UICollectionView（简单使用）

这玩意 水很深啊。内容比 UITableView 更多更华丽。UITableView 也可以算是 它的一种样式而已吧。

首先使用最简单的 方块规则 排布 ：举例简单使用。

• 1 选择 布局样式：UICollectionViewFlowLayout 方块照片墙类似

    // 布局设置
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;// 滚动方向
    
// 以下 属性可以通过  UICollectionViewDelegateFlowLayout 代理改变
    flowLayout.sectionInset = UIEdgeInsetsMake(10, 20, 30, 40);// section 四周 边缘 
    flowLayout.minimumLineSpacing = 40;// 竖向 cell 最小间距
    flowLayout.minimumInteritemSpacing = 10;// 横向 cell 最小间距
    
    flowLayout.itemSize = CGSizeMake(100, 120);// cell 大小
    flowLayout.headerReferenceSize = CGSizeMake(10, 20);// section 头大小
    flowLayout.footerReferenceSize = CGSizeMake(10, 40);// section 尾大小

• 2 与UITableView 类似的 delegate 和dasource 实现就好了

    self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:flowLayout];
    self.collectionView.delegate = self;
    self.collectionView.dataSource = self;
    [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class])];
    [self.view addSubview:self.collectionView];


#pragma mark - delegate and datasosurce

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 11;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:NSStringFromClass([UICollectionViewCell class]) forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

• 3 自定义 collectionCell 也类似 UITableView 就可以了。

代码就不写了。
看到这里 是不是觉得 so easy！真正的强大远不止如此。
对于最开始所说的布局样式，可以完全自定义........水太深，站不住了。

简单自定义 布局样式（圆形）

也是参考来的 sorry了啊，准备以下4 个方法 就可以简单自定义布局了。

// 准备 布局
- (void)prepareLayout {
    [super prepareLayout];
    
// 此处用了 3 个全局变量，不贴代码了
    CGSize size = self.collectionView.frame.size;
    self.cellCount = [self.collectionView numberOfItemsInSection:0];
    self.radius = MIN(size.width, size.height) / 2.5;
    self.center = self.collectionView.center;
}

// 确定 滚动区域大小
- (CGSize)collectionViewContentSize {
    
    return self.collectionView.frame.size;
}

// 制造 单个 cell 布局的属性
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
    attributes.size = CGSizeMake(44, 44);
    attributes.center = CGPointMake(self.center.x + self.radius * cosf(2 * M_PI * indexPath.item / self.cellCount), self.center.y + self.radius * sinf(2 * M_PI * indexPath.item / self.cellCount));
    
    return attributes;
}

// 制造 给定数据源的 所有cell 的布局属性
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
    
    NSMutableArray *muArr = [NSMutableArray array];
    for (NSInteger i = 0; i < self.cellCount; i ++) {
        [muArr addObject:[self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForItem:i inSection:0]]];
    }
    
    return muArr;
}

其他 更多插入移除等动画效果的 高级布局 下次再来。

1