UICollectionView的简单使用

最新推荐文章于 2022-12-18 21:26:36 发布

skyz319

最新推荐文章于 2022-12-18 21:26:36 发布

阅读量650

点赞数

分类专栏： IOS

IOS 专栏收录该内容

50 篇文章

订阅专栏

本文介绍如何使用 iOS 的 UICollectionView 来创建复杂多栏布局的应用界面。包括自定义 Cell 的步骤、设置 UICollectionView 的基本属性以及实现数据源和代理方法等关键操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

转自:http://my.oschina.net/joanfen/blog/160156

iOS CollectionView的出现是一大福利，再也不用用TableView来定义复杂的多栏表格了，用法与Table类似，只是Cell必须自己添加，无默认模式

由于CollectionView没有默认的Cell布局，所以一般还是自定义方便又快捷

一、自定义Cell

1、新建类CollectionCell继承自UICollectionViewCell

2、新建Xib，命名为CollectionCell.xib

a.选中CollectionCell.xib删掉默认的View，从控件中拖一个Collection View Cell（图3）到画布中，设置大小为95*116；

b.选中刚刚添加的Cell，更改类名为CollectionCell，如图4

c.在CollectionCell.xib的CollectionCell中添加一个ImageView和一个Label（图5）

d.创建映射, 图6，图7

e.选中CollectionCell.m , 重写init方法

- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// 在此添加

// 初始化时加载collectionCell.xib文件
NSArray *arrayOfViews = [[NSBundle mainBundle] loadNibNamed:@"CollectionCell" owner:self options: nil];

// 如果路径不存在，return nil
if(arrayOfViews.count < 1){return nil;}

// 如果xib中view不属于UICollectionViewCell类，return nil
if(![[arrayOfViews objectAtIndex:0] isKindOfClass:[UICollectionViewCell class]]){
return nil;
}

// 加载nib
self = [arrayOfViews objectAtIndex:0];
}
return self;
}
二、定义UICollectionView；
1、拖动一个Collection View到指定ViewController的View上

2、连线dataSource和delegate，并创建映射，命名为CollectionView

3、选中CollectionView的标尺，将Cell Size的Width和Height改成与自定义的Cell一样的95*116,图8



4、选中CollectionView的属性,可以修改其属性，比如是垂直滑动，还是水平滑动，选择Vertical或Horizontal

5、在ViewDidLoad方法中声明Cell的类，在ViewDidLoad方法中添加，此句不声明，将无法加载，程序崩溃

// KCellID为宏定义 @"CollectionCell"
[self.collection registerClass:[CollectionCell class] forCellWithReuseIdentifier:KCellID];
6、在ViewController.h中声明代理
@interface ViewController : UIViewController<UICollectionViewDataSource,UICollectionViewDelegate>
7、在.m文件中实现代理方法
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
// 每个Section的item个数
return 12;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{

CollectionCell *cell = (CollectionCell *)[collectionView dequeueReusableCellWithReuseIdentifier:KCellID forIndexPath:indexPath];

// 图片的名称
NSString *imageToLoad = [NSString stringWithFormat:@"%d.JPG", indexPath.row];

// 设置label文字
cell.label.text = [NSString stringWithFormat:@"{%ld,%ld}",(long)indexPath.row,(long)indexPath.section];

// 设置imageView的图片
cell.imageView.image = [UIImage imageNamed:imageToLoad];

return cell;

}
效果如图10

点击某项后跳转事件与UITableView类似，实现代理方法

-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
即可，不赘述