神刀安全网

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
联系标哥 关于标哥 保持活跃在最前线

版权声明:本文为【标哥的技术博客】原创出品,欢迎转载,转载时请注明出处!

CollectionView网格布局 CollectionView网格布局 CollectionView网格布局

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » CollectionView网格布局

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