iOS开发之UICollectionViewController系列(三) :使用UICollectionView自定义瀑布流

2016年已经开始,我们这些IT精英们也将很快回到各自的岗位,继续为改变世界的生活方式而思考着。俗话说,一年之际在于春,一日之际在于晨,所以我选择在新年伊始的清晨写下这篇文章以立下弘誓大愿,望来年回首不负众望。煽情的话不必多说,浪费大家的时间就是对大家的不尊重,直入主题。 上篇博客的实例是自带的UICollectionViewDelegateFlowLayout布局基础上来做的Demo, 详情请看《iOS开发之UICollectionViewController系列(二) –详解CollectionView各种回调》。UICollectionView之所以强大,是因为其具有自定义功能,这一自定义就不得了啦,自由度非常大,定制的高,所以功能也是灰常强大的。本篇博客就不使用自带的流式布局了,我们要自定义一个瀑布流。自定义的瀑布流可以配置其参数: 每个Cell的边距,共有多少列,Cell的最大以及最小高度是多少等。 一.先入为主 先来看一下不同配置参数下运行后的效果吧,每张截图的列数和Cell之间的边距都有所不同,瀑布流的列数依次为2,3,8。有密集恐惧证的童鞋就不要看这些运行效果图了,真的会看晕的。下面这些运行效果就是修改不同的配置参数来进行布局的。看图吧,关于瀑布流的效果就不啰嗦了。以下的效果就是使用自定义布局做的,接下来将会介绍一下其实现原理。

二. UICollectionViewLayout 在介绍上述效果实现原理之前,需要介绍一下UICollectionViewLayout。UICollectionView的自定义功能就是自己去实现UICollectionViewLayout的子类,然后重写相应的方法来实现Cell的布局,先介绍一下需要重写的方法,然后再此方法上进行应用实现上述瀑布流。好,废话少说,干活走起。 1.布局预加载函数 当布局首次被加载时会调用prepareLayout函数,见名知意,就是预先加载布局,在该方法中可以去初始化布局相关的数据。该方法类似于视图控制器的ViewDidLoad方法,稍后回用到该方法。

Objective-C

// The collection view calls -prepareLayout once at its first layout as the first message to the layout instance. 
// The collection view calls -prepareLayout again after layout is invalidated and before requerying the layout information.
// Subclasses should always call super if they override. - (void)prepareLayout;
// The collection view calls -prepareLayout once at its first layout as the first message to the layout instance.
// The collection view calls -prepareLayout again after layout is invalidated and before requerying the layout information.
// Subclasses should always call super if they override.

 - (void)prepareLayout;

2.内容滚动范围 下方是定义ContentSize的方法。该方法会返回CollectionView的大小,这个方法也是自定义布局中必须实现的方法。说白了,就是设置ScrollView的ContentSize,即滚动区域。

Objective-C

 // Subclasses must override this method and use it to return the width and height of the collection view’s content. These values represent the width and height of all the content, not just the content that is currently visible. The collection view uses this information to configure its own content size to facilitate scrolling.

 - (CGSize)collectionViewContentSize;
  1. 下方四个方法是确定布局属性的,下方第一个方法返回一个数组,该数组中存放的是为每个Cell绑定的UICollectionViewLayoutAttributes属性,便于在下面第二个方法中去定制每个Cell的属性。第三个方法就是根据indexPath来获取Cell所绑定的layoutAtrributes, 然后去更改UICollectionViewLayoutAttributes对象的一些属性并返回,第四个是为Header View或者FooterView来定制其对应的UICollectionViewLayoutAttributes,然后返回。

Objective-C

 // UICollectionView calls these four methods to determine the layout information.
 // Implement -layoutAttributesForElementsInRect: to return layout attributes for for supplementary or decoration views, or to perform layout in an as-needed-on-screen fashion.
 // Additionally, all layout subclasses should implement -layoutAttributesForItemAtIndexPath: to return layout attributes instances on demand for specific index paths.
 // If the layout supports any supplementary or decoration view types, it should also implement the respective atIndexPath: methods for those types.
 - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect; // return an array layout attributes instances for all the views in the given rect
 - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath;
 - (UICollectionViewLayoutAttributes *)layoutAttributesForSupplementaryViewOfKind:(NSString *)elementKind atIndexPath:(NSIndexPath *)indexPath;
 - (UICollectionViewLayoutAttributes *)layoutAttributesForDecorationViewOfKind:(NSString*)elementKind atIndexPath:(NSIndexPath *)indexPath;

