iOS-CollectionView 基础

来源：互联网发布：linux server 版本官网编辑：程序博客网时间：2024/05/22 02:28

CollectionView基础使用方法:

我们将完成以下效果

这里写图片描述

主要步骤如下:

在延展中把 collectionView 作为属性

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>@property (nonatomic,strong) UICollectionView *collectionView;@end

//创建 layout(此处创建的是流水布局)UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];//行距flowLayout.minimumLineSpacing = 10;//列距flowLayout.minimumInteritemSpacing = 10;//设置每个 item 的大小flowLayout.itemSize = CGSizeMake(([UIScreen mainScreen].bounds.size.width -40)/3, ([UIScreen mainScreen].bounds.size.height-80)/4);//设置 item 的上左下右的边距大小flowLayout.sectionInset = UIEdgeInsetsMake(10, 10, 20, 10);//设置 UICollectionView 的滑动方向flowLayout.scrollDirection = UICollectionViewScrollDirectionVertical;

    //注册 item [self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:CellIdentifier];    //注册头部区域    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:Header];    //注册尾部区域    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:Footer];

实现UICollectionViewDataSource 协议中必须实现的方法

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return 20;}// The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath:- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{   UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath];    cell.contentView.backgroundColor = [UIColor redColor];    return cell;}

实现UICollectionViewDelegate 协议中的一些方法

//该方法用于设置 collectionView 的 header 和 footer- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{    //设置头部或尾部 view    if (kind == UICollectionElementKindSectionHeader) {        UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:Header forIndexPath:indexPath];        headerView.backgroundColor = [UIColor orangeColor];        return headerView;    }    else{        UICollectionReusableView *footerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:Footer forIndexPath:indexPath];        footerView.backgroundColor = [UIColor yellowColor];        return footerView;    }}//点击 cell 时调用响应的方法- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{    NSLog(@"didselected = %lu",indexPath.row);}

0 0