UICollectionView

最新推荐文章于 2025-07-26 10:42:40 发布

原创最新推荐文章于 2025-07-26 10:42:40 发布 · 271 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍如何使用UICollectionView实现瀑布流布局效果。包括设置item尺寸、行间距等属性，并演示了如何注册UICollectionViewCell及头部视图。

创建一个collectionView之前需要先创建瀑布流

 // 官方提供的一种瀑布流效果
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];

在这里对每一个用来显示的区域称为Item,就相当于tableView上的cell

设置item的尺寸

 flowLayout.itemSize = CGSizeMake(100, 160);

通过设置flowLayOut来设置样式

1.设置最小的行间距,纵间距

 flowLayout.minimumInteritemSpacing = 2;
    flowLayout.minimumLineSpacing = 2;
    
    flowLayout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);

2.设置滑动的方向

    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;

创建collectionView

 UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:flowLayout];
    [self.view addSubview:collectionView];

设置代理人,只能用注册来设置cell

 // 设置代理人
    collectionView.dataSource = self;
    collectionView.delegate = self;
    // 注册
    [collectionView registerClass:[MyCell class] forCellWithReuseIdentifier:@"reuse"];

collectionViewCell没有系统的视图,需要自己创建视图,创建视图不需要重写tableViewCell的最后一个方法

设置flowLayout头部滚动的范围(滚动视图)

 flowLayout.headerReferenceSize = CGSizeMake(0, 300);

注册头部区域参数一;需要注册的类型是UICollectionReusableView 参数二:注定注册的视图的类型,头或者尾参数三:重用标识

[collectionView registerClass:[MyReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];

协议方法(头视图)

// 协议方法(头视图)
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
   MyReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind: UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
    view.backgroundColor = [UIColor cyanColor];
    return view;

}