CollectionKitというライブラリを使ってみました！！

##qiitaに投稿した経緯(読む必要はありません)
```
現在プロジェクトで自分にはもう無理だと思う時、そうだライブラリを、なんかいいライブラリはないかとgithubをうろちょろ。他のアカウントのいいね押されたものをうろちょろ…日々さまよっているものです。

そして、あ！これいいかも。使ってみたいと思って、誰か使っていないかな〜webをうろちょろ、ない！！

どうしよう。もう一人の私が、そっと肩を叩いてこう言う。

「やるんだ！いつも誰かのwebばかりに頼っているからライブラリの使い方がわからないんだ！」

そして、思う！そうだ！やるんだ！

と言うことで、このライブラリでできることはまだまだ沢山あるだろうですが、基本の使い方が分かったので投稿しました。

本当、どうでもいい物語……。
```

## で、なんのライブラリ使ったか？urlとか！
**CollectionKit**と言うものです。
[SoySauceLab/CollectionKit](https://github.com/SoySauceLab/CollectionKit)

下はかなり参考になると思うgithub(ちなみに上のインストールでターゲット変えれば試せます。)
[gLaroccia/Prova6](https://github.com/gLaroccia/Prova6)

## 最初に言っておかないといけないこと。
基本的使い方を説明で、スペシャリティな使い方の説明ではありません。
とは言ったものの基本的なことは結構書いたので、ある程度応用などもできると思っています。
また、お！と思うものがあれば、またqiitaに書きます。
もし、他の使い方でこういうのあるよ的なものがあれば、その優しい気持ちで教えていただきたいです:hatching_chick:もじもじ

## 表示、百聞は一見に如かず
![collectionkitsampleMOVE.gif](https://qiita-image-store.s3.amazonaws.com/0/133940/537e4077-0808-2221-22e9-4d3559c568c1.gif)

##code

```ViewController.swift
import UIKit
import CollectionKit

class ViewController: UIViewController {
    
    var collectionView = CollectionView()
    let scrennSize = UIScreen.main.bounds

    override func viewDidLoad() {
        super.viewDidLoad()
        let provider1 = CollectionProvider(
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50],
            viewUpdater: { (label: UILabel, data: Int, index: Int) in
                
                label.backgroundColor = UIColor.darkGray
                label.textColor = .white
                label.layer.cornerRadius = 10
                label.layer.masksToBounds = true
                label.textAlignment = .center
                label.text = "\(data)🌸"
        })
        
        provider1.layout = WaterfallLayout<Int>(columns: 3).transposed()
        provider1.sizeProvider = imageSizeProvider
        collectionView.provider = provider1
        
        collectionView.frame = CGRect(x:0,y:100, width:scrennSize.width, height:300)
        collectionView.backgroundColor = UIColor.lightGray
        self.view.addSubview(collectionView)
        
    }

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

func imageSizeProvider(at: Int, data: Int, collectionSize: CGSize) -> CGSize {
    let isEvenNum = data % 2 == 0 ? true : false
    if(isEvenNum){
        return CGSize(width:50, height:50)
    }else{
        return CGSize(width:100, height:100)
    }
}
```

##説明
1.

```.swift
var collectionView = CollectionView()
```
ここからもう始まっています。
これはライブラリが自作してくれたCollectionView。
これをまずは上記のようにインスタンス化。

---

2.
先ほどのインスタンスしたものの、providerと言うプロパティにセットするためのものを以下のように作成します

```.swift
let provider1 = CollectionProvider(
            data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50],
            viewUpdater: { (label: UILabel, data: Int, index: Int) in
                
                label.backgroundColor = UIColor.darkGray
                label.textColor = .white
                label.layer.cornerRadius = 10
                label.layer.masksToBounds = true
                label.textAlignment = .center
                label.text = "\(data)🌸"
        })
```
上記で行っていることを説明すると、
data→今回使いたい配列。型は特になんでもいいです。
viewUpdater→
label:ここはUIViewでもUIImageViewでもLabelでもUIView継承しているものならなんでもいいんじゃないかと思ってます！え？ここにはじっさいCollectionViewのところに載せるViewを指定してあげるみたいです:snowman:

data:ここでは先に指定したdataに入れた型を書くみたいです。

index:おそらくここでcollectionViewのcellの数取得でうんちゃらできると思いますが、とりあえず、無視しましょう。

で、それらの引数を元にうんちゃらしているのが、ここ。CollectionViewに表示するLabelに指定したdataを入れていて、少しオシャレにしています。:doughnut:

```.swift
label.backgroundColor = UIColor.darkGray
label.textColor = .white
label.layer.cornerRadius = 10
label.layer.masksToBounds = true
label.textAlignment = .center
label.text = "\(data)🌸"
```
---
3.2行すっ飛ばして、先にここの説明、上記で指定したものをセット！

```.swift
collectionView.provider = provider1
```
---
4.ここは表示を縦幅何段かにしたい時、セットするためのものみたいです。なければ、横いっぱいになったら、縦にズラーって並びます。要は横スクロールしたい時に決める感じかと思ってくれればいいのではないかなと思っています。今回の場合は3段。

```.swift
provider1.layout = WaterfallLayout<Int>(columns: 3).transposed()
```

この設定なので、本来の大きさで多少調整されるので違う見え方をします。この一行がなければと言うと以下のように指定下通りの大きさになります。用途、用途で使い方は調整した方が良さそうです。(下の画像は最後に説明するおまけの余白ありの画像となってしまっていますがあまりお気になさらず…)

<img width="314" alt="スクリーンショット 2018-03-31 17.07.22.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/5ef7ac7c-7623-9ee4-4098-a60eae14fec3.png">

ちなみに

```.swift
provider1.layout = WaterfallLayout<Int>(columns: 3)
```
は縦にと言う感じ

<img width="315" alt="スクリーンショット 2018-04-01 13.35.13.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/fb5793c3-4307-fb04-6238-ba543dd50142.png">

ここまでくるとWaterfallLayoutは調整されていい感じにしてくれるとう言うのが理解できます！！

---
5.来ました、ついに、サイズの設定がきました。上の一行は下の関数との連携で使います。他にも、この書き方できるプロパティはあると思いますが、今回はこれだけ。

で下の関数で行っているものは今回は偶数だったら、縦幅、横幅を50の大きさで、それ以外なら100で返してねと書いてあります。

```.swift
provider1.sizeProvider = imageSizeProvider
```

```.swift

func imageSizeProvider(at: Int, data: Int, collectionSize: CGSize) -> CGSize {
    let isEvenNum = data % 2 == 0 ? true : false
    if(isEvenNum){
        return CGSize(width:50, height:50)
    }else{
        return CGSize(width:100, height:100)
    }
}
```
---
6.最後の仕上げにもちろんと言う感じで、以下を。

```.swift
collectionView.frame = CGRect(x:0,y:100, width:scrennSize.width, height:300)
collectionView.backgroundColor = UIColor.lightGray
self.view.addSubview(collectionView)
```
---
7.おまけ1
CollectionViewに余白つけたければ以下を指定すればできます。

```.swift
collectionView.contentInset = UIEdgeInsetsMake(10, 10, 10, 10)
```

これをすると、上、左、下しかこの図では分かりませんが、こんな感じで余白をとることができます。
<img width="313" alt="スクリーンショット 2018-03-31 16.53.33.png" src="https://qiita-image-store.s3.amazonaws.com/0/133940/f605b41e-be4e-793d-c691-57e4e8774052.png">

---
8.おまけ2
タップした時は絶対欲しいよなと思ったので書いておきます。一応挙動も
なお、これはdataを更新している訳ではないので、またcell隠れるとdataから引っ張り出して、最初と同じ表示になります。以下だとログも出るのですが、gifは表示だけです。view.textで少し分かりにくいかもしれませんが、ここでのViewはLabel。Labelのtextを変えていると言うことです。

```.swift
provider1.tapHandler = {(view, index, dataProvider) in
    print("\(view)")
    view.text = "🦁\(dataProvider.data(at: index))"
}
```
![collectionkitsample2Move.gif](https://qiita-image-store.s3.amazonaws.com/0/133940/e9b956a3-0e1e-f04c-c74a-b8d808c7614b.gif)

---

https://qiita.com/sachiko-kame/items/1ce5434d20a7eb987e76
には少しプロパティ加えての見せ方を載せているので是非。

##最後に。
このライブラリは、もっと色々できるものだと思っているし、これで色々できると自分のプロジェクトに役立つかもしれないので引き続き調査をしていく所存です！:hatched_chick:シャキッ！！