您的位置:首页 > 产品设计 > UI/UE

UICollectionView初探

2015-08-06 09:33 330 查看
collectionView的使用跟tableview差不多,比table更强大(ios6.0以后)

1、需实现的协议<UICollectionViewDataSource, UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>

2、标识cell和header、footer

static NSString* cellIdentifier = @"identifier";

static NSString* cellSmallIdentifier = @"smallidentifier";

static NSString* cellHeaderIdentifier = @"headeridentifier";

static NSString* cellFooterIdentifier = @"footeridentifier";

3、初始化

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

m_collectionView = [[UICollectionView alloc] initWithFrame:self.view.frame collectionViewLayout:layout];

[self.view addSubview:m_collectionView];

m_collectionView.delegate = self;

m_collectionView.dataSource = self;

[m_collectionView registerClass:[BigCollectionViewCell class] forCellWithReuseIdentifier:cellIdentifier];

[m_collectionView registerClass:[SmallCollectionViewCell class] forCellWithReuseIdentifier:cellSmallIdentifier];//两种类型的cell

[m_collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:cellHeaderIdentifier];//section header

[m_collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:cellFooterIdentifier];//section footer

4、定义cell类

.m

- (instancetype)initWithFrame:(CGRect)frame

{

self = [super initWithFrame:frame];

if (self) {

_aLable = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 80, 45)];

_aLable.textColor = [UIColor blackColor];

_aLable.font = [UIFont systemFontOfSize:15.0];

[self addSubview:_aLable];

_bLable = [[UILabel alloc] initWithFrame:CGRectMake(80, 0, 80, 45)];

_bLable.textColor = [UIColor blackColor];

_bLable.font = [UIFont systemFontOfSize:15.0];

[self addSubview:_aLable];

}

return self;

}

5、定义header、footer

.m

- (instancetype)initWithFrame:(CGRect)frame{//不能用init

self = [super initWithFrame:frame];

if (self != nil) {

_label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 375, 45)];//不能直接写frame

_label.backgroundColor = [UIColor purpleColor];

_label.textColor = [UIColor whiteColor];

_label.font = [UIFont systemFontOfSize:15.0];

[self addSubview:_label];

}

return self;

}

6、collectionView协议

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

{

return 5;

}

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

return 5;

}

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

{

if (indexPath.row > 1) {

SmallCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellSmallIdentifier forIndexPath:indexPath];

cell.contentView.backgroundColor = [UIColor grayColor];

cell.aLable.text = [NSString stringWithFormat:@"第几个啊 %ld", indexPath.row];

return cell;

}

BigCollectionViewCell* cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellIdentifier forIndexPath:indexPath];

cell.contentView.backgroundColor = [UIColor yellowColor];

cell.aLable.text = [NSString stringWithFormat:@"第几个 %ld", indexPath.row];

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

return cell;

}

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

{

NSString *reuseIdentifier;

if ([kind isEqualToString: UICollectionElementKindSectionFooter ]){

reuseIdentifier = cellFooterIdentifier;

}else{

reuseIdentifier = cellHeaderIdentifier;

}

MyCollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind :kind withReuseIdentifier:reuseIdentifier forIndexPath:indexPath];

if ([kind isEqualToString:UICollectionElementKindSectionHeader]){

view.label.text = [NSString stringWithFormat:@"这是header:%ld",indexPath.section];

}

else if ([kind isEqualToString:UICollectionElementKindSectionFooter]){

view.backgroundColor = [UIColor lightGrayColor];

view.label.text = [NSString stringWithFormat:@"这是footer:%ld",indexPath.section];

}

return view;

}

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

{

NSLog(@"%ld,%ld点击", indexPath.section, indexPath.row);

}

#pragma mark 尺寸

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

{

NSInteger row = indexPath.row;

switch (row) {

case 0:

case 1:

return CGSizeMake(335/2.0, 45+45*indexPath.section);

break;

default:

return CGSizeMake(325/3.0, 45);

break;

}

}

//行间距

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

{

return 10;

}

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

{

return UIEdgeInsetsMake(15, 15, 5, 15);//分别为上、左、下、右

}

//返回头headerView的大小

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

CGSize size={320,45};

return size;

}

//返回头footerView的大小

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

{

CGSize size={320,45};

return size;

}

效果图:



可以自定义layout实现瀑布流,layout一些delegate方法可以在初始化的时候直接设置好
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: