CollectionView 〜② カスタムセル 〜

***
【目的】
前回の[CollectionView 〜① Single View Applicationから](http://qiita.com/k_kuni/items/7538ef5e28a08289b691)の続きでカスタムセルを使用する。
ついでにセルの大きさも変更してみる。
***
####**1.セルを作成する**
　Project Navigaterで、New FileからUICollectionViewCellを作成する。
(Also create XIB fileにチェックを入れる）
<img src="https://qiita-image-store.s3.amazonaws.com/0/70430/db81f7f6-699f-a91d-2fa3-9c817e5e70f5.png" width="300"/>

同様にSecondSectionCellも作成しておく。
　
###**2.セルのラベルを追加する**
　それぞれのセルにUILabelを追加する。
<img src="https://qiita-image-store.s3.amazonaws.com/0/70430/badd97f0-ca2a-48ed-c87d-a7b123926fd2.png" width="400"/>

追加したUILabelをカスタムセルに接続する。
作成したCollectionViewCellを選択して、Identity inspectorから
ClassにFirstSectionCellとSecondSectionCellをそれぞれ指定する。
<img src="https://qiita-image-store.s3.amazonaws.com/0/70430/f26d8574-433e-55c8-062d-56a3af620b03.png" width="400"/>


UILabelをcommandキーを押しながら.hファイルにドラックする
<img src="https://qiita-image-store.s3.amazonaws.com/0/70430/cc40f76d-9db1-e1ad-d336-e45d817a046d.png" width="400"/>

###**3.カスタムセルを呼び出す。**
　まずは、ViewDidLoadで、UICollectionViewにカスタムセルをNibファイルから登録します。

```objc:ViewController.m
    // UICollectionViewにカスタムセルを追加する
    UINib *nibFirst = [UINib nibWithNibName:@"FirstSectionCell" bundle:nil];
    [self.myCollectionView registerNib:nibFirst forCellWithReuseIdentifier:@"FirstSectionCell"];
    
    UINib *nibSecond = [UINib nibWithNibName:@"SecondSectionCell" bundle:nil];
    [self.myCollectionView registerNib:nibSecond forCellWithReuseIdentifier:@"SecondSectionCell"];
```

ここでは、一番目のセクションでは、FirstSectionCellを使用して、２番目のセクションでは、SecondSectionCellを使用します。
ラベルは、文字の折り返しをするために、numberOfLinesに0を設定して、lineBreakModeにNSLineBreakByCharWrappingとしています。

```objc
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    
    if (indexPath.section == 0) {
        // １つめのセクションは、FirstSectionCellを使用して、背景色を赤にする
        FirstSectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"FirstSectionCell" forIndexPath:indexPath];
        cell.backgroundColor = [UIColor redColor];
        cell.lblFirst.text = [NSString stringWithFormat:@"section:%ld,row:%ld", indexPath.section, indexPath.row];
        cell.lblFirst.numberOfLines = 0;       // 複数行を表示する
        cell.lblFirst.lineBreakMode = NSLineBreakByCharWrapping;    // 折り返しの設定
        
        return cell;
    }
    else{
        // ２つ目のセクションは、SecondSectionCellを使用して、背景色を緑にする
        SecondSectionCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"SecondSectionCell" forIndexPath:indexPath];
        cell.backgroundColor = [UIColor greenColor];
        cell.lblSecond.text = [NSString stringWithFormat:@"section:%ld,row:%ld", indexPath.section, indexPath.row];
        cell.lblSecond.numberOfLines = 0;       // 複数行を表示する
        cell.lblSecond.lineBreakMode = NSLineBreakByCharWrapping;   // 折り返しの設定
        
        return cell;
    }
}
```

###**４.セルのSizeを設定する。**
セルのSizeを設定するには、UICollectionViewDelegateFlowLayoutの
- (CGSize)collectionView:collectionView layout: sizeForItemAtIndexPath:メソッドを使用します。

```objc
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
    
    if (indexPath.section == 0) {
        // 正方形で横に２つ並べる
        float size = (self.myCollectionView.frame.size.width - 10) / 2;
        return CGSizeMake(size, size);
    }
    else{
        // 正方形で横に３つ並べる
        float size = (self.myCollectionView.frame.size.width - 10 * 2) / 3;
        return CGSizeMake(size, size);
    }
}
```
collectionViewの横幅から−10としているのは、セルとセルの空間を考慮しています。
<img src="https://qiita-image-store.s3.amazonaws.com/0/70430/62899663-dac4-3c0a-bb30-ba74a9f862a6.png" width="300"/>