LoginSignup
12
3

More than 5 years have passed since last update.

@sachiko-kame

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

Last updated at Posted at 2018-03-31

qiitaに投稿した経緯(読む必要はありません)

現在プロジェクトで自分にはもう無理だと思う時、そうだライブラリを、なんかいいライブラリはないかとgithubをうろちょろ。他のアカウントのいいね押されたものをうろちょろ…日々さまよっているものです。

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

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

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

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

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

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

で、なんのライブラリ使ったか？urlとか！

CollectionKitと言うものです。
SoySauceLab/CollectionKit

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

最初に言っておかないといけないこと。

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

表示、百聞は一見に如かず

collectionkitsampleMOVE.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.

var collectionView = CollectionView()

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

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

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:

label.backgroundColor = UIColor.darkGray
label.textColor = .white
label.layer.cornerRadius = 10
label.layer.masksToBounds = true
label.textAlignment = .center
label.text = "\(data)🌸"

3.2行すっ飛ばして、先にここの説明、上記で指定したものをセット！

collectionView.provider = provider1

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

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

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

スクリーンショット 2018-03-31 17.07.22.png

ちなみに

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

は縦にと言う感じ

スクリーンショット 2018-04-01 13.35.13.png

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

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

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

provider1.sizeProvider = imageSizeProvider


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.最後の仕上げにもちろんと言う感じで、以下を。

collectionView.frame = CGRect(x:0,y:100, width:scrennSize.width, height:300)
collectionView.backgroundColor = UIColor.lightGray
self.view.addSubview(collectionView)

7.おまけ1
CollectionViewに余白つけたければ以下を指定すればできます。

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

これをすると、上、左、下しかこの図では分かりませんが、こんな感じで余白をとることができます。
スクリーンショット 2018-03-31 16.53.33.png

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

provider1.tapHandler = {(view, index, dataProvider) in
    print("\(view)")
    view.text = "🦁\(dataProvider.data(at: index))"
}

collectionkitsample2Move.gif

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

最後に。

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

12
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
12
3