【Swift】UICollectionViewLayoutの使い方。コレクションビューのセルの配置をカスタマイズする。(Swift 2.1、XCode 7.2)

2020年6月16日

UICollectionViewLayout

前回までの記事で、UICollectionView(以下、コレクションビュー)を使ってデータを格子状に並べる方法について説明した。⇒「記事

Collection View

 

前回の記事では、単純にセルを碁盤の目のように並べて表示したが、もっと個性のある並べ方にしたいときがある。そんなときに利用されるのがUICollectionViewLayout(以下、コレクションビューレイアウト)である。

コレクションビューレイアウトとは、コレクションビューに表示するセルのレイアウトを自由にカスタマイズするために利用されるクラスである。

コレクションビューレイアウトを継承したクラスを作成し、メソッドをオーバーライドして自作レイアウトを実装する。

 

自作レイアウトのクラスを作る。

では、実際に自作レイアウトを実装してみよう。

なお、以降の説明は「Collection Viewの使い方」で行った手順の続きからとなる。自作レイアウトにはセクションも含めることができるが、コードを把握しやすいようにするため今回はセクションの実装は行わない。

作り始める前にどのようなレイアウトにするかを考える。今回は下図のようにコレクションビューの幅の半分が1つのセルの幅になるようにし、セルがY軸方向に向かってジグザグに配置されるレイアウトを作ってみよう。

作成イメージ

 

メニューから「File」⇒「New」⇒「File…」を選択する。
新規ファイルを作成する。

 

テンプレートを選択する画面が表示されるので、「iOSのSource」⇒「Cocoa Touch Class」を選択する。
Cocoa Touch Classを選択する

 

クラス名を入力する画面が表示されるので、Classに「TestCollectionViewLayout」、Subclass ofに「UICollectionViewLayout」を入力し、Nextボタンを押す。
クラス名を入力

 

保存先を指定する画面が表示されるので、プロジェクトと同じ場所であることを確認し、Createボタンを押す。
クラスを作成する

 

次に、Main.storyboardを開き、コレクションビュー(下図赤枠)、アイデンティティインスペクタボタン(下図紫枠)の順にクリックして設定画面を表示する。設定項目のLayoutに「Custom」、Classに「TestCollectionViewLayout」を入力する。

これでコレクションビューに自作レイアウトが使われるようになった。
LayoutにCustomを設定する

自作レイアウトのコードを実装する

ViewController.swiftを開き、以下のコードに変更する。

オーバーライドが必要なメソッドは「レイアウトを準備するメソッド」、「レイアウトを返すメソッド」、「全体サイズを返すメソッド」の3つである。

レイアウトを準備するメソッド」は、コレクションビューが描画される前に1回だけ呼ばれるメソッドである。コレクションビューに含まれるセルのX座標、Y座標、幅、高さを保持するUICollectionViewLayoutAttributeクラスのインスタンスを作り、インデックス番号順に並べて配列(以下、レイアウト配列)に格納しておく。

レイアウトを返すメソッド」は、コレクションビューに表示するレイアウトの配列を返すメソッド。引数rectにコレクションビューのサイズが渡ってくるが、今回は考慮不要なので、「レイアウトを準備するメソッド」で作ったレイアウト配列をそのまま返すようにした。

全体サイズを返すメソッド」は、レイアウトに従ってセルを配置したあとのレイアウトの全体サイズを返すメソッド。この値が小さいとコレクションビューをスクロールしてすべてセルを見れなくなる。

 

ViewController.swiftは修正無し。

 

以下は実際のプレイ動画