这篇文章简单的描述UICollectionView的基本使用方法,供需要简单瀑布流布局的同学查看。
-
UICollectionView 使用时的一般思路
collectionView和tableView都有一个共同的路子:
1 注册单元格、headerView和footerView;
2 有没有header或者footer,其高度,内容的设置;
3 要显示多少个section;
4 每个section多少个item;
5 每个item要显示成什么样子;
6 点击事件的处理
需要注意的是:为了性能,collectionView和tableView都提供了单元格的重用机制,每当涉及到重用的时候,我们都要注意一下重影的问题。
按照这样的思路,我们可以对这个空间进行基本的学习。
-
基本的方法调用
1. 声明重用的ID 注册单元格
注意:或许是个人习惯,每当设计到需要在多出使用的字符串的时候,我一般习惯用define定义一下,这样的话,在其他使用的地方就 不会担心敲错。当然,有很多人在使用字符串常量 ,这也是很好的习惯。
//注册事件
[mainCollectionView registerClass:[cutomCell class] forCellWithReuseIdentifier:kCellID];
[mainCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kReusableHeaderView];
[mainCollectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kReusableFooterView];
注册单元格和表头的方法 ,分为纯代码的和nib两种形式
这里需要注意一点的是:注册的kCellID、kReusableHeaderView和kReusableFooterView,分别对应的重用方法中要对应起来,否则是找不到要重用的单元部分,会报错。
2. 设置headerView 和 footerView的大小,以及显示的内容
//footer的size
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section
{
return CGSizeMake(self.view.frame.size.width, 100);
}
//header的size
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section
{
return CGSizeMake(self.view.frame.size.width, 50);
}
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
UICollectionReusableView *view;
NSString *contentStr;
if ([kind isEqualToString:UICollectionElementKindSectionFooter]) {
view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:kReusableFooterView forIndexPath:indexPath];
view.backgroundColor =[UIColor greenColor];
contentStr = [NSString stringWithFormat:@"第 %ld 个FooterView",indexPath.section];
}else{
view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:kReusableHeaderView forIndexPath:indexPath];
view.backgroundColor =[UIColor grayColor];
contentStr = [NSString stringWithFormat:@"第 %ld 个headerView",indexPath.section];
}
//防重影
for (UIView *obj in view.subviews) {
[obj removeFromSuperview];
}
UILabel *label = [[UILabel alloc] initWithFrame:view.bounds];
label.text = contentStr;
label.font = [UIFont systemFontOfSize:20];
[view addSubview:label];
return view;
}
3. 要显示多少个section;
-(NSInteger) numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 3;
}
这个方法是可选的,默认情况下返回一个section。
4. 每个section多少个item;
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 3;
}
5. 每个item要显示成什么样子;
//设置cell的大小
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(100, 200);
}
//设置每个item的UIEdgeInsets
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
//(CGFloat top, CGFloat left, CGFloat bottom, CGFloat right)
return UIEdgeInsetsMake(10, 10, 10, 10);
}
//设置每个item水平间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
return 10;
}
//设置每个item垂直间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
return 15;
}
-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
cutomCell *cell = (cutomCell*)[collectionView dequeueReusableCellWithReuseIdentifier:kCellID forIndexPath:indexPath];
//防重影
for (UIView *view in cell.subviews) {
[view removeFromSuperview];
}
UILabel *label = [[UILabel alloc]initWithFrame:CGRectMake(20, 20, 50, 30)];
label.text = [NSString stringWithFormat:@"%ld 行,%ld 列",indexPath.section,indexPath.row];
label.adjustsFontSizeToFitWidth = YES;
[cell.contentView addSubview:label];
return cell;
}
6. 点击事件的处理
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
NSLog(@"%ld, %ld",indexPath.section,indexPath.row);
}
-
源代码地址
[下载地址]https://git.oschina.net/zhuzhuxingzhi/collectionViewDemo.git