iOS-CollectionView 基础

CollectionView基础使用方法:

我们将完成以下效果

Simulator Screen Shot 2016年5月20日 下午5.03.15.png

主要步骤如下:

在延展中把 collectionView 作为属性

@interface ViewController ()

@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

    //注册 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);
}