tinderUIをライブラリKolodaを使って実装してみよう！

#目的
みんな大好きTinder UIをライブラリ[Koloda](https://github.com/Yalantis/Koloda)を使って実装します。
KolodaはTableViewと似ていてとっても使いやすいライブラリです。
サンプルはこちら→https://github.com/freadteam/TinderUISample

---

#今日やること
1. 画像を表示するTinder UI（スワイプでLike, Nopeを選択）を実装する。
2. 背景色をランダムに変える。

---

#完成イメージ
左右にスワイプできるボタンも実装します。

![名称未設定.001.png](https://qiita-image-store.s3.amazonaws.com/0/200520/555a53a8-769b-ace1-9931-c9cbfac06aaa.png)


---

#実装
- Kolodaの導入
##① [Koloda](https://github.com/Yalantis/Koloda)をXcodeにインストール
```swift
pod "Koloda"
```

- 表示をする画像を入れる
１０枚ぐらい適当に入れといてください。

---

##② StoryBoardの編集
1. 必要なパーツ
 - Tinder UIの土台となるUIView
 - Like, Nope用のUIButton

2. パーツを配置
図のようにパーツを配置。その際に、UIViewのclassを**KolodaView**にする。
わかりやすいように図では各パーツに着色してある。

![スクリーンショット 2018-09-30 22.43.22.png](https://qiita-image-store.s3.amazonaws.com/0/200520/1ee97a78-292f-39c9-4c10-f2d589ce58e9.png)

---

##③ コードの実装
```swift
import UIKit
import Koloda

class ViewController: UIViewController, KolodaViewDataSource, KolodaViewDelegate {
    
    @IBOutlet weak var kolodaView: KolodaView!
    var imageNameArray = ["1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg", "10.jpg", ]
    
    override func viewDidLoad() {
        super.viewDidLoad()
        kolodaView.dataSource = self
        kolodaView.delegate = self
        // 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 kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
        return imageNameArray.count
    }
    
    //ドラッグのスピード
    func kolodaSpeedThatCardShouldDrag(_ koloda: KolodaView) -> DragSpeed {
        return .fast
    }
    
    //表示内容
    func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
        //        let view = UIView(frame: koloda.bounds)
        //        view.backgroundColor = randomColor()
        //        return view
        let imageView = UIImageView(frame: koloda.bounds)
        imageView.contentMode = .scaleAspectFit
        imageView.image = UIImage(named: imageNameArray[index])
        koloda.addSubview(imageView)
        imageView.backgroundColor = randomColor()
        return imageView
    }
    
    //カードの色を指定、今回はランダム
    func randomColor() -> UIColor {
        return UIColor(red: randomFloat(), green: randomFloat(), blue: randomFloat(), alpha: 1)
    }
    
    //ランダムに色を生成
    func randomFloat() -> CGFloat {
        return CGFloat(arc4random()) / CGFloat(UInt32.max)
    }
    
    
    //delegate------------------
    
    // カードを全て消費したときの処理を定義する
    func kolodaDidRunOutOfCards(_ koloda: KolodaView) {
        print("Finish cards.")
        //シャッフル
        imageNameArray = imageNameArray.shuffled()
        //リスタート
        koloda.resetCurrentCardIndex()
    }
    
    //カードをタップした時に呼ばれる
    func koloda(_ koloda: KolodaView, didSelectCardAt index: Int) {
        //urlに飛べる
        //UIApplication.shared.openURL(URL(string: "https://yalantis.com/")!)
    }
    
    //dragやめたら呼ばれる
    func kolodaDidResetCard(_ koloda: KolodaView) {
        print("reset")
    }
    
    //darag中に呼ばれる
    func koloda(_ koloda: KolodaView, shouldDragCardAt index: Int) -> Bool {
        print(index, "drag")
        return true
    }
    
    //dtagの方向など
    func koloda(_ koloda: KolodaView, didSwipeCardAt index: Int, in direction: SwipeResultDirection) {
        print(index, direction)
    }
    
    //nopeへ
    @IBAction func cardGoToNope() {
        kolodaView.swipe(.left)
    }
    
    //likeへ
    @IBAction func cardGoToLike() {
        kolodaView.swipe(.right)
    }
    
}

```

---

##④ コードの解説
TableViewと同じでDatasourceとDelegateがある。

 - Datasource
 
 ```Swift
     //枚数
    func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
        return imageNameArray.count
    }
    
    //ドラッグのスピード
    func kolodaSpeedThatCardShouldDrag(_ koloda: KolodaView) -> DragSpeed {
        return .fast
    }
    
    //表示内容
    func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
        //        let view = UIView(frame: koloda.bounds)
        //        view.backgroundColor = randomColor()
        //        return view
        let imageView = UIImageView(frame: koloda.bounds)
        imageView.contentMode = .scaleAspectFit
        imageView.image = UIImage(named: imageNameArray[index])
        koloda.addSubview(imageView)
        imageView.backgroundColor = randomColor()
        return imageView
    }
```
---

 - Delegate

```Swift
    // カードを全て消費したときの処理を定義する
    func kolodaDidRunOutOfCards(_ koloda: KolodaView) {
        print("Finish cards.")
        //シャッフル
        imageNameArray = imageNameArray.shuffled()
        //リスタート
        koloda.resetCurrentCardIndex()
    }
    
    //カードをタップした時に呼ばれる
    func koloda(_ koloda: KolodaView, didSelectCardAt index: Int) {
        //urlに飛べる
        //UIApplication.shared.openURL(URL(string: "https://yalantis.com/")!)
    }
    
    //dragやめたら呼ばれる
    func kolodaDidResetCard(_ koloda: KolodaView) {
        print("reset")
    }
    
    //darag中に呼ばれる
    func koloda(_ koloda: KolodaView, shouldDragCardAt index: Int) -> Bool {
        print(index, "drag")
        return true
    }
    
    //dtagの方向など
    func koloda(_ koloda: KolodaView, didSwipeCardAt index: Int, in direction: SwipeResultDirection) {
        print(index, direction)
    }
```

---

 - その他
 
swipe方向は下記のように指定できる。

 ```Swift
public enum SwipeResultDirection: String {
    case left
    case right
    case up
    case down
    case topLeft
    case topRight
    case bottomLeft
    case bottomRight
}
```

DragSpeed speedは下記のように指定できる。

```Swift
public enum DragSpeed: TimeInterval {
    case slow = 2.0
    case moderate = 1.5
    case `default` = 0.8
    case fast = 0.4
}
```

コードでSwipeのしても可能

```Swift
//左にSwipe
kolodaView.swipe(.left)
```

---
#課題
Nope, Likeした画像をそれぞれ表示するTableViewを実装してみよう
答え→https://github.com/freadteam/TinderUISample/tree/develop