[iOS] UICollectionViewCompositionalLayout の概要

目次

1. はじめに
2. 前提条件
3. UICollectionViewCompositionalLayout とは
4. Group とは
5. レイアウトをどう定義していくか
6. UICollectionViewDataSource との組み合わせ
7. UICollectionViewDelegate との組み合わせ
8. UICollectionViewDelegateFlowLayout との組み合わせ
9. さいごに

1.はじめに

UICollectionViewCompositionalLayout とは iOS13 から登場した、 CollectionView 用のレイアウトをより柔軟に定義できる比較的新しいレイアウトクラスです。

ぱっと見、とっつきづらかったのですが、いくつかの考え方を把握すれば、けっこうスルッと理解が進むのではと思います。

と言うわけで、本ポストでは細かいことは置いておいて、概要を把握するために押さえておくべき基本の考え方を書いていこうと思います。

2.前提条件

Mac: macOS Big Sur 11.5.1
Xcode: Version 13.2.1(13C100)

3.UICollectionViewCompositionalLayout とは

まず UICollectionView では基本的には Section と Item の組み合わせによってデータソースを定義していきます。
これは UICollectionViewCompositionalLayout を利用していても変わりません。

また、既存の UICollectionViewFlowLayout も基本的には Section と Item によってレイアウトを決めていっていました。

では、UICollectionViewCompositionalLayout では何が違ってくるのか。
レウアウトの際、Group という概念が一つ加わります。

この Group が重要な概念です。

4.Group とは

Group は Section と Item の間に挟まってくるレイヤーになります。
その名の通り、Item をグルーピングする機能を持つ概念です。

Group は別の Group を内包することができ、入れ子にすることが可能です。

以下のようなイメージとなります。

ここで一点意識しておくべきは、Group はあくまでレイアウトを設定するときのみに利用する概念です。

ですので例えば cellForItemAt や didSelectItemAt などはこれまでと変わらず
引数に IndexPath(Section と Item) が渡ってきます。

5.レイアウトをどう定義していくか

これは公式の動画やサンプルを見るのがよいかなと思います！

一番シンプルなレイアウトから順を追って複雑なレイアウトにしていっているので、
とても分かりやすいかと思います。

• WWDCの動画: Advances in Collection View Layout
  • 日本語字幕で倍速再生で見られます
• 公式サンプル: Implementing Modern Collection Views
  • Download ボタンからサンプルコードを入手できます

内容をかいつまんで言うと、以下のような感じかなと思います。

1. Item たちを Group に追加、Group たちを Section、Section たちを Layout (つまり UICollectionViewCompositionalLayout) に追加していく
2. 各要素の高さや幅を指定する際、絶対値はもちろん、一つ上のレイヤーを基準に割合指定などもできる
3. 各要素を縦に並べるか横に並べるかを指定できる
4. 各要素をいくつ並べるかを指定できる
5. 他にも色々宣言的にリッチな見た目を作成できる

6.UICollectionViewDataSource との組み合わせ

ここまでは主に Layout に関して書きましたが、
以降は既存のAPIの組み合わせと、どう組み合わせられるかを書いていきます。

これまでの UICollectionView では UICollectionViewDataSource で
numberOfSections や numberOfItemsInSection や cellForItemAt などで
要素の数や各Cellの見た目などを指定していました。

UICollectionViewCompositionalLayout で定義する場合でも
それらは利用できます 🙌

ここで一つ疑問が。

numberOfItemsInSection で指定した数と
UICollectionViewCompositionalLayout で指定した Item の数が合わない場合、
クラッシュなど発生しないのか。

結論から言うと数が合っていなくてもクラッシュは発生しません。

以下の画像のように、指定したレイアウトに沿って必要な数の要素が表示されていきます。

何となく、たこ焼き器の鋳型に必要な分だけ生地を流し込むのをイメージしてしまいました 🐙

---

さて、ここまでデータソースの指定の仕方として
素の UICollectionViewDataSource で書いてきました。

が、より新しい指定方法として UICollectionViewDiffableDataSource があります。

そちらを使うこともできますが(というかAppleの上記サンプルコードはそちらを使っています)、それはまた別ポストでまとめようと思います。

7.UICollectionViewDelegate との組み合わせ

didSelectItemAt や didHighlightItemAt などのデリゲートメソッドは
これまでと同様に利用可能です。

引数には IndexPath が渡ってきます。

8.UICollectionViewDelegateFlowLayout との組み合わせ

sizeForItemAt などがありますが、こちらのデリゲートメソッドは呼ばれません。

異なるレイアウト方法を指定しているので当然か 🤔

9.さいごに

最近？のiOSアプリ開発は SwiftUI や async/await など、
新しい概念がどんどん出てきていると感じています。

そろそろ本格的に実践投入可能な機会も増えてきたかなと思うので
きちんと理解していこうと思います！