UICollectionView的基本使用(一)

做iOS的对于UITableView一定都挺了解的。比如实现代理啊，cell重用啊，自定义cell啊等等。其实还有一个非常好用的控件UICollectionView，实现起来意思与UITableView类似。

那下面就讲一下如何使用UICollectionView来实现项目中的一些需求。这篇文章只讲解基本使用。

1.首先创建一个JYCollectionViewCell类，继承自UICollectionViewCell，类似于UITableViewCell。

#import <UIKit/UIKit.h>

@interface JYCollectionViewCell : UICollectionViewCell
//图片
@property(nonatomic,strong)UIImageView *imageView;
//文字
@property(nonatomic,strong)UILabel *label;
@end

#import "JYCollectionViewCell.h"

@implementation JYCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame
{
    self=[super initWithFrame:frame];
    if (self)
    {
        _imageView=[[UIImageView alloc]initWithFrame:CGRectMake(5, 5, 60, 60)];
        _imageView.backgroundColor=[UIColor greenColor];
        [self.contentView addSubview:_imageView];
        
        _label=[[UILabel alloc]initWithFrame:CGRectMake(5, 70, 60, 30)];
        _label.backgroundColor=[UIColor yellowColor];
        _label.font=[UIFont systemFontOfSize:12];
        _label.textColor=[UIColor blackColor];
        [self.contentView addSubview:_label];
    }
    return self;
}

2.在ViewController‘中的代码如下，(两个代理是必须实现的,关于代码注释也已经很明显了)：

#import "ViewController.h"
#import "JYCollectionViewCell.h"
#define UISCREEN_WIDTH [UIScreen mainScreen].bounds.size.width

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

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.view.backgroundColor=[UIColor whiteColor];
    //1.创建布局
    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc]init];
    //2.设置headerView
    layout.headerReferenceSize=CGSizeMake(UISCREEN_WIDTH, 60);
    
    //3.初始化collectionView
    self.collectionView=[[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
    self.collectionView.backgroundColor=[UIColor clearColor];
    
    //4.注册collectionViewCell
    [self.collectionView registerClass:[JYCollectionViewCell class] forCellWithReuseIdentifier:@"cellId"];
    //5.注册headerView
    [self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView"];
    
    //5.设置代理
    self.collectionView.delegate=self;
    self.collectionView.dataSource=self;
    
    [self.view addSubview:self.collectionView];
}

#pragma mark -实现代理
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 3;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
{
    return 8;
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    JYCollectionViewCell *cell=(JYCollectionViewCell *)[collectionView dequeueReusableCellWithReuseIdentifier:@"cellId" forIndexPath:indexPath];
    cell.imageView.image=[UIImage imageNamed:@"111"];
    cell.label.text=@"测试文本";
    
    cell.backgroundColor=[UIColor grayColor];
    return cell;
}

//设置每一个item的尺寸
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
    return CGSizeMake(80, 100);
}
//设置每一个item的UIEdgeInsets
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
    return UIEdgeInsetsMake(5, 10, 5, 10);
}
//设置每一个item的水平间距
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section
{
    //这里的间距设置后，会被系统重新布局，所以水平间距不准
    return 2;
}
//设置每隔item的垂直间距
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section
{
    return 10;
}
//通过设置SupplementaryViewOfKind 来设置头部或者底部的view，其中 ReuseIdentifier 的值必须和 注册是填写的一致
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath
{
    UICollectionReusableView *headerView = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"reusableView" forIndexPath:indexPath];
    headerView.backgroundColor =[UIColor grayColor];
    UILabel *label = [[UILabel alloc] initWithFrame:headerView.bounds];
    label.text = @"头部";
    label.font = [UIFont systemFontOfSize:20];
    [headerView addSubview:label];
    return headerView;
}
//点击item的方法
 -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
    JYCollectionViewCell *cell=(JYCollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
    NSLog(@"%ld %ld %@",indexPath.section,indexPath.row,cell.label.text);
}

3.效果图如下：

//一些距离神马的自己调了。