iOS UICollectionView、UICollectionViewCell和Header、Footer

準備工做：建立UICollectionView

@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource>
@property(nonatomic,strong)UICollectionView*CV;
@property(nonatomic,strong)UICollectionViewFlowLayout*FL;

①UICollectionViewFlowLayout

UICollectionViewFlowLayout是系統提供給咱們一個封裝好的佈局設置類，其中有一些佈局屬性咱們能夠進行設置：

//初始化FL
    self.FL=[[UICollectionViewFlowLayout alloc]init];
    //Cell的大小
    self.FL.itemSize=CGSizeMake(100, 50);
    //Cell的最小行間距
    self.FL.minimumLineSpacing=10;
    //Cell的最小列間距
    self.FL.minimumInteritemSpacing=5;
    //內部的（上左下右）能夠左右留空隙
    self.FL.sectionInset = UIEdgeInsetsMake(10, 7, 0, 7);
    
    //滑動方向
    //UICollectionViewScrollDirectionVertical   - 垂直
    
    //UICollectionViewScrollDirectionHorizontal - 水平

    self.FL.scrollDirection=UICollectionViewScrollDirectionVertical;

    //設置header的大小
    self.FL.headerReferenceSize = CGSizeMake(320, 100);

②UICollectionView

//初始化CV
    self.CV=[[UICollectionView alloc]initWithFrame:CGRectMake(0, 64, 320, 350) 
collectionViewLayout:self.FL];
//我曾經在一個ScrollView裏面添加CollectionView，CV的高我設置等於ScrollView的高（用自動適配肯定），結果形成個人CV明明數據加載完成卻沒法向下滑動，更改其值爲肯定值後，才正常
    self.CV.delegate=self;
    self.CV.dataSource=self;
    [self.view addSubview:self.CV];

③兩個必寫的方法

//這裏設置每組裏面返回多少Item
-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{  
     return  12;
}

-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
//在這裏複用Cell

}

一：Xib初始化

1.建立UICollectionViewCell，同時生成XIB文件

生成好的文件：

2.在這裏我設置了背景顏色，同時設置Identifier。

3.在VC.m文件中

-(void)CreatCellFromXib{
    
    UINib *nib=[UINib nibWithNibName:@"CollectionViewCell" bundle:nil];
    //把nib註冊到CollectionView
    //xib文件的初始化方法
    [self.CV registerNib:nib forCellWithReuseIdentifier:@"cellname"];
}
-(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellname=@"cellname";
   
    /*
      注意：三碼一致
     xib                 - Identifier
     registerNib         - Identifier
     dequeueReusableCell - Identifier  
     */
    CollectionViewCell*cell=[collectionView dequeueReusableCellWithReuseIdentifier:
cellname forIndexPath:indexPath];
     return cell;
    }

二：純代碼初始化

1.建立UICollectionViewCell，爲了方便起見我直接命名爲UICollectionViewCell2

2.VC.m中初始化Cell,並設置Identifier

-(void)CreatCellFromCode{
    //初始化,在這裏設置Identifier
    [self.CV registerClass:[CollectionViewCell2 class] forCellWithReuseIdentifier:@"cellname"];
}

3.複用cell

(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
    static NSString *cellname=@"cellname";
    CollectionViewCell2 *cell=[collectionView dequeueReusableCellWithReuseIdentifier:cellname forIndexPath:indexPath];
    cell.backgroundColor=[UIColor blueColor];
       return cell;
}

三：StoryBoard初始化

注意：StoryBoard初始化，不用初始化UICollectionView和UICollectionViewFlowLayout
 

1.建立UICollectionViewCell，爲了方便起見我直接命名爲UICollectionViewCell3

2.SB中，以下操做

3.把UICollectionView當作屬性拖入到VC.m中

@property (weak, nonatomic) IBOutlet UICollectionView *CV;
//這兩句代碼仍是要寫
self.CV.delegate=self;
self.CV.dataSource=self;

最後生成效果以下：

四.用XIB生成Header、Footer

①首先建立 UICollectionReusableView的子類HeaderView 和FooterView，同時生成XIB文件

②設置XIB文件中的identifier值爲header、footer

③註冊

UINib *nib=[UINib nibWithNibName:@"HeaderView" bundle:nil];
    [self.CV registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];

//UICollectionElementKindSectionHeader  --header
//UICollectionElementKindSectionFooter  --footer

④回調方法

//header的回調方法
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
          if (kind== UICollectionElementKindSectionHeader)  {
              HeaderView *hview = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"header" forIndexPath:indexPath];
            hview.frame = CGRectMake(0, 0, SW, SH);
            return hview;
        }else{
       FooterView *fview = [collectionView dequeueReusableSupplementaryViewOfKind:kind withReuseIdentifier:@"footer" forIndexPath:indexPath];
            fview.frame = CGRectMake(0, 0, SW, SH);
            return fview;
}
      
    
    //若是生成兩個CV但其中一個沒有設置header 能夠添加判斷後返回一個空View--- return [[UICollectionReusableView alloc]init];
    
}

注意：header大小的設置：！

寫法一：

self.FL.headerReferenceSize = CGSizeMake(320, 100);

 寫法二：

-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section{
    return CGSizeMake(320, 100);
}

寫法三：（若是是在StoryBoard裏生成的collectionView，這種方法header 的大小位置能肯定，可是實際上的item的位置是按照StoryBoard裏的位置佈局的，也就是說，可能形成headerView和item重合的現象）

CLheader.frame=CGRectMake(0, 0, 320, 100);