UICollectionView 的研究之一 ：简单使用

UICollectionView 是在 iOS6 之后引入的，用于展示集合视图，可实现多列表布局。

简单的布局，系统flowLayout 即可满足需求，要实现复杂布局的话，需要自定义

UICollectionViewFlowLayout 来实现。

初步实现

给 collectionView 一个布局，这里采用的系统类来实现简单布局。

UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
    flowLayout.minimumInteritemSpacing = 10;
    flowLayout.minimumLineSpacing = 10;
    flowLayout.itemSize = CGSizeMake(([UIScreen mainScreen].bounds.size.width-20)/3, 120);
    // 水平布局 （水平方向滚动）
    flowLayout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    // 垂直布局 （垂直方向滚动）
//    flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;

添加 collectionView

UICollectionView *collectionV = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
    // 240 255 255
    collectionV.backgroundColor = [UIColor colorWithRed:240/255.f green:255/255.f blue:255/255.f alpha:1.0];
    collectionV.dataSource = self;
    collectionV.delegate = self;
    [self.view addSubview:collectionV];

注册 Cell，RXCollectionViewCell 为自定义 cell 类

//注册 cell
[collectionV registerClass:[RXCollectionViewCell class] forCellWithReuseIdentifier:@"cellID"];

提供数据，这两个是必须实现的方法。

#pragma mark - UICollectionViewDataSource
// 默认的 section 为1，那么这里就是 1 个section，8个 item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 8;
}

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    
    RXCollectionViewCell *cell = (RXCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cellID" forIndexPath:indexPath];
    // 255 106 106
    cell.backgroundColor = [UIColor colorWithRed:255/255.f green:106/255.f blue:106/255.f alpha:1.0];
    
    cell.textLabel.text = [NSString stringWithFormat:@"index : %@", @(indexPath.item)];
    cell.textLabel.textColor = [UIColor whiteColor];
    
    cell.imageView.image = [UIImage imageNamed:@"img.jpg"];

    NSLog(@"cellSubvies -- %@", cell.subviews);
    
    return cell;
}

垂直方向滚动效果图：

横向滚动效果图：

具体代码地址：https://download.csdn.net/download/u013410274/10345736