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