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