转载

CollectionView网格布局

概述

说句老实话，UICollectionView真的太强大了，而且要掌握高级部分是相当困难的。至少笔者是这么认为的，如果觉得自己比较厉害，可以轻而易举地掌握UICollectionView的使用的，希望可以总结点经验！

本篇文章是在练习如何使用UICollectionView进行网格布局。网格布局是非常常见的UI布局，在很多的App中都这么设计过。本篇文章只讲如何实现风格布局，demo中有一些是优化方面的，会单独写一篇文章讲解如何优化网格布局中的图片。

实现效果

CollectionView网格布局

FlowLayout

本demo中需要使用到UICollectionViewFlowLayout，因此先讲讲这个类：

  // iOS6.0以后才有的 NS_CLASS_AVAILABLE_IOS(6_0) @interfaceUICollectionViewFlowLayout: UICollectionViewLayout   // 行之间的最小间距 @property (nonatomic) CGFloat minimumLineSpacing; // item之间的最小间距 @property (nonatomic) CGFloat minimumInteritemSpacing;   // 如果cell的大小是固定的，应该直接设置此属性，就不用实现代理 @property (nonatomic) CGSize itemSize;   // 这是8.0后才能使用，评估item的大小 @property (nonatomic) CGSize estimatedItemSizeNS_AVAILABLE_IOS(8_0);    // 支持两种滚动方向，水平滚动和竖直功能 // 因此不要再想要使用横向tableview，直接使用collectionview就okb @property (nonatomic) UICollectionViewScrollDirection scrollDirection;   // header参考大小 @property (nonatomic) CGSize headerReferenceSize; // footer参考大小 @property (nonatomic) CGSize footerReferenceSize; // section的inset，用于设置与上、左、底、右的间隔 @property (nonatomic) UIEdgeInsets sectionInset;   // 9.0以后才有的属性，用于设置header/footer与tableview的section效果一样。 // 可以悬停 @property (nonatomic) BOOL sectionHeadersPinToVisibleBoundsNS_AVAILABLE_IOS(9_0); @property (nonatomic) BOOL sectionFootersPinToVisibleBoundsNS_AVAILABLE_IOS(9_0);   @end

这个类是用于决定UICollectionView的item的布局的。

创建CollectionView

  // 创建UI布局 UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];   // 设置成固定的大小     layout.itemSize = CGSizeMake((kScreenWidth - 30) / 2, (kScreenWidth - 30) / 2 + 20);   // 行间距最小设置为10 layout.minimumLineSpacing = 10; // 列间距最小设置为10 layout.minimumInteritemSpacing = 10;    self.collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds                                        collectionViewLayout:layout]; [self.viewaddSubview:self.collectionView];   // 注册cell [self.collectionViewregisterClass:[HYBGridCell class]       forCellWithReuseIdentifier:cellIdentifier]; // 设置代理 self.collectionView.delegate = self; self.collectionView.backgroundColor = [UIColor blackColor]; // 设置数据源代理 self.collectionView.dataSource = self;

实现代理

  #pragma mark - UICollectionViewDataSource & UICollectionViewDelegate - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView                   cellForItemAtIndexPath:(NSIndexPath *)indexPath {   HYBGridCell *cell = [collectionViewdequeueReusableCellWithReuseIdentifier:cellIdentifier                                                                          forIndexPath:indexPath];   HYBGridModel *model = self.datasource[indexPath.item];   [cellconfigCellWithModel:model];      return cell; }   - (NSInteger)collectionView:(UICollectionView *)collectionViewnumberOfItemsInSection:(NSInteger)section {   return self.datasource.count; }

HYBGridCell

创建一个对应的cell，这里呢实现只是简单的添加两个控件而已：

  - (instancetype)initWithFrame:(CGRect)frame {   if (self = [superinitWithFrame:frame]) {     self.imageView = [[UIView alloc]init];     self.imageView.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.width);     [self.contentViewaddSubview:self.imageView];          self.titleLabel = [[UILabel alloc]init];     self.titleLabel.frame = CGRectMake(0, self.frame.size.height - 20, self.frame.size.width, 20);     self.titleLabel.numberOfLines = 0;     self.titleLabel.font = [UIFontsystemFontOfSize:16];     self.titleLabel.textColor = [UIColor whiteColor];     self.titleLabel.backgroundColor = [UIColor blackColor];     self.titleLabel.layer.masksToBounds = YES;     [self.contentViewaddSubview:self.titleLabel];   }      return self; }

结尾

Demo中有些代理是用于在讲优化那篇文章再讲，这里没有抛出来。本篇的目的就是学习如何布局网格。

源代码

CollectionViewDemos

提示：本篇文章的demo对应于工程中的Demo1-GridCollectionView分组。

关注我

联系方式	关注	备注
标哥博客iOS交流群	324400294(满)\|494669518(满)\|494669518(满)\|250351140(新)	群里很活跃，定期清理
微信公众号	iOSDevShares	关注公众号阅读好文章
新浪微博	@标哥的技术博客	关注微博动态
GITHUB	CoderJackyHuang	文章Demo都在GITHUB
联系标哥	关于标哥	保持活跃在最前线