はじめに

iOSアプリ開発においてUICollectionViewは頻繁に使用するコンポーネントです。
これまで何度かUICollectionViewを使った画面の開発をしましたが、なんとなく制約をつけたりするだけでイメージに合った画面が作れてしまうので、UICollectionViwe自体を深く理解せずに使用していました。

AppleはCollectionViewプログラミングガイドというドキュメントを用意してくれていますが、これがなかなかボリュームが多く、実際開発にもそれほど困っていなかったので読むのを避けていたのですが、Material ComponentsなどのUI系ライブラリを使うにあたってUICollectionViewへの深い理解が必要になったので、プログラミングガイドを参考に色々と実装を試しながら理解を進めていきました。

ここでは私と同じようにUICollectionViewをなんとなくの理解で使っている人のために、私なりに勉強してまとめた内容をご紹介したいと思います。

環境

  • XCode9.3
  • Swift4.1

リポジトリ

実装コードはGithub上で公開しています。
https://github.com/takehilo/CollectionView

UICollectionViewを必要最低限のコードで実装してみる

UICollectionViewを理解する第一歩として、UICollectionViewを使った画面を必要最低限のコードのみで実装してみました。
デフォルトではこんなレイアウトになるのか、というのだけ知ってもらえればいいと思います。

UICollectionViewを必要最低限のコードで実装してみる

UICollectionViewFlowLayoutでセルの大きさやセル同士の間隔などを設定する

UICollectionViewFlowLayoutはビルトインで用意されているUICollectionViewのレイアウトオブジェクトです。
UICollectionViewFlowLayoutのプロパティを変更し、セルの大きやセル同士の間隔などを変更できることを確認してみました。

UICollectionViewFlowLayoutでセルの大きさやセル同士の間隔などを設定する

また、UICollectionViewDelegateFlowLayoutを実装することで、セル一つ一つ個別に大きさなどを変更できることも確認しました。

UICollectionViewDelegateFlowLayoutでセルの大きさやセル同士の間隔などを個別に設定する

補助ビューを配置する

UICollectionViewのレイアウトでは、セクションに関する情報を表示する補助ビューというものがあります。
フローレイアウト(UICollectionViewFlowLayout)でいえば、ヘッダーとフッターがそれに当たります。

image.png

補助ビューについて理解するために、フローレイアウトでヘッダーとフッターを設定してみました。

UICollectionViewFlowLayoutでヘッダーとフッターを設定する

セルの強調・選択時にセルの見た目を変化させる

UICollectionViewには、セルの強調・選択状態を管理する仕組みが備わっています。
セルが強調あるいは選択された時にセルの見た目を変化させることができるかを確認してみました。

UICollectionViewのセルの強調・選択時にセルの見た目を変化させる

カスタムセルの作り方とセルの再利用について

ここまでは標準のUICollectionViewCellに背景色をつけただけのセルを利用してきました。
UICollectionViewでは、UICollectionViewCellのサブクラスを作成することで独自のセル(カスタムセル)を作ることができます。

以下の記事では、カスタムセルを作るにはどうしたら良いかをまとめました。
また、UICollectionViewの効率的な処理を支えるセルの再利用についても触れています。

UICollectionViewのカスタムセルの作り方とセルの再利用について

カスタムレイアウトの作り方

UICollectionViewでは、UICollectionViewLayoutのサブクラスを作成することで独自のレイアウトを定義することができます。
レイアウトの仕組みが理解できると、UICollectionViewに対する理解が更に深まります。

以下の記事で、カスタムレイアウトの作り方についてまとめました。
UICollectionViewのカスタムレイアウトの作り方

ToDo

  • 編集メニュー
  • 追加・削除・移動
  • 異なるレイアウトへの遷移
  • UICollectionViewFlowLayoutのサブクラス化
  • ジェスチャ
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.