[ING] - TinderのようなUIを様々な実装で実現してみるサンプル
今回はTinder風のUIを自前で用意する際の実装ポイントや気をつけるべき点等を知りたいと感じたので、同様な形ではあるが内部実装は全く異なるTinder風UIサンプルを2種類を用意しました。
動かすカードのView側にProtocolをあらかじめ定義しておき、UIViewControllerを連携してGestureRecognizer発動時のタイミングで行われる処理（左右への動きやスワイプ後などの処理）を実行するような形の実装になっています。
画面デザインのラフスケッチ:
クラスの関係図＆解説メモ:
UICollectionViewLayoutクラスを継承したクラスを利用してカード表示画面の設定を行い、GestureRecognizer発動時のタイミングで行われる処理と組み合わせる形の実装になっています。
UILongPressGestureRecognizer経由で対象のセルを選び出した後は、stateプロパティの状態を元にそれぞれの処理を記載していく形になります。 このサンプルで実際に動いているのは、選び出したUICollectionViewCellではなく、 「UICollectionViewCellのスナップショットを表示したUIImageView」 になります。
画面デザインのラフスケッチ:
クラスの関係図＆解説メモ:
このサンプル全体の詳細解説とポイントをまとめたものは下記に掲載しております。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent