一、简介
1、UICollectionView，又称九宫格试图，是iOS6之后引入的一个新的UI控件，
2、和UITableView有着较多的相似之处，其中的很多代理方法都十分类似
3、UICollectionView是比UITbleView更加强大的一个UI控件，有如下几个方面：
1）支持水平和垂直两种方向的布局
2）通过layout配置方式进行布局,完全自定义一套layout布局方案，可以实现意想不到的效果
3）通过layout布局回调的代理方法，可以动态的定制每个item的大小
二、相关的类
1、UICollectionView
九宫格试图
2、UICollectionViewCell
设置每个格子的内容
3、UICollectionViewFlowLayout
用来控制每个格子的布局
三、UICollectionViewFlowLayout
相关属性
1、格子的大小
itemSize
2、最小行间距
minimumLineSpacing
3、最小列间距
minimumInteritemSpacing
4、滑动方向
scrollDirection
代理方法
1、设置格子的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
2、设置collectionView的四周边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
3、设置最小行间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
4、设置最小列间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
5、设置段头的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
6、设置段尾的尺寸
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;
四、UICollectionView
相关方法
1）分页
pagingEnabled
1) 注册表头或表尾试图
- (void)registerClass:(nullable Class)viewClass forSupplementaryViewOfKind:(NSString *)elementKind withReuseIdentifier:(NSString *)identifier;
2）注册格子试图
- (void)registerClass:(nullable Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier;
3）刷表试图
reloadData
dataSource和delegate
1）格子的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
2）格子的内容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
3）点击格子调用
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
4) 自定义表头或表尾
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
五.具体的使用方法
- <1>下面是效果图
-
<2>下面说说具体的用法(以2段为例)
1.UICollectionViewFlowLayout设置,
2.UICollectionView添加
3.cell要注册(如果有段头要注册)
4、自定义cell要注意frame
5、遵守三个协议UICollectionViewDataSource UICollectionViewDelegate UICollectionViewDelegateFlowLayout1.UICollectionViewFlowLayout的做布局
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;
2.collectionView视图的设置
_collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];
_collectionView.backgroundColor = [UIColor whiteColor];
_collectionView.delegate = self;
_collectionView.dataSource = self;3.格子的注册
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellID"];
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
[self.view addSubview:_collectionView];/*
collection的段落
*/
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView )collectionView
{
return 2;
}
/
collection每个段落格子数
*/
-(NSInteger)collectionView:(UICollectionView )collectionView numberOfItemsInSection:(NSInteger)section
{
switch (section) {
case 0:
return 1;
break;
case 1:
return 20;
break;
default:
break;
}
return 0;
}
/
格子的宽高设置
*/
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
switch (indexPath.section) {
case 0:{
return CGSizeMake(WIDTH, 200);
}break;
case 1:{
return CGSizeMake(WIDTH/2-20,WIDTH/3);
}break;default: break;}
return CGSizeMake(0, 0);
}//列间距
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{if (section ==1) {
return 10;}
return 0;
}//行间距
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{if (section ==1) {
return 10; } return 0;}
/*
UICollectionViewCell的具体的数据加载
*/
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
switch (indexPath.section) {
case 0:{UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellID" forIndexPath:indexPath]; cell.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"2.png"]]; return cell; }break; case 1:{ UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath]; cell.backgroundColor = [UIColor greenColor]; cell.backgroundView = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"1.png"]]; cell.layer.borderColor = [UIColor redColor].CGColor; return cell; }break; default: break;}
return nil;
}/* 点击collectionView的事件 */-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
if (indexPath.section==0) {NSLog(@"您点击的是第1段的的第%d个格子",(int)indexPath.row);}
if (indexPath.section==1) {
NSLog(@"您点击的是第2段的的第%d个格子",(int)indexPath.row); }}
#pragma mark 定义整个CollectionViewCell与整个View的间距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(5, 5,5,5);//（上、左、下、右）
}