4.UICollectionViewLayoutAttributes 下方是UICollectionViewLayoutAttributes常用的属性,你可以在上面第二个方法中去为下方这些属性赋值,为Cell定制属于自己的Attributes。由下方的属性就对自定义布局的的强大,在本篇博客中只用到了下方的一个属性,那就是frame。

Objective-C

 @property (nonatomic) CGRect frame;
 @property (nonatomic) CGPoint center;
 @property (nonatomic) CGSize size;
 @property (nonatomic) CATransform3D transform3D;
 @property (nonatomic) CGRect bounds NS_AVAILABLE_IOS(7_0);
 @property (nonatomic) CGAffineTransform transform NS_AVAILABLE_IOS(7_0);
 @property (nonatomic) CGFloat alpha;
 @property (nonatomic) NSInteger zIndex; // default is 0
 @property (nonatomic, getter=isHidden) BOOL hidden; // As an optimization, UICollectionView might not create a view for items whose hidden attribute is YES

三. UICollectionViewLayout的应用 经过上面的简单介绍,想必对UICollectionViewLayout有一定的了解吧,UICollectionViewLayout中还有好多方法,以后用到的时候在给大家介绍。接下来要使用自定义布局来实现瀑布流。我们需要在UICollectionViewLayout的子类中实现相应的布局方法,因为UICollectionViewLayout是虚基类,是不能直接被实例化的,所以我们需要新建一个布局类,这个布局类继承自UICollectionViewLayout。然后去实现上述方法,给每个Cell定制不同的UICollectionViewLayoutAttributes。好了还是拿代码说话吧。 1.重写prepareLayout方法去初始化一些数据,该方法在CollectionView重新加载时只会调用一次,所以把一些参数的配置,计算每个Cell的宽度,每个Cell的高度等代码放在预处理函数中。在该函数中具体调用的函数如下所示:

Objective-C

  #pragma mark -- 虚基类中重写的方法
 
  /**
   * 该方法是预加载layout, 只会被执行一次
   */
  - (void)prepareLayout{
      [super prepareLayout];
 
      [self initData];
 
     [self initCellWidth];
 
     [self initCellHeight];
 
 }

2.返回内容的范围,即为CollectionView设定ContentSize。ContentSize的Width就是屏幕的宽度,而ContentSize的高度是一列中最后一个Cell的Y坐标加上其自身高度的最大值。在此函数中会调用求CellY数组中的最大值。具体实现代码如下:

Objective-C

 /**
  * 该方法返回CollectionView的ContentSize的大小
  */
 - (CGSize)collectionViewContentSize{
 
     CGFloat height = [self maxCellYArrayWithArray:_cellYArray];
 
     return CGSizeMake(SCREEN_WIDTH,  height);
 }

3.下面的方法是为每个Cell去绑定一个UICollectionViewLayoutAttributes对象,并且以数组的形式返回,在我们的自定义瀑布流中,我们只自定义了Cell的frame,就可以实现我们的瀑布流,UICollectionViewLayoutAttributes的其他属性我们没有用到,由此可以看出自定义Cell布局功能的强大。

