给我两分钟的时间：微博风格九宫格：UICollectionView实现

引言

UICollectionView 是 iOS 平台上一种强大的视图布局工具，能够很好地实现网格布局，列表布局等多种布局方式。
首先讲下今天的目标，我们将要使用 UICollectionView 来创建仿微博的九宫格内容。首先，目标行数为3，每行显示3张图片，总共显示9张图片。
实现方式

我们往界面上添加一个 UICollectionView，并创建一个 UICollectionViewFlowLayout 布局类，这里的实现为懒加载的方式：

1. - (UICollectionView *)collectionView {
2.     if (!_collectionView) {
3.             UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
4.         _collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout];
5.         _collectionView.scrollEnabled = NO; // 设置不让滑动
6.         [self.view addSubview:_collectionView];
7.     }
8.     return _collectionView;
9. }

复制代码

为自定义 cell 注册到 UICollectionView 中：

1. [_collectionView registerClass:[GCImageGridCell class] forCellWithReuseIdentifier:kGCImageGridCell];

复制代码

然后，我们设置 UICollectionView  的数据源协议：

1. _collectionView.dataSource = self;

复制代码

接着实现 UICollectionView 的协议内容：

1. - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
2.     return self.datas.count;
3. }
5. - (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
6.     GCImageGridCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kGCImageGridCell forIndexPath:indexPath];
7.     NSString *imgName = self.datas[indexPath.row];
8.     cell.imgView.image = [UIImage imageNamed:imgName];
9.     return cell;
10. }

复制代码

接着，设置前面的 UICollectionViewFlowLayout 的属性，将滑动的方向设置为纵向滑动：

1. layout.scrollDirection = UICollectionViewScrollDirectionVertical; //设置布局方式为纵向布局

复制代码

接下来，计算每个 item 的大小、item 之间的间距和行距、每个分组之间的间距：

1. CGFloat screenWidth = [[UIScreen mainScreen] bounds].size.width;
2. CGFloat horizontal = 16; // 左右边距
3. CGFloat itemSpace = 6; // item 的间距
4. CGFloat itemSize = (screenWidth - horizontal * 2 - itemSpace * 2) / 3; // 计算每个 item 的大小
5. layout.minimumLineSpacing = itemSpace;
6. layout.minimumInteritemSpacing = itemSpace;
7. layout.sectionInset = UIEdgeInsetsMake(0, horizontal, 0, horizontal);
8. layout.itemSize = CGSizeMake(floor(itemSize), floor(itemSize));

复制代码

注意：计算item大小时使用到了floor函数向下取整，这是防止每行的 item 有超出屏幕而导致换行的问题

效果呈现

总结

在这篇文章中，我们学习了如何用 UICollectionView 来制作九宫格布局。希望这篇文章能为大家带来帮助，快来关注我，让我们一起努力！
关于作者

博文作者：GarveyCalvin
公众号：凡人程序猿
微博：https://weibo.com/feiyueharia
博客园：https://www.cnblogs.com/GarveyCalvin
本文版权归作者所有，欢迎转载，但必须保留此段声明，并给出原文链接，谢谢合作！

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！