UICollectionView

最新推荐文章于 2025-07-26 10:42:40 发布

bddzz

最新推荐文章于 2025-07-26 10:42:40 发布

阅读量354

点赞数

CC 4.0 BY-SA版权

文章标签： UICollectionView 表格视图

本文链接：https://blog.youkuaiyun.com/bddzzw/article/details/49560667

本文介绍如何使用UICollectionView展示图片集合，并详细讲解UICollectionView的布局配置过程，包括设置滚动方向、项目尺寸及间距等。

UICollectionView* collection

先定义一个全局变量的可变数组 imageArray

imageArray=[NSMutableArray array ];

for (int i=1; i<=15; i++) {

UIImage *image=[UIImage imageNamed:[NSString stringWithFormat:@"圣斗士%02d.jpg",i]];

[imageArray addObject:image ];

}

// Do any additional setup after loading the view, typically from a nib.

// UICollectionView 表格视图继承与UIScrollView UICollectionViewDelegateFlowLayout 这是一个抽象类表格的抽象信息布局是由这个类设置的

//设置UICollectionView的布局信息//UICollectionViewScrollDirectionVertical

UICollectionViewFlowLayout* flowLayout=[[UICollectionViewFlowLayout alloc]init];

//设置滚动方向UICollectionViewScrollDirectionHorizontal UICollectionViewScrollDirectionVertical

flowLayout.scrollDirection=UICollectionViewScrollDirectionVertical;

//表格大小

flowLayout.itemSize=CGSizeMake(100, 150);

/**

* 横向滚动时屏幕的高度大于item的高度的二倍时会自动生成多行来适应屏幕

纵向滚动时屏幕的宽度大于item 的宽度2 倍以上会自动生成多行自使用屏幕

//表格间的间距横向的最小间距纵向滚动式最明显

flowLayout.minimumLineSpacing=3;

//表格间的纵向最小间距

flowLayout.minimumInteritemSpacing=0;

//表格式图

UICollectionView* collection=[[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];

collection.dataSource=self;

collection.delegate=self;

[self.view addSubview:collection];

//注册系统类的cell

// [collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellId"];

//注册自定义的cell

// [collection registerClass:[CustomCell class] forCellWithReuseIdentifier:@"cellId"];

//注册xib 文件

[collection registerNib:[UINib nibWithNibName:@"XibCollectionViewCell" bundle:nil] forCellWithReuseIdentifier:@"cellId"];

//注册分组头标

// [collection registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"viewId"];

// //脚标

// [collection registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"viewId"];

//自定制头标脚标

// [collection registerClass:[CustomReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"viewId"];

// //脚标

// [collection registerClass:[CustomReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"viewId"];

//xib

[collection registerNib:[UINib nibWithNibName:@"XibCustomReusableView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"viewId"];

[collection registerNib:[UINib nibWithNibName:@"XibCustomReusableView" bundle:nil] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter

withReuseIdentifier:@"viewId"];

}

#pragma mark -----UICollectionView协议方法-----

//返回多少分组

-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView

{

return 1;

}

//返回多少行

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

{

return [imageArray count];

}

//返回小单元cell

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

{

//添加标识

static NSString* cellId=@"cellId";

//在复用池中查找

// UICollectionViewCell * cell=[collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath];

// cell.backgroundColor=[UIColor orangeColor];

// for (id view in cell.contentView.subviews) {

// [view removeFromSuperview];

// }

// UIImageView * imageView=[[UIImageView alloc]initWithFrame:cell.bounds];

// imageView.image=imageArray[indexPath.row];

// [cell.contentView addSubview:imageView];

// //在cell 上添加label

// UILabel * label=[[UILabel alloc]initWithFrame:cell.bounds];

// label.text=[NSString stringWithFormat:@"第%ld组第%ld个",indexPath.section,indexPath.row];

// [cell.contentView addSubview:label];

//自定制的cell

#if 0

CustomCell * cell=[collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath];

//为控件赋值

cell.imageView.image=imageArray[indexPath.row];

cell.titleLabel.text=[NSString stringWithFormat:@"%ld",indexPath.row];

#endif

XibCollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:cellId forIndexPath:indexPath];

cell.imageview.image=imageArray[indexPath.row];

cell.titleLabel.text=[NSString stringWithFormat:@"%ld",indexPath.row];

return cell;

}

//设置分组的头标和脚标

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

//系统的

static NSString*viewId=@"viewId";

// UICollectionReusableView * view=[collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:viewId forIndexPath:indexPath];

//CustomReusableView * view=[collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:viewId forIndexPath:indexPath];

XibCustomReusableView * view=[collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:viewId forIndexPath:indexPath];

if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {

view.titleLabel.text=@"头标";

}else if ([kind isEqualToString:UICollectionElementKindSectionFooter])

{

// view.backgroundColor=[UIColor orangeColor];

view.titleLabel.text=@"脚标";

}

return view;

}

//选中某个cell 触发的的方法

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

{

NSLog(@"选中了%ld",indexPath.row);

}

//取消选中

-(void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath

{

//刷新数据的

// [collectionView reloadData];

NSLog(@"取消了选中%ld",indexPath.row);

}

#pragma mark -----flowout的协议方法-----

//设置视图之间的间距上左下右

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

{

return UIEdgeInsetsMake(10, 10, 10, 10);

}

//设置item的大小

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

{

//默认的大小 50 *50

return CGSizeMake(110, 150);

}

//设置分组的高度

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

{

//纵向滚动时取height 宽自适应屏幕宽度

//横向滚动时取width 高自适应屏幕

return CGSizeMake(30, 30);

}

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section

{

return CGSizeMake(30, 30);

}