UICollectionView 简单应用和实际操作

1、网格视图

 

UICollectionView      网格布局

UICollectionViewFlowLayout系统图自带网格布局

系统自带的网格布局

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

NSInteger itemWidth = (CGRectGetWidth(self.view.frame) - 4 * kMargin) / 3;

//设置单元格大小

flowLayout.itemSize = CGSizeMake(itemWidth, itemWidth / 0.618);

//最小行间距（默认10）

flowLayout.minimumLineSpacing = 10;

//最小cell间距 （默认10）

flowLayout.minimumInteritemSpacing = 10;

//设置section的内边距

flowLayout.sectionInset = UIEdgeInsetsMake(kMargin, kMargin, kMargin, kMargin);

设置UICollectionView的滑动方向

flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;

//sectionHeader的大小,如果是竖向滚动，只需设置Y值。如果是横向，只需设置X值。

flowLayout.headerReferenceSize = CGSizeMake(0, 200);

//网格布局

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

//设置数据源代理

collectionView.dataSource = self;

//注册cell

[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellID];

//注册sectionHeader

[collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerID];

2、UICollectionView 数据源

//多少分组

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

return 2;

}

//每一个分组里有多少个item

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

return 200;

}

// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:

//创建UICollectionViewCell的方法

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

//根据identifier从缓冲池里取cell

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

cell.backgroundColor = [UIColor orangeColor];

return cell;

}

//创建sectionHeader的方法

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

//kind:种类，一共两种，一种是header,一种是footer

if (kind == UICollectionElementKindSectionHeader) {

UICollectionReusableView * reusable = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:headerID forIndexPath:indexPath];

reusable.backgroundColor = [UIColor yellowColor];

return reusable;

}

return nil;

}

3、#pragma mark - UICollectionViewDelegate

//点击cell的方法 cell == item

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

NSLog(@"section - %@ , row - %@",@(indexPath.section),@(indexPath.row));

}

4、#pragma mark - UICollectionViewDelegateFlowLayout

设置itemSize,代理优先级高于属性

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

if (indexPath.section == 0) {

return CGSizeMake(20, 20);

}

return CGSizeMake(10, 10);

return CGSizeMake(arc4random_uniform(100), arc4random_uniform(100));

}

设置sectionInset

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

if (section == 0) {

return UIEdgeInsetsMake(20, 30, 40, 50);

}

return UIEdgeInsetsMake(kMargin, kMargin, kMargin, kMargin);

}

设置minimumLineSpacing最小行间距

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

if (section == 0) {

return 20;

}

return 2;

}

设置headersize

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

if (section == 0) {

return CGSizeMake(0, 500);

}

return CGSizeMake(0, 100);

}