UICollectionView 简单使用详解

UICollectionView 其实和UITableview差不多，学会简单的使用后，根据 UITableview 的各种使用逻辑，就能够轻松的实现你想要实现的各种功能，下面直接上代码啦

1，ViewController.h 文件

- (void)viewDidLoad {
    [super viewDidLoad];
    self.view.backgroundColor = [UIColor whiteColor];
    UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
//    flowLayout 的滑动方向
    [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
//    两个 item 之间 的 横向间隔
    flowLayout.minimumInteritemSpacing = 20;
//    两个 item 之间 的 纵向间隔
    flowLayout.minimumLineSpacing = 10;
    UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];
    collectionView.delegate = self;
    collectionView.dataSource = self;
    [self.view addSubview:collectionView];
//    初始化 UICollectionView 的时候，同时 注册 cell
    [collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:cellID];
    
}

// 定义每组 Items 的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 5;
}

//定义展示的Section的个数
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 2;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
    cell.backgroundColor = [UIColor cyanColor];
    cell.imageVieww.image = [UIImage imageNamed:@"小猴猴"];
    cell.nameLabel.text = @"你哈";
    return cell;
    
}

//定义每个Item 的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
//    cell 的宽高
    return CGSizeMake(80, 80);
}

//定义每个UICollectionView 的 margin
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(50, 15, 50, 15);//(上边距，左边距，下边距，右边距)
}

#pragma mark ------ 选中 cell -------
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    CollectionViewCell *cell = (CollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
    NSLog(@"点击的是%@",cell.nameLabel.text);
        cell.backgroundColor = [UIColor yellowColor];
}

#pragma mark ----取消选中上一个  -------
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
        CollectionViewCell *cell = (CollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
        cell.backgroundColor = [UIColor cyanColor];
}

2， 自定义的 

UICollectionViewCell

.h 文件 

#import <UIKit/UIKit.h>

@interface CollectionViewCell : UICollectionViewCell

@property (nonatomic, retain)UIImageView *imageVieww;

@property (nonatomic, retain)UILabel *nameLabel;

@end

.m 文件

#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height

#import "CollectionViewCell.h"

@implementation CollectionViewCell

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        
        self.imageVieww = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, WIDTH/5, WIDTH/5)];
        self.imageVieww.layer.cornerRadius = WIDTH/5/2;
        self.imageVieww.layer.masksToBounds = YES;
        self.imageVieww.layer.borderWidth = 2;
        self.imageVieww.layer.borderColor = [UIColor cyanColor].CGColor;
        [self.contentView addSubview:self.imageVieww];
        
        self.nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.imageVieww.frame)-20, CGRectGetWidth(self.imageVieww.frame), 20)];
        self.nameLabel.textColor = [UIColor yellowColor];
        self.nameLabel.textAlignment = 1;
        [self.contentView addSubview:self.nameLabel];
    }
    return self;
}

效果图如下：