【Swift・Koloda】Tinderスワイプ実装できないのに毎日スワイプしてる奴いる？

#はじめに
**皆さんは世界的ソーシャル系マッチングアプリTinderをご存知でしょうか？**
![tinder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1061605/405c63b4-205d-d85f-a334-94964f04c367.png)

今では、若者を中心に多くのユーザ数を誇るマッチングアプリとなっています。
このアプリが人気を獲得した理由の一つに**スワイプでLike,Nopeを選択できる**機能があることが挙げられます。
これは**直感的に好き嫌いの判別がしやすい**ことと、この**カードをめくったら次はどんな美男美女に出会える(出てくる)のだろうというワクワク**がユーザーにヒットしたのだと考えます。(自論)

そんなスワイプ機能は世間では**Tinderスワイプ**と言われてるとか言われてないとか・・・


というわけで今回は大人気**Tinderスワイプ**を簡単に実装できるライブラリがありましたので、そちらの紹介をしながら**Tinderへの愛を深めて**いただきたいと思います。

また、今回参考にさせていただいた記事も最後に載せていますのでそちらもご覧ください。


#完成イメージ図
Like,Nopeをスワイプして選択できるようにします。
また、下のボタンからもタップで選択できるようにします。


![Dec-30-2021 19-33-31.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1061605/7c2002aa-eb25-5368-1241-05d534d86490.gif)



#神ライブラリ「Koloda」について
今回Tinderスワイプを実装するにあたって用いるライブラリが[Koloda](https://github.com/Yalantis/Koloda)になります。
最終ログが3年前になっていますが現在の環境(Swift5)でも問題なく使えます。
また、REARMEにも詳しい説明が書かれています。


#実装

##①Kolodaのインストール
以下のコードを`Podfile`内に記入してターミナル上で`pod install`でインストールをしてください。

```swift
pod "Koloda"
```

##②スワイプカードに表示させる画像をXcodeにいれる
適当に複数枚の画像をXcodeに入れておきましょう。

##③Storyboardの作成
Storyboardでパーツを配置していきます。
行うことは以下の3点です。

####③-1.カードを表示させる土台のUIViewを置く
####③-2.置いたUIViewのクラスをKolodaViewに変更
####③-3.Like,Nopeボタンの設置

実際の図を下に載せておきます。

![スクリーンショット 2021-12-30 17.35.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1061605/57ca375d-b32f-fe51-677f-9e740a2a90fa.png)


##④コードを書く
####④-1.KolodaをControllerにインポート
適用させたい`ViewController`に`Koloda`をインポートさせます。

```swift
import Koloda
```


####④-2.パーツの宣言と画像を配列に格納
`UIView`の宣言をします。
その際に、クラスを変更したので`kolodaView`型になることを忘れずに。

また、先程入れた画像を配列の中に格納しておきましょう。

```swift
@IBOutlet weak var kolodaView: KolodaView!
var imageArray = ["〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg"]
```

####④-3.DataSourceとDelegateを適用
`TableView`みたいに`KolodaView`では`DataSource`と`Delegate`を適用させてあげる必要があります。

```swift
class ViewController: UIViewController ,KolodaViewDataSource, KolodaViewDelegate {...
```



####④-4.各々のメソッドを用いて詳細設定
`DataSource`と`Delegate`から適当なプロトコルを使ってどのようにスワイプさせるかなどの詳細を設定していきます。
また、カード数を設定するプロトコルと内容を設定するプロトコルは記述しないとエラーになるため**必ず記述する必要があります。**(TableViewと同じですね)

以下では主要なプロトコルをいくつかご紹介します。

#####~DataSource~

**1. kolodaNumberOfCards**
表示するカードの枚数を決めます。

```swift
func koloda(_ kolodaNumberOfCards koloda: KolodaView) -> Int
```

**2. viewForCardAt**
表示するカードの内容を決めます。

```swift
func  koloda(_  koloda:KolodaView viewForCardAt  index:Int)-> UIView
```

**3. DragSpeed**
スワイプ時のドラッグのスピードを設定できます。
速度は、`slow`,`moderate`,`fast`があります。

```swift
func  kolodaSpeedThatCardShouldDrag(_  koloda:KolodaView)-> DragSpeed
```

#####~Delegate~
**1. allowedDirections**
スワイプ時の許可するドラッグ方向を指定できます　。
デフォルトは`left`,`right`になりますが、斜めなどの方向も設定できます。

```swift
func koloda(_ koloda:KolodaView allowedDirectionsForIndex  index:Int)-> [SwipeResultDirection]
```

**2. DidRunOutOfCards**
`KolodaView`に表示するカードがなくなった場合に呼び出されます。

```swift
func  kolodaDidRunOutOfCards(_  koloda:KolodaView)
```

**3. didSelectCardAt**
`KolodaView`のカードをタップしたときに呼び出されます。

```swift
func  koloda(_  koloda:KolodaView didSelectCardAt  index:Int)
```
**4. didSwipeCardAt**
`KolodaView`のカードをスワイプしたときに呼び出されます。
方向関係なく呼び出されます。

```swift
func  koloda(_  koloda:KolodaView didSwipeCardAt  index:Int in  direction:SwipeResultDirection)
```

**5. shouldDragCardAt**
`KolodaView`のカードをスワイプしてる最中に呼び出されます。

```swift
func koloda(_ koloda: KolodaView, shouldDragCardAt index: Int) -> Bool
```

他にもプロトコルは存在しますが、詳しくは[Koloda](https://github.com/Yalantis/Koloda)をご覧ください。

#完成コード
完成イメージのコードは以下のようになります。

```swift
import UIKit
import Koloda

class ViewController: UIViewController ,KolodaViewDataSource, KolodaViewDelegate {
    
    
    @IBOutlet weak var kolodaView: KolodaView!
    var imageArray = ["〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg"]
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        kolodaView.dataSource = self
        kolodaView.delegate = self
    }
    
    
    func kolodaNumberOfCards(_ koloda: KolodaView) -> Int {
        imageArray.count
    }
    
    func kolodaSpeedThatCardShouldDrag(_ koloda: KolodaView) -> DragSpeed {
           return .moderate
       }
    
    func koloda(_ koloda: KolodaView, viewForCardAt index: Int) -> UIView {
        let imageView = UIImageView(frame: koloda.bounds)
        imageView.contentMode = .scaleAspectFit
        imageView.image = UIImage(named: imageArray[index])
        koloda.addSubview(imageView)
        return imageView
    }
    
    @IBAction func Nope() {
        kolodaView.swipe(.left)
    }

    @IBAction func Like() {
        kolodaView.swipe(.right)
    }
}
```

#おわりに
今回は、**Tinderスワイプ**について書きました。
本記事を書くにあたって以下の記事を参考にさせていただきました。ありがとうございます。

[tinderUIをライブラリKolodaを使って実装してみよう！](https://qiita.com/panzee54/items/7501c9f51fdffcf98393)

この記事を読んでぜひ皆さんTinderライフ楽しんでくださいね！
では良いお年を。