iOS学习之UICollectionView实现瀑布流

在iOS中可以实现瀑布流的目前已知的有2种方案：

  1. 使用UIScrollView自己封装一套，这种方案是应用于iOS6之前的，因为iOS6才出来UICollectionView,不过现在这种方案已经不怎么用了，还得自己封装。而且自己封装的性能不一定有系统的要好。
  2. 使用系统自带的UICollectionView，然后自定义layout，自己实现瀑布流效果

本文中我们介绍第二种实现方案
首先我们需要自定义一个继承于UICollectionViewLayout的layout，然后需要重写四个方法:

  1. (void)prepareLayout
  2. (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
  3. (UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath
  4. (CGSize)collectionViewContentSize

第一个方法是做一些初始化的操作，这个方法必须先调用一下父类的实现
第二个方法返回的是一个装着UICollectionViewLayoutAttributes的数组
第三个方法返回indexPath位置的UICollectionViewLayoutAttributes
第四个方法是返回UICollectionView的可滚动范围

如何实现瀑布流

首先我们需要明白一点瀑布流的排列，瀑布流是大小不规则的一些控件分布在手机屏幕上面，然后肯定有长度高的也有矮的(就像人的身高一样，哈哈哈)，当排满第一排的时候就会往下继续排，那么这个应该往哪里放呢，==答案就是把它放到第一排最短的那个下面==，以此类推，按照这个规律排列下去。
明白了这一点我们接下来就该写代码了
首先我们创建两个数组一个装着cell的布局属性，另一个装着当前cell的总高度

1
2
3
4
5
6
//c存放所有cell的布局属性
@property (nonatomic, strong) NSMutableArray *attrsArray;
//存放所有列的当前高度
@property (nonatomic, strong) NSMutableArray *columnHeights;
/** 内容的高度 */
@property (nonatomic, assign) CGFloat contentHeight;

　　

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
- (void)prepareLayout
{
    [super prepareLayout];
 
    self.contentHeight = 0;
 
    //清除之前计算的所有高度，因为刷新的时候回调用这个方法
    [self.columnHeights removeAllObjects];
    for (NSInteger i = 0; i < DefaultColumnCpunt; i++) {
        [self.columnHeights addObject:@(self.edgeInsets.top)];
    }
 
    //把初始化的操作都放到这里
    [self.attrsArray removeAllObjects];
 
    //开始创建每一个cell对应的布局属性
    NSInteger count = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i = 0; i < count; i++) {
        // 创建位置
        NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
        // 获取indexPath位置cell对应的布局属性
        UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
        [self.attrsArray addObject:attrs];
    }
}

　　首先把cell的高度设置为self.edgeInsets.top不然这里会崩溃。然后取出来item的个数，然后循环取出每个item的UICollectionViewLayoutAttributes，然后把它加入到attsArray，然后在- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect这个方法中直接返回attrsArray即可。

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
34
35
36
37
38
39
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
 
    CGFloat collectionViewW = self.collectionView.frame.size.width;
 
    CGFloat w = (collectionViewW - self.edgeInsets.left - self.edgeInsets.right -(self.columnCount - 1) * self.columnMargin) / self.columnCount;
 
    CGFloat h = [self.delegate WaterFlowLayout:self heightForRowAtIndexPath:indexPath.item itemWidth:w];
 
    NSInteger destColumn = 0;
 
    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSInteger i = 0; i < self.columnCount; i++) {
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
 
        if (minColumnHeight > columnHeight) {
            minColumnHeight = columnHeight;
            destColumn = i;
        }
    }
 
    CGFloat x = self.edgeInsets.left + destColumn * (w + self.columnMargin);
    CGFloat y = minColumnHeight;
    if (y != self.edgeInsets.top) {
        y += self.rowMargin;
    }
 
    attrs.frame = CGRectMake(x, y, w, h);
 
    self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
 
    CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
    if (self.contentHeight < columnHeight) {
        self.contentHeight = columnHeight;
    }
    return attrs;
 
}

　　上面这个方法是计算item的位置的代码，首先取出来indexPath的UICollectionViewLayoutAttributes对象，然后取出来w，h，核心代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
NSInteger destColumn = 0;
 
    CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
    for (NSInteger i = 0; i < self.columnCount; i++) {
        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
 
        if (minColumnHeight > columnHeight) {
            minColumnHeight = columnHeight;
            destColumn = i;
        }
    }
 
    CGFloat x = self.edgeInsets.left + destColumn * (w + self.columnMargin);
    CGFloat y = minColumnHeight;
    if (y != self.edgeInsets.top) {
        y += self.rowMargin;
    }

　　首先弄了一个标示destColumn来做记录是那一列的，然后定义一个minColumnHeight为最小的列的高度，取出来self.columnHeights[0]的高度，这里默认为它就是最小的，然后进行for循环遍历，取出来i位置上面的高度，如果这个值小于之前的minColumnHeight，那么取出来的这个高度就是最小的高度了，然后把i的值赋值给destColumn，然后x的值就是上面代码中的相加的结果，y的值就是继续加上间距

1
2
3
4
5
6
7
8
9
10
11
12
13
14
- (CGSize)collectionViewContentSize
{
//    CGFloat maxColumnHeight = [self.columnHeights[0] doubleValue];
//    
//    for (NSInteger i = 1; i < DefaultColumnCpunt; i++) {
//        // 取得第i列的高度
//        CGFloat columnHeight = [self.columnHeights[i] doubleValue];
//        
//        if (maxColumnHeight < columnHeight) {
//            maxColumnHeight = columnHeight;
//        }
//    }
    return CGSizeMake(0, self.contentHeight + self.edgeInsets.bottom);
}

posted on 2017-07-19 15:00  程序“猿”  阅读(338)  评论(0)    收藏  举报

导航