【Swift】コレクションビューにセクションを追加する方法。(Swift 2.1、XCode 7.2)

2020年6月16日

セクションとは

前回の記事でUICollectionView(以下、コレクションビュー)にデータを表示する方法を説明した。今回はコレクションビューにセクションを追加する方法について説明する。

Collection Reusable View

 

セクションとは、一定のルールに従ってデータを区分したものをいう。例えば、下図のように名前をあ行、か行のセクションに分けるといった使い方だ。

セクションの例

 

コレクションビューにセクションを追加する

それではコレクションビューにセクションを追加してみよう。なお、作業は前回記事の続きから行うので、実装を試す場合は前回記事を試してから読むことをお勧めする。⇒「前回記事

まず、デバイス画面のコレクションビューの中にCollection Reusable View(以下、再利用可能ビュー)をドラッグ&ドロップで入れる(下図赤枠)。これはセクションを表示するための部品である。

続いて、黄緑枠のアトリビュートインスペクタボタンを押して設定画面を開き、Identifierに「TestSection」を入力する。これはソースコードからセクションにアクセスするための識別子である。

セクションのヘッダーを追加する

 

セクションの中にセクション名を表示したいので、自作クラスを作ろう。

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

 

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

 

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

 

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

 

Main.storyboardを開き、コレクションビューの中のセル(下図赤枠)を選択する。続いて、アイデンティティインスペクタボタン(下図水色枠)をクリックして設定画面を表示する。設定項目のClassに「TestCollectionReusableView」を入力する。これで、セクションの部品にカスタムクラスを使うように設定された。
カスタムクラスを設定する。

 

下図紫枠のアシスタントエディタボタンを押してTestCollectionReusableView.swiftを開く。

デバイス画面のコレクションビューの中にラベルをドラッグ&ドロップで入れる(下図赤矢印)。続いて、Ctrlキーを押しながらラベルをドラッグ&ドロップでソースコードまで運ぶ(下図青矢印)。

吹き出しの設定画面が表示されるので、Connectionに「Outlet」、Nameに「testLabel」を入力し、Connectボタンを押す。これでソースコードからラベルを操作できるようになった。
コレクションビューにラベルを設定する

 

上記の手順でヘッダー用のセクションの準備ができた。せっかくなのでフッターのセクションも追加しよう。

デバイス画面のコレクションビューの中に再利用可能ビューをドラッグ&ドロップで入れる(下図赤枠)。黄緑枠のアトリビュートインスペクタボタンを押して設定画面を開き、Identifierに「TestSectionFooter」を入力する。フッターには文字を表示したくないのでそのままとする。

コレクションビューにフッターのセクションを追加

コードを実装する

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

セクションを表示するには、「セクションの個数を返すメソッド」「セクションを返すメソッド」の2つを追加する。これでシステム側がセクションを表示する必要があると認識し、コレクションビューにセクションが表示される。

セクションを返すメソッドはヘッダーまたはフッターの描画が行われるたびに呼び出されるので、引数のkindからヘッダー、フッターどちらのセクションを返す必要があるのかを判別する。

 

TestCollectionViewCell.swiftの修正は無し。

 

TestCollectionReusableView.swiftの修正も無し。

 

以下は実際のプレイ動画