UICollectionView简单介绍

 1. UICollectionView 类是iOS6 新引进的API，用于展示集合视图，布局更加灵活，可实现多列布局，用法类似于UITableView类。

  2.自定义UICollectionViewCell，与自定义tableViewCell基本一致。

 

   

UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];//创建布局方式，系统默认线性布局

    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];//创建collectionView,要指定layout

     [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"collection"];//注册UICollectionViewCell，也就是下面我们要使用的cell

     [collectionView registerClass:[UICollectionReusableView class]

 forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"head"];//注册头视图（每组）

     [collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"head"];//注册尾视图（每组）

       collectionView.backgroundColor =  [UIColor whiteColor];//背景色

      collectionView.delegate = self;//代理

      collectionView.dataSource = self;

      [self.view addSubview:collectionView];

1. 几个代理方法

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

      //设置组数

    return 2;

}

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

    //设置每组有多少单元

    return 10;

}

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

    //设置cell，注意，此处使用的identifier必须与之前注册的保持一致

    static NSString *identifier = @"collection";

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

    return cell;

}

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

    //某单元被点击

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

}

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

    //设置item的尺寸

    return CGSizeMake(150, 200);

}

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

    //设置组的边距（上、左、下、右）

    return UIEdgeInsetsMake(5, 5, 5, 5);

}

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

    //设置最小行距（item之间）

    return 10;

}

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

    //设置组中，item的最小间距

    if (section == 0) {

        return 30;

    }

    return 10;

}

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

    //设置每组头视图的尺寸

    return CGSizeMake(200, 20);

}

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

    //设置每组尾视图的尺寸

    return CGSizeMake(200, 20);

}

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

    //设置头/根视图，注意，此处的withReuseIdentifier要与之前注册时使用的完全一致

    UICollectionReusableView *view;

    if ([kind isEqual:UICollectionElementKindSectionHeader]) {

        view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"head" forIndexPath:indexPath];

        view.backgroundColor = [UIColor redColor];

    }else if([kind isEqual:UICollectionElementKindSectionFooter]){

        view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"head" forIndexPath:indexPath];

        view.backgroundColor = [UIColor brownColor];

    }

    return view;

}

如下一个小小的练习：

#import "ViewController.h"

@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];//创建布局方式，系统默认线性布局

    UICollectionView *collection=[[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];//初始化，并设置布局且要指定layout
    collection.delegate=self;//代理
    collection.dataSource=self;
    [collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];//注册UICollectionView，这是固定格式，也是必须要实现的，同时也是下面的cell
    [collection registerClass:[UICollectionReusableView class]forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];//注册头/尾视图视图类型必须为UICollectionReusableView或者其子类，kind设置为UICollectionElementKindSectionHeader或者UICollectionElementKindSectionFooter，最后设置标识
    collection.backgroundColor=[UIColor redColor];
    [self.view addSubview:collection];

}
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
//设置组数，不写该方法默认是一组
    return 2;
}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
//设置每组行数
    return 9;
}


-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *indentifier=@"cell";
    UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:indentifier forIndexPath:indexPath];
    cell.backgroundColor=[UIColor grayColor];
    cell.layer.borderWidth=1;//边框的宽度
    cell.layer.borderColor=[UIColor orangeColor].CGColor;//边框的颜色
    return cell;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
    NSLog(@"%zi组%zi行",indexPath.section,indexPath.item);
}

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    //设置头视图的尺寸，如果想要头视图，则必须实现该方法
    return CGSizeMake(300, 30);
}
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
    //根据类型及其标识获取注册过的头视图，注意重用机制导致的bug
    UICollectionReusableView *heardView=[collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
    heardView.backgroundColor=[UIColor blueColor];
    for (UIView *view in heardView.subviews ) {
        [view removeFromSuperview];
    }
    UILabel *lable=[[UILabel alloc]initWithFrame:heardView.bounds];
    lable.text=[NSString stringWithFormat:@"%zi组的头视图",indexPath.section];
    [heardView addSubview:lable];
    lable.textColor=[UIColor yellowColor];
    return heardView;

}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    //设置item的尺寸
    return CGSizeMake(self.view.frame.size.width/3.0, 100);//改变的是高
}
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
    //设置组距离上下左右的间距
    return UIEdgeInsetsMake(0, 0, 0, 0);
}
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
    //两个item的列间距
    return 0;
}

-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
    //如果一组中有多行item，设置行间距
    return 0;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section{
    //设置底部视图的尺寸，一般不用
    return CGSizeMake(200, 10);
}

自定义UICollectionViewCell

#import "ViewController.h"
#import "MyCollectionViewCell.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout>
{
    UICollectionView *collectview;
}
@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    UICollectionViewFlowLayout *layout=[[UICollectionViewFlowLayout alloc]init];
    collectview=[[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:layout];
    collectview.backgroundColor=[UIColor whiteColor];
    collectview.delegate=self;
    collectview.dataSource=self;
    [collectview registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
    [collectview registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView"];
    [self.view addSubview:collectview];

}
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
    return 6;

}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *indentifier=@"cell";
    MyCollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:indentifier forIndexPath:indexPath];
cell.imageview.image=[UIImage imageNamed:@"200.jpg"];
//自定义选中背景
    UIView *view=[[UIView alloc]init];
    view.backgroundColor=[UIColor redColor];
    cell.selectedBackgroundView=view;
    return cell;
}
@end

自定义的.h.m文件中的属性与方法

#import <UIKit/UIKit.h>

@interface MyCollectionViewCell : UICollectionViewCell

@property(nonatomic,strong)UIImageView *imageview;

@end

#import "MyCollectionViewCell.h"

@implementation MyCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame{
    self=[super initWithFrame:frame];
    if (self) {
        _imageview=[[UIImageView alloc]initWithFrame:self.bounds ];
        [self addSubview:_imageview];
    }
    return self;
}
@end