UICollectionView 的研究之一：简单使用

本文主要是介绍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 255collectionV.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
[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 106cell.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;
}

垂直方向滚动效果图：