はじめに
皆さんは世界的ソーシャル系マッチングアプリTinderをご存知でしょうか？
今では、若者を中心に多くのユーザ数を誇るマッチングアプリとなっています。
このアプリが人気を獲得した理由の一つにスワイプでLike,Nopeを選択できる機能があることが挙げられます。
これは直感的に好き嫌いの判別がしやすいことと、このカードをめくったら次はどんな美男美女に出会える(出てくる)のだろうというワクワクがユーザーにヒットしたのだと考えます。(自論)
そんなスワイプ機能は世間ではTinderスワイプと言われてるとか言われてないとか・・・
というわけで今回は大人気Tinderスワイプを簡単に実装できるライブラリがありましたので、そちらの紹介をしながらTinderへの愛を深めていただきたいと思います。
また、今回参考にさせていただいた記事も最後に載せていますのでそちらもご覧ください。
完成イメージ図
Like,Nopeをスワイプして選択できるようにします。
また、下のボタンからもタップで選択できるようにします。
神ライブラリ「Koloda」について
今回Tinderスワイプを実装するにあたって用いるライブラリがKolodaになります。
最終ログが3年前になっていますが現在の環境(Swift5)でも問題なく使えます。
また、REARMEにも詳しい説明が書かれています。
実装
①Kolodaのインストール
以下のコードをPodfile内に記入してターミナル上でpod installでインストールをしてください。
pod "Koloda"
②スワイプカードに表示させる画像をXcodeにいれる
適当に複数枚の画像をXcodeに入れておきましょう。
③Storyboardの作成
Storyboardでパーツを配置していきます。
行うことは以下の3点です。
③-1.カードを表示させる土台のUIViewを置く
③-2.置いたUIViewのクラスをKolodaViewに変更
③-3.Like,Nopeボタンの設置
実際の図を下に載せておきます。
④コードを書く
④-1.KolodaをControllerにインポート
適用させたいViewControllerにKolodaをインポートさせます。
import Koloda
④-2.パーツの宣言と画像を配列に格納
UIViewの宣言をします。
その際に、クラスを変更したのでkolodaView型になることを忘れずに。
また、先程入れた画像を配列の中に格納しておきましょう。
@IBOutlet weak var kolodaView: KolodaView!
var imageArray = ["〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg", "〇〇.jpg"]
④-3.DataSourceとDelegateを適用
TableViewみたいにKolodaViewではDataSourceとDelegateを適用させてあげる必要があります。
class ViewController: UIViewController ,KolodaViewDataSource, KolodaViewDelegate {...
④-4.各々のメソッドを用いて詳細設定
DataSourceとDelegateから適当なプロトコルを使ってどのようにスワイプさせるかなどの詳細を設定していきます。
また、カード数を設定するプロトコルと内容を設定するプロトコルは記述しないとエラーになるため必ず記述する必要があります。(TableViewと同じですね)
以下では主要なプロトコルをいくつかご紹介します。
~DataSource~
1. kolodaNumberOfCards
表示するカードの枚数を決めます。
func koloda(_ kolodaNumberOfCards koloda: KolodaView) -> Int
2. viewForCardAt
表示するカードの内容を決めます。
func koloda(_ koloda:KolodaView viewForCardAt index:Int)-> UIView
3. DragSpeed
スワイプ時のドラッグのスピードを設定できます。
速度は、slow,moderate,fastがあります。
func kolodaSpeedThatCardShouldDrag(_ koloda:KolodaView)-> DragSpeed
~Delegate~
1. allowedDirections
スワイプ時の許可するドラッグ方向を指定できます 。
デフォルトはleft,rightになりますが、斜めなどの方向も設定できます。
func koloda(_ koloda:KolodaView allowedDirectionsForIndex index:Int)-> [SwipeResultDirection]
2. DidRunOutOfCards
KolodaViewに表示するカードがなくなった場合に呼び出されます。
func kolodaDidRunOutOfCards(_ koloda:KolodaView)
3. didSelectCardAt
KolodaViewのカードをタップしたときに呼び出されます。
func koloda(_ koloda:KolodaView didSelectCardAt index:Int)
4. didSwipeCardAt
KolodaViewのカードをスワイプしたときに呼び出されます。
方向関係なく呼び出されます。
func koloda(_ koloda:KolodaView didSwipeCardAt index:Int in direction:SwipeResultDirection)
5. shouldDragCardAt
KolodaViewのカードをスワイプしてる最中に呼び出されます。
func koloda(_ koloda: KolodaView, shouldDragCardAt index: Int) -> Bool
他にもプロトコルは存在しますが、詳しくはKolodaをご覧ください。
完成コード
完成イメージのコードは以下のようになります。
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を使って実装してみよう！
この記事を読んでぜひ皆さんTinderライフ楽しんでくださいね！
では良いお年を。