Objective-C

  /**
   * 该方法为每个Cell绑定一个Layout属性~
   */
  - (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect
  {
 
      [self initCellYArray];
 
      NSMutableArray *array = [NSMutableArray array];
 
     //add cells
     for (int i=0; i )
     {
         NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
 
         UICollectionViewLayoutAttributes *attributes = [self layoutAttributesForItemAtIndexPath:indexPath];
 
         [array addObject:attributes];
     }
 
     return array;
 
 }
  1. 通过下述方法设定每个Cell的UICollectionViewLayoutAttributes对象的参数,为了实现瀑布流所以我们只需要设置每个Cell的frame即可。每个cell的frame的确定是以列来定的,有所在列的上个Cell的Y坐标来确定下个cell的位置。瀑布流实现关键点如下: (1)Cell宽度计算:如果瀑布流的列数和Cell的Padding确定了,那么每个Cell的宽度再通过屏幕的宽度就可以计算出来了。 (2)Cell高度计算:通过随机数生成的高度 (3)Cell的X轴坐标计算:通过列数,和Padding,以及每个Cell的宽度很容易就可以计算出每个Cell的X坐标。 (4)Cell的Y轴坐标计算:通过Cell所在列的上一个Cell的Y轴坐标,Padding, 和 上一个Cell的高度就可以计算下一个Cell的Y坐标,并记录在Y坐标的数组中了。

Objective-C

/**
 * 该方法为每个Cell绑定一个Layout属性~
 */
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
 
    UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
 
    CGRect frame = CGRectZero;
 
    CGFloat cellHeight = [_cellHeightArray[indexPath.row] floatValue];
 
    NSInteger minYIndex = [self minCellYArrayWithArray:_cellYArray];
 
    CGFloat tempX = [_cellXArray[minYIndex] floatValue];
 
    CGFloat tempY = [_cellYArray[minYIndex] floatValue];
 
    frame = CGRectMake(tempX, tempY, _cellWidth, cellHeight);
 
    //更新相应的Y坐标
    _cellYArray[minYIndex] = @(tempY + cellHeight + _padding);
 
    //计算每个Cell的位置
    attributes.frame = frame;
 
    return attributes;
}
  1. initData方法主要是对数据进行初始化,在本篇博客中为了先实现效果,我们暂且把数据给写死。下篇博客会在本篇博客中的基础上进行优化和改进,这些配置参数都会在Delegate中提供,便于灵活的去定制属于你自己的瀑布流。本篇博客中Demo的配置项先写死就OK了,还是那句话,下篇博客中会给出一些相应的代理,来定制我们的瀑布流。

Objective-C

/**
 * 初始化相关数据
 */
- (void) initData{
    _numberOfSections = [self.collectionView numberOfSections];
    _numberOfCellsInSections = [self.collectionView numberOfItemsInSection:0];
 
    //通过回调获取列数
    _columnCount = 5;
    _padding = 5;
    _cellMinHeight = 50;
    _cellMaxHeight = 150;
}

6.下方的方法是根据Cell的列数来求出Cell的宽度。因为Cell的宽度都是一样的,每个Cell的间隔也是一定的。例如有5列Cell, 那么Cell中间的间隔就有4(5-1)个,那么每个Cell的宽度就是屏幕的宽度减去所有间隔的宽度,再除以列数就是Cell的宽度。如果没听我啰嗦明白的话,直接看代码吧,并不复杂。每个Cell的宽度和间隔确定了,那么每个Cell的X轴坐标也就确定了。代码如下:

Objective-C

  /**
   * 根据Cell的列数求出Cell的宽度
   */
  - (void) initCellWidth{
      //计算每个Cell的宽度
      _cellWidth = (SCREEN_WIDTH - (_columnCount -1) * _padding) / _columnCount;
 
      //为每个Cell计算X坐标
      _cellXArray = [[NSMutableArray alloc] initWithCapacity:_columnCount];
     for (int i = 0; i ) {
 
         CGFloat tempX = i * (_cellWidth + _padding);
 
         [_cellXArray addObject:@(tempX)];
     }
 
 }
  1. 根据Cell的最小高度和最大高度来利用随机数计算每个Cell的高度,把每个Cell的高度记录在数组中,便于Cell加载时使用。具体代码如下:

Objective-C

  /**
   * 随机生成Cell的高度
   */
  - (void) initCellHeight{
      //随机生成Cell的高度
      _cellHeightArray = [[NSMutableArray alloc] initWithCapacity:_numberOfCellsInSections];
      for (int i = 0; i ) {
 
          CGFloat cellHeight = arc4random() % (_cellMaxHeight - _cellMinHeight) + _cellMinHeight;
 
         [_cellHeightArray addObject:@(cellHeight)];
     }
 
 }

8.初始化Cell的Y轴坐标数组,因为是瀑布流,瀑布流的特点是每列中Cell的X轴坐标是相同的,我们只需要根据本列上一个Cell的Y轴坐标来确定本列中将要插入Cell的Y轴坐标,所有我们需要维护一个每列当前Cell的Y轴坐标数组。其初始化方法如下:

