iOS开发 ----- UICollectionView

UICollectionView

简介

和tableView类似的控件,但更零活,tableView是以行为单位的,而collectionView是item,可大可小,对于复杂的布局来说,更加零活

代理

UICollectionViewDataSource
UICollectionViewDelegate
UICollectionViewDelegateFlowLayout

使用方法步骤

1. 指定布局

//首先用 UICollectionViewFlowLayout来指定方向,水平或者垂直
UICollectionViewFlowLayout * flow = [[UICollectionViewFlowLayout alloc]init];

/*
UICollectionViewScrollDirectionVertical,
UICollectionViewScrollDirectionHorizontal
*/
//设置为纵向滚动
flow.scrollDirection = UICollectionViewScrollDirectionVertical;

2. 初始化

_collertionView = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height) collectionViewLayout:flow];

3. 遵守代理协议

_collertionView.delegate = self;
_collertionView.dataSource = self;

4. 使用某个指定的cell,提前声明

[_collertionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cellID"];

5. 声明标头,标尾,可以从xib文件声明布局,手写代码也是没问题的

[_collertionView registerNib:[UINib nibWithNibName:@"HeaderCollectionReusableView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
[_collertionView registerNib:[UINib nibWithNibName:@"HeaderCollectionReusableView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter
withReuseIdentifier:@"footer"];

6. 相关代理协议

6.1分区

-(NSInteger)numberOfSectionsInCollectionView:(nonnull UICollectionView *)collectionView
{
return 2;
}
````

<div class="se-preview-section-delimiter"></div>

######6.2每个区有多少item

<div class="se-preview-section-delimiter"></div>

-(NSInteger)collectionView:(nonnull UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section

{

return 10;

}

<div class="se-preview-section-delimiter"></div>

######6.3每个item的宽高

<div class="se-preview-section-delimiter"></div>

//靠左侧的坐标原点是左上角

//靠右边的坐标原点是右上角

-(CGSize)collectionView:(nonnull UICollectionView )collectionView layout:(nonnull UICollectionViewLayout )collectionViewLayout sizeForItemAtIndexPath:(nonnull NSIndexPath *)indexPath

{

return CGSizeMake(150, 150);

}

<div class="se-preview-section-delimiter"></div>

######6.4 创建单元格 和tableView不同的时,这里时直接从队列里拿,不用重新创建,要保证id和注册的时候一样

<div class="se-preview-section-delimiter"></div>

-(UICollectionViewCell )collectionView:(nonnull UICollectionView )collectionView cellForItemAtIndexPath:(nonnull NSIndexPath *)indexPath

{

//不用判断

static NSString * cellID = @”cellID”;

MyCollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];

cell.label.text = [NSString stringWithFormat:@"第%ld个",indexPath.row];
cell.imageView.image = [UIImage imageNamed:[NSString stringWithFormat:@"10_%ld.jpg",indexPath.row]];

return cell;

}

<div class="se-preview-section-delimiter"></div>

######6.5 边距调整

<div class="se-preview-section-delimiter"></div>

-(UIEdgeInsets)collectionView:(nonnull UICollectionView )collectionView layout:(nonnull UICollectionViewLayout )collectionViewLayout insetForSectionAtIndex:(NSInteger)section

{

return UIEdgeInsetsMake(5, 5, 5, 5);

}

<div class="se-preview-section-delimiter"></div>

######6.5 设置标头,标尾 标头标尾有特定的id,调用系统的来设置

<div class="se-preview-section-delimiter"></div>

-(UICollectionReusableView )collectionView:(nonnull UICollectionView )collectionView viewForSupplementaryElementOfKind:(nonnull NSString )kind atIndexPath:(nonnull NSIndexPath )indexPath

{

HeaderCollectionReusableView * view = nil;
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
static NSString * header = @"header";
view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader
withReuseIdentifier:header
forIndexPath:indexPath];
view.label.text = @"1";
}else
{
static NSString * footer = @"footer";
view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter
withReuseIdentifier:footer
forIndexPath:indexPath];
view.label.text = @"2";
}
return view;

}

<div class="se-preview-section-delimiter"></div>

######6.6 设置标头的大小

<div class="se-preview-section-delimiter"></div>

-(CGSize)collectionView:(nonnull UICollectionView *)collectionView

layout:(nonnull UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

{

return CGSizeMake(375, 40);

}

<div class="se-preview-section-delimiter"></div>

######6.7设置标尾的大小

<div class="se-preview-section-delimiter"></div>

-(CGSize)collectionView:(nonnull UICollectionView )collectionView layout:(nonnull UICollectionViewLayout )collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section

{

return CGSizeMake(375, 40);

}

<div class="se-preview-section-delimiter"></div>

######6.8 选中某一个item的方法

<div class="se-preview-section-delimiter"></div>

-(void)collectionView:(nonnull UICollectionView )collectionView didSelectItemAtIndexPath:(nonnull NSIndexPath )indexPath

{

NSLog(@”%ld”,indexPath.row);

}

“`