转载

UICollectionView(集合视图)以及自定义集合视图

一、UICollectionView集合视图

其继承自UIScrollView。

UICollectionView类是 iOS6新引进的 API,用于展示集合视图,布局更加灵活,可实现多列布局,用法类似于 UITableView类。

1、需要遵循的协议:

1)UICollectionViewDataSource,

2)UICollectionViewDelegate,

3)UICollectionViewDelegateFlowLayout

2、创建collection:

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayoutalloc] init];

UICollectionView *collection = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];//初始化,并设置布局方式

collection.backgroundColor = [UIColor whiteColor];

[collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];//注册UICollectionViewCell,这是固定格式,也是必须要实现的

[collection registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];//注册头/尾视图,视图类型必须为UICollectionReusableView或者其子类,kind设置为UICollectionElementKindSectionHeader或者UICollectionElementKindSectionFooter,最后设置标识

collection.delegate = self;

collection.dataSource = self;

[self.view addSubview:collection];

3、需要实现的方法:

1)-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{

//设置组数,不写该方法默认是一组

return 4;

}

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

return 9;

}

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

static NSString *identifier = @"cell";//注意,此处的identifier要与注册cell时使用的标识保持一致

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

cell.backgroundColor = [UIColor grayColor];

cell.layer.borderWidth = 0.5;

cell.layer.borderColor = [UIColor whiteColor].CGColor;

return cell;

}

//设置头视图的尺寸,如果想要使用头视图,则必须实现该方法

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

return CGSizeMake(300, 30);

}

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

//根据类型以及标识获取注册过的头视图,注意重用机制导致的bug

UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];

headerView.backgroundColor = [UIColor brownColor];

for (UIView *view in headerView.subviews) {

[view removeFromSuperview];

}

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

label.text = [NSString stringWithFormat:@"%zi组的头视图",indexPath.section];

[headerView addSubview:label];

label.textColor = [UIColor whiteColor];

return headerView;

}

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

NSLog(@"%zi组,%zi行",indexPath.section,indexPath.item);

}

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

//设置item尺寸

return CGSizeMake(self.view.frame.size.width/3.0, 100);

}

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

//设置组距离上向左右的间距

return UIEdgeInsetsMake(0,0,0,0);

}

9)-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{

//两个item的列间距

return 0;

}

10)-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{

//如果一组中有多行item,设置行间距

return 0;

}

二、自定义集合视图

1、遵循的协议

1)UICollectionViewDataSource,

2)UICollectionViewDelegate,

3)UICollectionViewDelegateFlowLayout

2、创建

定义一个全局变量: UICollectionView *_collectionView;

_collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:[[UICollectionViewFlowLayout alloc] init]];

[_collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];

_collectionView.delegate = self;

_collectionView.dataSource = self;

_collectionView.backgroundColor = [UIColor whiteColor];

[self.view addSubview:_collectionView];

3、实现的方法

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

return 10;

}

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

static NSString *identifier = @"cell";

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

cell.imageView.image = [UIImage imageNamed:@"1.jpg"];

//自定义选中背景

UIView *view = [[UIView alloc] init];

view.backgroundColor = [UIColor grayColor];

cell.selectedBackgroundView = view;

return cell;

}

4、自定义一个继承自 CollectionViewCell的类为 MyCollectionViewCell

1)声明一个UIImageView属性

@property (nonatomic, strong) UIImageView *imageView;

2)实现方法

-(instancetype)initWithFrame:(CGRect)frame{

self = [super initWithFrame:frame];

if (self) {

_imageView = [[UIImageView alloc] initWithFrame:self.bounds];

[self addSubview:_imageView];

}

return self;

}

正文到此结束
Loading...