TinderUISamples

[ING] - TinderのようなUIを様々な実装で実現してみるサンプル

今回はTinder風のUIを自前で用意する際の実装ポイントや気をつけるべき点等を知りたいと感じたので、同様な形ではあるが内部実装は全く異なるTinder風UIサンプルを2種類を用意しました。

本サンプルの画面キャプチャ

実装例1. UIView + UIPanGestureRecognizerを利用したUI実装

動かすカードのView側にProtocolをあらかじめ定義しておき、UIViewControllerを連携してGestureRecognizer発動時のタイミングで行われる処理（左右への動きやスワイプ後などの処理）を実行するような形の実装になっています。

画面デザインのラフスケッチ:

クラスの関係図＆解説メモ:

実装例2. UICollectionView + UILongPressGestureRecognizerを利用したUI実装

UICollectionViewLayoutクラスを継承したクラスを利用してカード表示画面の設定を行い、GestureRecognizer発動時のタイミングで行われる処理と組み合わせる形の実装になっています。

UILongPressGestureRecognizer経由で対象のセルを選び出した後は、stateプロパティの状態を元にそれぞれの処理を記載していく形になります。 このサンプルで実際に動いているのは、選び出したUICollectionViewCellではなく、 「UICollectionViewCellのスナップショットを表示したUIImageView」 になります。

画面デザインのラフスケッチ:

クラスの関係図＆解説メモ:

その他

このサンプル全体の詳細解説とポイントをまとめたものは下記に掲載しております。

• (Qiita) https://qiita.com/fumiyasac@github/items/c68b7ce812bf3ef48a67