CollectionViewの基礎

# はじめに
今回は、UINavigationControllerとUICollectionViewControllerとUIViewControllerを使いました。主に、CollectoinViewの使い方を記しました。

# 完成品
cellをタップすると、簡単な画面遷移とデータの移行をしています。

<img width="286" alt="スクリーンショット 2018-05-12 11.18.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/d76a53c8-ddbe-a161-8b16-7fce843e394e.png">
<img width="304" alt="スクリーンショット 2018-05-12 11.18.50.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/17463523-62e0-f55e-7cff-e707bd3f5dbe.png">


# 作ってみよう
まずは、storyboardの設定をします。
全体像としては次のようになります。
<img width="797" alt="スクリーンショット 2018-05-12 11.20.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/29f5ab02-b3ef-9c1d-db3d-dd1b3320f521.png">

CollectionViewControllerのcellにはLabelを２つ置いています。
<img width="266" alt="スクリーンショット 2018-05-12 11.20.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/6963ad8c-dc3e-24e8-5d4f-b40a0d34a474.png">

cellに配置されている色のLabelを丸くしたいので、Labelを選択して、次のように設定してください。
<img width="250" alt="スクリーンショット 2018-05-12 11.36.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/9e74e16d-5f3a-ec77-94a0-248b36f3a419.png">

Clip To Boundsにもチェックを入れておいてください。
<img width="250" alt="スクリーンショット 2018-05-12 11.37.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/8952108e-f24f-8d04-99f3-557d4a08ad57.png">


そして、一番右のViewControllerの全面にはLabelを設置しています。
<img width="386" alt="スクリーンショット 2018-05-12 11.21.10.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/07cb4c6e-1631-6bf3-3531-e91000fa63e3.png">

CollectionViewControllerからViewControllerの画面遷移にはSegueを使いましたが、このSegueのIdentifierは"Segue"にしています。
<img width="261" alt="スクリーンショット 2018-05-12 11.25.19.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/d6b9ec5d-7e26-7cf3-27b7-10d70c9441b9.png">

また、CellのIdentifierを"CollectionViewCell"にしています。
<img width="250" alt="スクリーンショット 2018-05-12 11.41.42.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/f6e0a8f7-f93b-e07a-7c4f-1d219513648a.png">


次にNewFileから、UICollectionViewControllerを継承しているCollectionViewController.swiftというファイルとUICollectionViewCellを継承しているCollectionViewCell.swiftというファイルを作ってください。
<img width="251" alt="スクリーンショット 2018-05-12 11.27.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/26f67901-cd9d-7796-4096-078bdce4daa8.png">

そして、storyboardのCollectionViewControllerとCollectionViewCellにクラスの関連付けをします。
<img width="254" alt="スクリーンショット 2018-05-12 11.28.54.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/b19c09fe-a491-1d2b-c0f4-a5ed3ee75752.png">

<img width="250" alt="スクリーンショット 2018-05-12 11.29.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/211071/ce8bfafe-9424-2f93-56e8-bbec73fe0645.png">

CollectionViewCell.swiftのCollectionViewCellというクラスにstoryboardのcellの２つのラベルを関連付けましょう。

```CollectionViewCell.swift
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var name: UILabel!
```

そして、CollectionViewCellのクラス内でrequired init?(coder aDecoder: NSCoder)という関数を作ります。ここでは、cellの枠の色つけと丸くするコードを書きます。
CollectionViewCell.swiftの全体のコードは次のようになります。

```CollectionViewCell.swift
class CollectionViewCell: UICollectionViewCell {
    
    @IBOutlet weak var label: UILabel!
    @IBOutlet weak var name: UILabel!
    
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        
        // cellの枠の太さ
        self.layer.borderWidth = 1.0
        // cellの枠の色
        self.layer.borderColor = UIColor.black.cgColor
        // cellを丸くする
        self.layer.cornerRadius = 8.0
    }
}
```

次はCollectionViewController.swiftにコードを書いていきます。
説明などはコメントアウトに書きました。

```CollectionViewController.swift
class CollectionViewController: UICollectionViewController {
    
    // cellの色の配列
    let colors: [UIColor] = [UIColor.black, UIColor.blue, UIColor.brown, UIColor.cyan, UIColor.darkGray, UIColor.darkText, UIColor.gray, UIColor.green, UIColor.lightGray, UIColor.orange, UIColor.red]
    // cellの色の名前の配列
    let colorNames: [String] = ["black", "blue", "brown", "cyan", "darkGray", "darkText", "gray", "green", "lightGray", "orange", "red"]
    
    // 画面遷移先に渡す色
    var giveColor: UIColor = UIColor.black
    // 画面遷移先に渡す色の名前
    var giveColorName: String = "black"

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    // cellの数を返す関数
    override func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return colors.count
    }

    // cellに情報を入れていく関数
    override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        // Identifierが"CollectionViewCell"でCollectionViewCellというクラスのcellを取得
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "CollectionViewCell", for: indexPath) as! CollectionViewCell
        
        // cellのlabelに色付け
        cell.label.backgroundColor = colors[indexPath.item]
        // cellのnameに色の名前を入れる
        cell.name.text = colorNames[indexPath.item]
    
        return cell
    }
    
    // cell選択時に呼ばれる関数
    // 画面遷移先に渡すデータをここで格納する
    override func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
        giveColor = colors[indexPath.item]
        giveColorName = colorNames[indexPath.item]
        // Identifierが"Segue"のSegueを使って画面遷移する関数
        performSegue(withIdentifier: "Segue", sender: nil)
    }
    
    // 画面遷移先のViewControllerを取得し、データを渡す
    override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
        if segue.identifier == "Segue" {
            let vc = segue.destination as! ViewController
            vc.receiveColor = giveColor
            vc.receiveColorName = giveColorName
        }
    }
}
```

ViewController.swiftのコードは次のようになります。

```ViewController.swift
class ViewController: UIViewController {

    @IBOutlet weak var backgroundLabel: UILabel!
    
    // CollectionViewControllerから渡される色のデータ
    var receiveColor: UIColor = UIColor.black
    var receiveColorName: String = "black"
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 背景の色を渡された色にする
        backgroundLabel.backgroundColor = receiveColor
        // NavigationItemと呼ばれる一番上のバーに色の名前を入れる
        self.navigationItem.title = receiveColorName
    }
}
```

これで完成になります。

#最後に
このコードは、[github](https://github.com/azuma317/CollectionViewSample)にあげておきます。