1.1 概念
UICollectionView是多行多列的形式下显示数据的一种控件，从UITableView演变而来，所以使用上大致与UITableView一样，但是比UITableView更加灵活，实现的效果更多样化；
1.2 UICollectionView与UITableView的异同点:
a 相同点：
UITableView：
.dataSource
.delegate
加载数据：三问（有几个分区？每个分区多少行？每行什么内容？）
响应用户：一答（选中某行后响应）
每个分区都有自己的头部视图，尾部视图；
UICollectionView：
.dataSource
.delegate
加载数据：三问（有几个分区？每个分区有多少项？每项显示什么内容？）
响应用户：一答（选中某项后响应）
每个分区有自己的头部，尾部视图；
b 不同点：
1） UICollectionView是以多行多列的形式展现数据
UITableView是以单行单列的形式展现数据
2） UITableView只能默认是上下滚动
UICollectionView即可以上下滚，也可以左右滚；
3） UITableViewCell 自带系统的四个样式，并且还提供了三种控件（头像，主标题，副标题）
UICollectionViewCell 没有任何系统自定义好的样式，也没有系统提供的任何子控件，只提供了三个属性：设置背景颜色，设置背景视图，contentView；
【** 最大区别 **】
4） UITableView的每一行，在设定好行高以后，排布位置就固定了；
UICollectionView需要明确的使用一个“布局对象”来对其中包含的所有向进行定位，其中布局对象，是从UICollectionViewLayout派生出来的子类对象，系统给我们默认提供了一个流式布局“UICollectionViewFlowLayout”,继承自UICollectionViewLayout；
【Demo】-【1-UICollectionView】
-
(void)viewDidLoad {
[super viewDidLoad];//1.请求数据
[self reloadData];
//2.创建UICollectionView
[self creatCollectionView];
}
-(void)reloadData
{
self.dataArray = [[MyModel requestData] mutableCopy];
}
-(void)creatCollectionView
{
self.automaticallyAdjustsScrollViewInsets = NO;
//流式布局
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
//***************这只流式布局的相关属性
//1.单元格（项）的大小 流式布局单元格大小决定了每行有几个项
layout.itemSize = CGSizeMake((screenBounds.size.width-60)/3, 180);
//2.每个单元格之间最小的间距
layout.minimumInteritemSpacing = 10;
//3.每行之间的最小间距
layout.minimumLineSpacing = 10;
//4.设置每个分区之间的边距
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
//5.设置滚动的方式（横向滚动/竖向滚动）
collectionView即可以横向滚动，也可以竖向滚动
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
//1.创建collectionView对象
UICollectionView *cView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 64, screenBounds.size.width, screenBounds.size.height-64) collectionViewLayout:layout];
cView.delegate = self;
cView.dataSource = self;
cView.backgroundColor = [UIColor yellowColor];
[self.view addSubview:cView];
//提前注册cell
[cView registerClass:[MyCell class] forCellWithReuseIdentifier:@"Cell"];
//提前注册，头部/尾部视图
//第二个参数：表示注册的是头部视图？还是尾部视图？
[cView registerClass:[SectionHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"Header"];
[cView registerClass:[SectionHeaderView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"Footer"];
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
pragma mark -UICollectionViewDataSource
//1问 有多少个分区
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return self.dataArray.count;
}
//2问 每个分区有多少项
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
return [self.dataArray[section] count];
}
//3问 每一项显示什么内容
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
//从复用池中取有没有符合要求的单元格，如果有，直接返回使用，如果没有，系统会根据之前注册的单元格，自动的创建一个单元格对象，并返回；
MyCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"Cell" forIndexPath:indexPath];
//因为UICollectionViewCell是系统自带的cell，所以没有提供样式，没有提供对应的空间，只能设置相关属性；
cell.model = self.dataArray[indexPath.section][indexPath.row];
cell.backgroundColor = [UIColor orangeColor];
return cell;
}
//如果要给UICollectionView添加分区的头部，尾部视图
//注意：
//1.分区的头部，尾部视图必须是UICollectionReusableView类型的对象
//2.提前先注册头部，尾部视图的类型
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
//需要返回的是头部视图
//从复用池取出对应的头部视图
SectionHeaderView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"Header" forIndexPath:indexPath];
headerView.myLabel.text = [NSString stringWithFormat:@"我是第%ld分区的头部视图",indexPath.section+1];
return headerView;
}
//没有尾部视图，直接返回nil;
else if ([kind isEqualToString:UICollectionElementKindSectionFooter])
{
SectionHeaderView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"Footer" forIndexPath:indexPath];
footerView.myLabel.text = [NSString stringWithFormat:@"我是第%ld分区的尾部视图",indexPath.section+1];
return footerView;
}
return nil;
}
pragma mark -UICollectionViewDelegateFlowLayout
【** collectionView的头部尾部视图设置方法 **】
//设置头部视图的高度
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
return CGSizeMake(collectionView.frame.size.width, 50);
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
return CGSizeMake(collectionView.frame.size.width, 30);
}
pragma mark -UICollectionViewDelegate
//当选中某一个单元格，则相应
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
DetailViewController *detailView = [[DetailViewController alloc] initWithNibName:@"DetailViewController" bundle:nil];
detailView.model = self.dataArray[indexPath.section][indexPath.row];
detailView.block = ^(NSString *title){
MyModel *model = self.dataArray[indexPath.section][indexPath.row];
model.title = title;
[collectionView reloadData];
};
[self.navigationController pushViewController:detailView animated:YES];
}