Objective-C

/**
 * 初始化每列Cell的Y轴坐标
 */
- (void) initCellYArray{
    _cellYArray = [[NSMutableArray alloc] initWithCapacity:_columnCount];
 
    for (int i = 0; i ) {
        [_cellYArray addObject:@(0)];
    }
}

9.下面的方法是求Cell的Y轴坐标数组的最大值,因为在Cell都加载完毕后,Cell数组中最大值就是CollectionView的ContentSize的Height的值。

Objective-C

  /**
   * 求CellY数组中的最大值并返回
   */
  - (CGFloat) maxCellYArrayWithArray: (NSMutableArray *) array{
      if (array.count == 0) {
          return 0.0f;
      }
 
      CGFloat max = [array[0] floatValue];
     for (NSNumber *number in array) {
 
         CGFloat temp = [number floatValue];
 
         if (max  temp) {
             max = temp;
         }
     }
 
     return max;
 }

10.下方代码是求CellY数组中的第一个最小值的索引,因为求出这个CellY数组中的第一个Cell最新值得索引就是Cell应该插入的列。

Objective-C

  /**
   * 求CellY数组中的最小值的索引
   */
  - (CGFloat) minCellYArrayWithArray: (NSMutableArray *) array{
 
      if (array.count == 0) {
          return 0.0f;
      }
 
     NSInteger minIndex = 0;
     CGFloat min = [array[0] floatValue];
 
     for (int i = 0; i ) {
         CGFloat temp = [array[i] floatValue];
 
         if (min > temp) {
             min = temp;
             minIndex = i;
         }
     }
 
     return minIndex;
 }

自定义集合视图控制器布局第一阶段就先到这,下篇博客会在此基础上进一步开发。把上述写死的配置参数,通过Delegate提供,使其在UICollectionView可进行配置,其配置方式类似于UICollectionViewDelegateFlowLayout的代理方法。

demo地址

如果您是iOS开发者,或者对本篇文章感兴趣,请关注本人,后续会更新更多相关文章!敬请期待!

参考文章: iOS开发之窥探UICollectionViewController(三) --使用UICollectionView自定义瀑布流

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏HT

基于 HTML5 Canvas 的 3D WebGL 机房创建

对于 3D 机房来说,监控已经不是什么难事,不同的人有不同的做法,今天试着用 HT 写了一个基于 HTML5 的机房,发现果然 HT 简单好用。本例是将灯光、雾...

34170
来自专栏移动端开发

Swift 实现俄罗斯方块详细思路解析(附完整项目)

    俄罗斯方块,是一款我们小时候都玩过的小游戏,我自己也是看着书上的思路,学着用 Swift 来写这个小游戏,在写这个游戏的过程中,除了一些位置的计算,数据...

13420
来自专栏前端新视界

CSS 特殊属性介绍之 pointer-events

首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 t...

213100
来自专栏吾爱乐享

php学习之html的标签属性(二)

15320
来自专栏菩提树下的杨过

silverlight:如何在图片上挖个洞?

一、不写代码的方法:用Blend 看图说话: 这是待处理的图片win7 ? 在win7上,画一个矩形,再用钢笔随便画个封闭的path ? 将矩形与path合...

203100
来自专栏前端小作坊

CSS3着重符及其fallback

在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

11720
来自专栏云瓣

从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 && HOC 探幽

本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/Pur...

9710
来自专栏ShaoYL

iOS---UICollectionView详解和常用API翻译

374110
来自专栏游戏杂谈

利用threshold实现的遮罩引导

点击“开始引导”,则进入引导操作。除指定的按钮可以操作外,其它区域均不可点击。这种应用当新功能或是新产品上线后,用来引导用户来使用产品/功能,是十分有用的。fa...

11410
来自专栏緣來來來

Python爬虫 --- 2.2 Scrapy 选择器的介绍

Scrapy提取数据有自己的一套机制,被称作选择器(selectors),通过特定的Xpath或者CSS表达式来选择HTML文件的某个部分 Xpath是专门在X...

12520

扫码关注云+社区

领取腾讯云代金券