CollectionView网格布局

Posted 2020-07-01 西贝了爷

概述

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

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

实现效果

FlowLayout

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

// ios6.0以后才有的 NS_CLASS_AVAILABLE_IOS(6_0) @interface UICollectionViewFlowLayout : UICollectionViewLayout   // 行之间的最小间距 @property (nonatomic) CGFloat minimumLineSpacing; // item之间的最小间距 @property (nonatomic) CGFloat minimumInteritemSpacing;   // 如果cell的大小是固定的，应该直接设置此属性，就不用实现代理 @property (nonatomic) CGSize itemSize;   // 这是8.0后才能使用，评估item的大小 @property (nonatomic) CGSize estimatedItemSize NS_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 sectionHeadersPinToVisibleBounds NS_AVAILABLE_IOS(9_0); @property (nonatomic) BOOL sectionFootersPinToVisibleBounds NS_AVAILABLE_IOS(9_0);   @end

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

创建CollectionView

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

// 创建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.view addSubview:self.collectionView];   // 注册cell [self.collectionView registerClass:[HYBGridCell class]       forCellWithReuseIdentifier:cellIdentifier]; // 设置代理 self.collectionView.delegate = self; self.collectionView.backgroundColor = [UIColor blackColor]; // 设置数据源代理 self.collectionView.dataSource = self;

实现代理

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

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

HYBGridCell

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

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

- (instancetype)initWithFrame:(CGRect)frame {   if (self = [super initWithFrame:frame]) {     self.imageView = [[UIView alloc] init];     self.imageView.frame = CGRectMake(0, 0, self.frame.size.width, self.frame.size.width);     [self.contentView addSubview: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 = [UIFont systemFontOfSize:16];     self.titleLabel.textColor = [UIColor whiteColor];     self.titleLabel.backgroundColor = [UIColor blackColor];     self.titleLabel.layer.masksToBounds = YES;     [self.contentView addSubview:self.titleLabel];   }      return self; }