iOS6 UICollectionViewを使ってみる

新しいUIコンポーネント

iOS6では様々な機能が追加されましたが、今回新たにUICollectionViewというUIコンポーネントが追加されました。これは配列などに格納された複数のデータをUI上で要素として一覧したい場合に利用するもので、その点ではUITableViewと似たようなものとなっています。実際、このコンポーネントを利用する際に使用するメソッドはUITableViewと非常によく似ているので、とてもとっつきやすくなっています。

UICollectionViewとUITableViewの最大の違いは、レイアウト処理が専用のコンポーネントに委譲されている点です。そのため、UICollectionViewでは各要素（セル）のレイアウトを自由にカスタマイズできます。私が最初UICollectionViewを見たときは、要素がタイル状に並べられているUIを見て、そういうレイアウトを実現するためのUIコンポーネントだと思っていました。しかし、それは標準で用意されているUICollectionViewFlowLayoutというレイアウトコンポーネントを利用した場合のレイアウトであって、実際にはUICollectionViewにカスタムレイアウトコンポーネントをセットすることによって任意のレイアウトが可能なUIコンポーネントでした。

今回はこのUICollectionViewのレイアウトのカスタマイズをしてみたいと思いますが、その前に、まずはUICollectionViewを構成するクラスの役割とその簡単な利用法について押さえておきます。

UICollectionViewを構成するクラス

UICollectionView

メインとなるUIコンポーネントです。UITableViewと同様、表示するデータの管理をUICollectionViewDataSourceに、選択などの操作系の処理をUICollectionViewDelegateに委譲しています。

UICollectionViewDataSource

UICollectionViewを利用して表示するデータを提供するためのメソッドを定義するプロトコルです。UITableViewDataSourceと同じような感覚で利用できます。

UICollectionViewDelegate

UICollectionViewに対する選択等の操作を委譲するデリゲートプロトコルです。UICollectionView自体がUITableViewのような編集機能をサポートしていないので、その辺りの処理を行うデリゲートメソッドは定義されていません。

UICollectionViewController

UICollectionViewのビューコントローラクラスです。UICollectionViewDataSourceプロトコルとUICollectionViewDelegateプロトコルに適合しています。

UICollectionReusableView

個々の要素を表現するためのUIコンポーネントの基底クラスです。UITableViewCellと同様に、スクロール時に要素を再利用するための実装がされています。

UICollectionViewCell

UICollectionReusableViewを継承した、個々の要素をセルとして表示するためのUIコンポーネントです。UITableViewCellと違ってラベルなどを一切持っていないので、文字を表示したい場合などは継承して必要なUIコンポーネントを追加します。

UICollectionViewLayout

レイアウト処理を行うコンポーネントの抽象クラスです。カスタムレイアウトを作成する場合には、このクラスを継承して必要なメソッドをオーバーライドします。

UICollectionViewFlowLayout

UICollectionViewLayoutを継承したレイアウト処理コンポーネントの実装クラスです。各要素をタイル状に並べるレイアウトを提供します。

UICollectionViewDelegateFlowLayout

UICollectionViewFlowLayoutのデリゲートプロトコルです。UICollectionViewFlowLayoutにおいては、各要素の大きさなどレイアウトを調整する方法として、プロパティを使う方法とこのプロトコルに定義されているデリゲートメソッドを使う方法が提供されています。プロパティを利用した場合は全ての要素が同一の設定となりますが、このデリゲートメソッドを実装すると要素間で異なる設定を適用することができます。

UICollectionViewLayoutAttributes

各要素が表示されるべき位置に関する情報を格納します。レイアウトコンポーネントがレイアウト処理をする際、このクラスにレイアウト情報を格納してUICollectionViewに渡します。

UICollectionViewUpdateItem

要素の追加・削除などによる各要素の位置変更情報を格納します。このクラスはレイアウトクラス内で利用され、プログラマが直接生成することはありません。

サンプル

では、実際にサンプルを作って試してみます。さくっと作ってしまいましょう。

• Xcode 4.5
• iOS SDK 6.0
• Apple LLVM compiler 4.1
• Storyboard, ARC使用

1. IBでUICollectionViewControllerを配置してInitialViewControllerに指定する

UICollectionViewControllerを配置すると、セルとしてUICollectionViewが、レイアウトとしてUICollectionViewFlowLayoutがデフォルトで設定されます。

2. UICollectionViewCellに再利用のためのIDを割り振っておく

3. UICollectionViewControllerのサブクラスを作成して、1で配置したUICollectionViewControllerと紐付ける

4. 3で作成したクラスに以下のメソッドを実装する

• numberOfSectionsInCollectionView:
• collectionView:numberOfItemsInSection:
• collectionView:cellForItemAtIndexPath:

- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
    return 1;
}

- (NSInteger)collectionView:(UICollectionView *)collectionView
     numberOfItemsInSection:(NSInteger)section
{
    return datas.count;
}

- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView
                  cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
    UICollectionViewCell *cell = [self.collectionView dequeueReusableCellWithReuseIdentifier:@"Cell"
                                                                                forIndexPath:indexPath];
    cell.backgroundColor = [UIColor greenColor];
    return cell;
}

UITableViewでおなじみのやつですね。ただし、セルの再利用まわりが若干変更されています。

5. 完成



緑色に塗られた四角いセルが大量に出てきました。これ自体は味もそっけもないサンプルですが、とりあえず動作の確認ができると思います。

次回に続きます。

参考サイト

iOS Developer Library

[iOS6] Collection View 基本的な使い方