カスタムなコレクションビューセルを定義

サイズが不ぞろいなセルを表示するプログラム

2018年04月18日 17時00分更新

文● 柴田文彦　編集●吉田ヒロ

　前回から、画像などを縦横に整列させて表示するのに便利なコレクションビューを扱っています。前回は、とにかくコレクションビューを使って画像を表示してみよう、ということで、週アスの表紙画像を並べて表示しました。その際、設定はすべてデフォルトのままだったので、個々の画像の表示はかなり小さなものとなっていました。今回は、そのあたりも含めてコレクションビューの表示をカスタマイズしていきます。

　コレクションビューの表示をカスタマイズすること自体は、それほど難しくありません。ただし、どこかのオブジェクトのプロパティの値を変更すればいいという単純なものでもありません。例えばセルのサイズは、コレクションビューのレイアウトが問い合わせるためのプロトコルに準拠したメソッドを実装し、それに答えるかたちでカスタマイズするのです。

　このような方法は、大げさでわずらわしいと思われるかもしれませんが、もちろんそれなりのメリットがあります。その1つは、セルのサイズを、実行中にダイナミックに変更することができることです。今回は、それを実際に試してみます。実はそうすることで、前回のまでのプログラムでは不具合が生じることにも気付かされます。もちろんそれに対処する方法も示します。さらに、セル同士の間隔や、ビューの周囲とのマージンを設定する方法も見ていきましょう。

コレクションビューのセルのサイズをメソッドで変更する

　それではさっそく、コレクションビューの中に表示するセルのサイズを変更するための方法を示しましょう。それは、sizeForItemAtというメソッドを、UICollectionViewControllerを継承するCollectionViewControllerクラスの中に記述するだけです。このメソッドは、目的のセルのサイズをCGSizeとして返します。ここでは、縦横ともに100ポイントの固定的なサイズを返しています。

今回は、前回の最後の状態のプログラムからスタートします。まずは、セルの大きさを固定的に設定するために、sizeForItemAtのメソッドを実装し、固定値として幅と高さが100×100の正方形をCGSizeとして返します

　なお、今回のプログラムは、先週のものに付け加えていきます。つまり、このメソッド以外は前回の最終的なものと同じです。ただし週アスの表紙画像は、また新しいものを1つ付け加えて5種類にしてあります。

　これを実行すると、確かに先週よりも大きな表紙画像の表示されました。

前回のものに、さらに1つの週アス表紙画像を追加して5種類の画像を用意しました。これを実行すると、前回よりもだいぶ大きな画像が表示されるようになりました。セルの背景色は、設定確認のためにしばらく表示したままにします

　今回も、セル自体のサイズがはっきりわかるように、最初はグレーの背景色を付けてあります。今回のプログラムの動きがすべて納得できたら、最後に背景を外すことにしましょう。

コレクションビューのセルのサイズをダイナミックに変化させる

　上で追加したメソッドには、引数としてindexPathが渡されて来ています。これはコレクションビューの中のセルの位置を表しています。実はこのメソッドは、1個ずつのセルのサイズを決めるたびごとに呼び刺されるのです。実際に動かしてみれば、プレイグラウンドのデバッグ機能で、表示するセルの数だけ呼び出されていることも確認できるでしょう。

　そこで、こんどはセルごとに異なるサイズを返してみることにしましょう。とはいえ、すべてのセルに異なる値を返すと、秩序も何もなくなってしまいそうです。ここでは、indexPathとして渡されて来るセルの位置に応じてサイズを決めることにしました。具体的には、indexPathのrowプロパティ、つまり1つのセクションの中のインデックスの値を4で割った余りに10を掛けたものに100を足したものを1辺の長さとする正方形のサイズを返すことにします。これにより、100×100、110×110、120×120、130×130、100×100...のように、4種類のサイズが繰り返し登場することになります。

　これを動かして結果を見てみましょう。

セルの大きさは、固定値ではなく毎回ダイナミックに設定することができます。この例では、indexPath、つまりセルの位置によって大きさを4とおりに変化させています。最小が100×100、最大が130×130となり、その間で変化を繰り返します

　目論見どおり4種類のセルサイズが順番に並びます。それに対して画像の種類は5種類あるので、それなりのバラエティ感も出ています。

　しかし、このコレクションビューを下の方までスクロールさせてから、また上の方に戻ってみると、なんと、表示が乱れてしまいます。

このプログラムを動かしてからコレクションビューを上下にスクロールさせていると、表示が乱れてくるのが嫌でも目に付きます。セルの大きさと画像の大きさがずれたり、複数の画像が重なったりしています

　セルの枠と中の画像サイズが一致していないところがあるのに加え、よく見ると、1つのセルに異なる画像が重ねて配置されているところさえあります。これは、どうしたことでしょうか。

　冷静に考えてみると、これはコレクションビューのセルを再利用していることに起因する問題ではないかと想像できるでしょう。つまり、再利用されたセルは目的のサイズとは異なり、しかも再利用前の画像が残っているのです。しかし、前回も述べたように、コレクションビューの場合にはセルは再利用するしかありません。これを解決するにはどうしたらよいでしょうか。

ツイートする

カテゴリートップへ