这玩意 水很深啊。内容比 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
