Loading
BLOG 開発者ブログ

2021年12月19日

Delegateを使ったお気に入りボタン付きの横スクロールCollectionViewの実装

この記事は アイソルート Advent Calendar 2021 19日目の記事です。

 

こんにちは。モバイルソリューショングループのfujinami.mです。
CollectionViewのセルをタップする処理で、タップした領域によって処理を分岐したいことはよくあることだと思います。
今回はApp Storeで表示されているような横スクロールのCollectionViewの実装とタップ領域での処理分岐になります。

 

目次

 

1.横スクロールのCollectionViewを配置・表示する

今回は画像タップでタップした画像が画面のImageViewに設定され、GoodボタンでUserDefaultsにお気に入り情報を保持するアプリを実装したいと思います。
画面は以下で、赤い部分がCollectionViewになります。(見やすいように色付けしてますが、実行時は色設定を消します。)
タップされた画像の拡大バージョンを画面上部に表示するイメージです。
CollectionViewに設定は特に不要です。高さの領域が0になっているとセルが表示できなくなるので、そこだけ注意してください。

【画面イメージ】

2.カスタムセルを実装する

次にCollectionViewに表示するカスタムセルを実装します。
必要な要素は「表示する画像」「お気に入りボタン」の2つです。
今回は「お気に入りボタンを押された時」と「画像を押された時」で処理を分けたいと思います。

・「New File」から「Cocoa Touch Class」を選択

 

・「Subclass of」で「UICollectionViewCell」を選択し、「Also create XIB file」をチェックをつけて「Next」

 

・XIBファイルに画像表示用のImageViewとお気に入りボタンを配置

【コード】

 

3.実装したカスタムセルを横スクロールCollectionViewに表示する

CollectionViewにカスタムセルを表示していきます。
UserDefaultsに保存する処理はまだない状態です。
画像のスクロールと、画像をタップした時に上部に拡大イメージが表示されるまで実装できていればOKです。

【コード】

 

4.お気に入りボタンのイベント発火を親Viewで受け取る

やることは3つです。

  • protocolでDelegateを定義する
  • カスタムセルで定義したDelegateを使用する
  • 親Viewに定義したDelegateをextensionで拡張する

上記をうまく実行すれば親CollectionViewのセル内のイベント発火を親Viewで受け取る事ができます。

 

・protocolでDelegateを定義する

こちらは定義するだけなので簡単です。
今回は取得したイベントが一つなので、定義も一つで大丈夫です。
処理を増やしたい場合は定義を増やしてください。

・カスタムセルで定義したDelegateを使用する

カスタムセルでSampleCollectionViewCellDelegateを定義して、
お気に入りボタン押下の処理でtapGoodButtonを実行しましょう。
本来protocolの定義も別のファイルを作成するべきだと思いますが、今回は簡易実装ということで一緒のファイル内に定義します。
以下、カスタムセルの全文です。

 

・親Viewに定義したDelegateをextensionで拡張する

親Viewで作成したDelegateを拡張定義します。
やり方はCollectionViewと同じです。
以下、親Viewの全文です。

【実行結果】

以下のように「お気に入りボタン」と「セル」のタップ時処理が分岐できていればOKです。

5.最後に

Delegateの定義からCollectionViewCellタップ時の処理分岐まで実装致しました。
TableViewでも同じ要領で応用が聞くので使えるようになるととても便利でした。
今回はUserDefaultsの更新しかしていないため、無理やりな実装になってしまいましたが、
セルタップ時に画面遷移をしてボタン押下で別の処理をする実装もあると思うので、
少しでも実装が楽になればと思います。


fujinamimのブログ