CollectionViewで均等にセルを表示→セルの上にボタンを比率指定付きで表示

## Result

* セル (CollectionViewCell) を3列に表示
* 各セル上にお気に入りボタンのようなものを右下に表示

<img width="487" alt="Screen Shot 2016-08-29 at 04.07.04.png" src="https://qiita-image-store.s3.amazonaws.com/0/15144/c6f39e5a-7f46-bb8f-067f-9f8cd7e5a4cf.png">

~~4:07 AMとかなってるのはご愛嬌で！🌙~~

コードﾄﾞｿﾞｰ
https://github.com/keisei1092/celltest

## Init

* New -> Project -> iOS -> Single View Application
* Main.Storyboard
* CollectionViewを置く
* CollectionViewの背景を黒、CollectionViewCellの背景を白にしておく
    * （↓画像ではCollectionViewCellの縦横が100になってるけど気にしないでください）

![Slice 1.png](https://qiita-image-store.s3.amazonaws.com/0/15144/f9816794-6856-cf37-f6bc-8c2e79e9c4da.png)

* CollectionViewCellを選択してAttibutes InspectorのCollection Reusable ViewのIdentifierにCellと入力しておく

<img width="823" alt="Main_storyboard_and_新規投稿_-_Qiita.png" src="https://qiita-image-store.s3.amazonaws.com/0/15144/08f076c8-ab67-099e-aaa1-67b8da31beef.png">

* Collection ViewからView ControllerへControl+ドラッグして、dataSourceとdelegateをチェック

<img width="367" alt="Main_storyboard.png" src="https://qiita-image-store.s3.amazonaws.com/0/15144/bb8858ad-aa52-f71a-c707-70611db989c5.png">

* Collection View Flow LayoutのMin Spacingを2とかにしとく

<img width="1156" alt="iPhone_6s_-_iPhone_6s___iOS_9_3__13E230_.png" src="https://qiita-image-store.s3.amazonaws.com/0/15144/191f4a6a-e5c6-fa1b-259a-9298e5060e0d.png">

これで準備完了です

## CollectionViewCellを均等に配置する

コードを書きます。

```swift
import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }

    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
        return collectionView.dequeueReusableCellWithReuseIdentifier("Cell", forIndexPath: indexPath) as UICollectionViewCell
    }

    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int {
        return 1
    }

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return 20;
    }

    func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {
        return CGSizeMake(self.view.frame.size.width / 3 - 2, self.view.frame.size.width / 3 - 2)
    }

}
```

* 保存して実行
* 動かすデバイスを変えても3列で綺麗に表示されましたか？

## ボタンを右下に表示する

* Buttonを配置
* 適当に「★」とかにしとく

<img width="420" alt="Main_storyboard.png" src="https://qiita-image-store.s3.amazonaws.com/0/15144/eed5a1f0-8d9e-b807-a123-ade1ccba1f0c.png">

* 「★」からCellへControl+ドラッグして、Center Horizontally in ContainerとCenter Vertically in Containerをチェック

<img width="294" alt="Main_storyboard.png" src="https://qiita-image-store.s3.amazonaws.com/0/15144/b0174e2f-64f2-849d-5fd4-a6900942fb10.png">

* Size InspectorのDescendant Constraintsで作った制約（Align Center X to: ★）をダブルクリックして

<img width="272" alt="Main_storyboard.png" src="https://qiita-image-store.s3.amazonaws.com/0/15144/529a73f2-1b5c-e2cd-964b-c06b62cfd37a.png">

* Multiplierを1.666とかにする
* 同じくCenter.Yも

<img width="1120" alt="Screen Shot 2016-08-29 at 04.05.03.png" src="https://qiita-image-store.s3.amazonaws.com/0/15144/945d1852-c514-106d-ee8b-e16f71529c53.png">

* できたら、Storyboard上の★を選択して、Storyboardメイン編集画面の下にあるツールのうち一番右のものをクリックしてUpdate Frames（↑画像の右下をご覧ください！）
* これで右下になったはずです
* Center.XとCenter.YのMultiplierの値をいじれば、好きな場所にパーツを配置できますね。