ios基于UICollectionView实现横向瀑布流

下面我会详细讲解如何基于UICollectionView实现横向瀑布流。

步骤一：创建UICollectionViewFlowLayout子类

首先，我们需要创建一个UICollectionViewFlowLayout子类，并且在该子类中实现自定义的布局。我们需要实现的方法包括：

1. -prepareLayout 方法：在该方法中，我们需要计算出每个item的frame，并将其存储在数组中，用于后续的布局使用。

在计算每个item的frame时，我们需要考虑以下因素：

• 每行的高度（由于横向滚动，所以是列的宽度）
• 每个item的宽度
• 每个item的间距
• collectionView的contentInset

具体实现可以参考如下示例代码：

```
- (void)prepareLayout {
[super prepareLayout];

   // 设置每个item的大小
   self.itemSize = CGSizeMake(100, 100);

   // 设置item之间的水平间距
   self.minimumInteritemSpacing = 10;

   // 设置collectionView的contentInset
   self.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);

   // 计算每个item的frame
   NSMutableArray *itemFrameArray = [NSMutableArray array];
   CGFloat x = self.sectionInset.left;
   CGFloat y = self.sectionInset.top;
   CGFloat lineHeight = 0.0;
   NSInteger sectionCount = [self.collectionView numberOfSections];

   for (NSInteger section = 0; section < sectionCount; section++) {
       NSInteger itemCount = [self.collectionView numberOfItemsInSection:section];
       for (NSInteger item = 0; item < itemCount; item++) {
           NSIndexPath *indexPath = [NSIndexPath indexPathForItem:item inSection:section];
           CGSize size = [self sizeForItemAtIndexPath:indexPath];

           CGRect frame = CGRectMake(x, y, size.width, size.height);
           [itemFrameArray addObject:[NSValue valueWithCGRect:frame]];

           x = CGRectGetMaxX(frame) + self.minimumInteritemSpacing;
           lineHeight = MAX(lineHeight, frame.size.height);
       }
       // 开始下一行的布局
       x = self.sectionInset.left;
       y += lineHeight + self.minimumInteritemSpacing;
       lineHeight = 0.0;
   }
   self.itemFrameArray = itemFrameArray;

}

// 计算每个item的大小
- (CGSize)sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
// 根据需求计算每个item的大小
return CGSizeMake(100, arc4random_uniform(100) + 50);
}
```

1. -layoutAttributesForElementsInRect: 方法：在该方法中，我们需要返回所有可见的item的布局属性，包括位置、大小等信息。

具体实现可以参考如下示例代码：

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
NSMutableArray *attributesArray = [NSMutableArray array];
for (NSInteger i = 0; i < self.itemFrameArray.count; i++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
UICollectionViewLayoutAttributes *layoutAttributes = [self layoutAttributesForItemAtIndexPath:indexPath];
[attributesArray addObject:layoutAttributes];
}
return attributesArray;
}

1. -layoutAttributesForItemAtIndexPath: 方法：在该方法中，我们需要返回对应IndexPath的item的布局属性，包括位置、大小等信息。

具体实现可以参考如下示例代码：

```
- (UICollectionViewLayoutAttributes )layoutAttributesForItemAtIndexPath:(NSIndexPath )indexPath {
UICollectionViewLayoutAttributes *attributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

   CGRect frame = [self.itemFrameArray[indexPath.item] CGRectValue];
   attributes.frame = frame;

   return attributes;

}
```

步骤二：将自定义布局应用到UICollectionView

接下来，我们需要将自定义的UICollectionViewFlowLayout子类应用到UICollectionView中。具体实现如下：

- (void)viewDidLoad {
    [super viewDidLoad];

    // 创建UICollectionViewFlowLayout子类
    MyFlowLayout *flowLayout = [[MyFlowLayout alloc] init];
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

    // 创建UICollectionView
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
    collectionView.dataSource = self;
    collectionView.delegate = self;
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"Cell"];
    [self.view addSubview:collectionView];

    // 设置collectionView的约束
    collectionView.translatesAutoresizingMaskIntoConstraints = NO;
    [collectionView.topAnchor constraintEqualToAnchor:self.view.topAnchor].active = YES;
    [collectionView.leadingAnchor constraintEqualToAnchor:self.view.leadingAnchor].active = YES;
    [collectionView.trailingAnchor constraintEqualToAnchor:self.view.trailingAnchor].active = YES;
    [collectionView.bottomAnchor constraintEqualToAnchor:self.view.bottomAnchor].active = YES;
}

示例说明

示例一：横向瀑布流

下面是一个简单的横向瀑布流的示例，展示了如何通过自定义UICollectionViewFlowLayout子类实现横向瀑布流效果。该示例中，我们将item的大小随机生成，以便更好地展示布局效果。

示例二：横向瀑布流带动画效果

下面是一个稍微复杂一些的横向瀑布流示例，展示了如何通过UICollectionViewFlowLayout、UICollectionView、UIView动画等多个API实现动态的横向瀑布流效果。该示例中，我们引入了一个UIView的子类，在该子类的实例中，通过翻转动画来实现item的删除效果。

具体代码实现可以参考这里。