一、简介
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 UICollectionViewDelegateFlowLayout
- 1.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);//（上、左、下、右） }
