[ING]画像ファイルをドラッグ＆ドロップを利用したフォームなどのサンプル（iOS Sample Study: Swift）
表示画像のタップ時やUICollectionViewの選択時等の「処理のトリガーとなる部分でGestureRecognizerを活用」や「一覧表示→詳細遷移のタイミングでのカスタムトランジション」を織り交ぜて、入力画面や表示タイミングのポイントになる部分のUIに一工夫を加えてみた形にしてみました。
また、レシピを選んで選択状態にする部分に関しては、UILongTapGestureRecognizerをUICollectionViewに付与をした上で、UILongTapGestureRecognizer発動時に実行されるメソッド内でドラッグ＆ドロップで対象のレシピサムネイル画像をヒットエリアに持って行き選択をするような動きをする実装をしています。
本サンプル内で実装している機能の一覧は下記になります。
- 現在月の表示を元に祝祭日と曜日付きの日付のボタン表示機能
- UILongTapGestureRecognizerを使用したUICollectionViewCell内の画像をドラッグ＆ドロップで動かしてヒットエリア判定を利用した選択処理機能
- SwiftyJSON & Alamofireを利用したAPI通信機能（楽天レシピカテゴリ別ランキングAPI使用）
- APIから取得した画像表示時キャッシュ機能
- Realmを使用した選択したレシピデータのアーカイブ保存機能
- カスタムトランジションを利用したレシピ画像の拡大・縮小を伴う画面遷移機能
- ContainerViewを重ねてスライド式メニューを表示する機能
- UIScrollViewに配置したボタンから対象の日付を日にちのボタンをタップして選択する
- 「Add」ボタンを押すとUICollectionViewにAPIから取得したデータ4件が表示されます。また続けてタップボタンを押すとさらに別カテゴリのデータが4件表示されます（重複もありえる）
- UICollectionViewの任意のセルを長押しすると選択した画像が指で動かせるようになるので、ヒットエリア（実体はUIButton）までドラッグして指を離すとそのレシピが選択状態になり、ヒットエリア以外で指を離すと選択状態にならずに画像表示が元に戻る
- 日にちとレシピデータが選択されている状態でヒットエリアを押下すると、ポップアップが表示されレシピのアーカイブデータ登録フォームが表示される
- 選択したデータを全て解除及びレシピ画像を一旦クリアする場合には「Reset」ボタンを押下すると選択データと表示レシピデータを削除する
本サンプルでの実装機能の中でポイントとなる部分の設計概要に関しては下記の図解を参考にしていただければ幸いです。
UIまわりの実装と直接関係のない部分に関しては、下記のライブラリを使用しました。
- RealmSwift（アプリ内のデータベース）
- SwiftyJSON（JSONデータの解析をしやすくする）
- Alamofire（HTTPないしはHTTPSのネットワーク通信用）
- KingFisher（画像URLからの非同期での画像表示とキャッシュサポート）
- CalculateCalendarLogic（日本の祝祭日の判定）
下記の記事及びサンプルを参考にしてSwift3.0.2で書き直し及びアレンジを加えて本サンプルを作成しました。この場をお借り致しましてお礼申し上げます。ありがとうございました。
- UICollectionViewDragAndDropSelectedItems
- iOS Animation Tutorial: Custom View Controller Presentation Transitions
このサンプル全体の詳細解説とポイントをまとめたものは下記に掲載しております。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent