このページの本文へ

Swift Playgroundsで学ぶiOSプログラミング第82回

コレクションビューコントローラーを活用

「写真」アプリ風に画像を整列させて表示するプログラム

2018年04月11日 17時30分更新

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

  • この記事をはてなブックマークに追加
  • 本文印刷

 このところ、視覚効果ビューやアラートコントローラーに組み込まれた曇りガラスのようなフィルター効果を試してきました。現在のiOSのユーザーインターフェースでは標準的に利用されている効果だけに、いかにもiOSらしいアプリを作成する際には何かと便利に使えることがわかりました。

 今回からはまったく話題を変えて、コレクションビュー(UICollectionView)を扱います。コレクションというからには、何らかの集合体を扱うビューだということはわかります。これは、主に写真のような画像を扱うためのものです。ひと言で言えば、iOS標準の「写真」アプリのように、画像を並べて表示するためのビューということになります。

 コレクションビューは、iOSで多用される標準的なインターフェースの1つ、テーブルビューと対比して語られることがよくあります。テーブルビューの場合には、上から下に向かって1直線上に、つまり1次元的にセルが並ぶのに対し、コレクションビューは左右上下の2次元平面にセルを並べられるビューということになります。プログラミングの作法もよく似たところがあります。テーブルビューのセルの中には、文字と画像を混在させることができますが、同様のことはコレクションビューでも可能です。もちろん、単に情報を一方的に表示するだけでなく、ユーザーの操作に応答する機能も備えています。

 今回は、とりあえずコレクションビューを使って2次元の表示を実現することにします。最初は空のセルを並べて表示し、次に数字を並べたセル、そして画像を含むセルを表示します。ここまでくると、「写真」アプリを連想できるものになるはずです。

コレクションビューを使うには、まずコレクションビューコントローラーを用意する

 テーブルビューを利用するには、テーブルビューコントローラーを使うのが最も簡単だったように、コレクションビューを使うのにもコレクションビューコントローラー(UICollectionViewController)ごと利用すると手間暇がかかりません。コレクションビューを使うには、テーブルビューと同様に表示するデータを供給するためのデータソースや、ユーザーの操作に応答するためのデリゲートといったオブジェクトを用意してやる必要があります。コレクションビューコントローラーは、それらのプロトコルに準拠しているので、そのクラス内に必要なメソッドを書くことができるからです。

 テーブルビューを思い出しながら、とりあえず最小限のプログラムでコレクションビューを表示してみることにしましょう。まずは、空のコレクションビューコントローラーオブジェクトを作って、それをプレイグラウンドのライブビューに張り付けてみます。

とりあえず、最小限のプログラムでコレクションビューの表示を試すために、空のUICollectionViewControllerオブジェクトを作成してプレイグラウンドのライブビューに設定してみます

 テーブルビューコントローラーでは、これと同様のコードで、罫線だけが表示され、上下にスクロール可能な空のテーブルビューが表示されました。コレクションビューでは、どんな表示になるのか興味深いところです。実行してみると。何も表示しないどころかエラーが発生してしまいます。

上のプログラムを実行すると、プレイグラウンドの実行エラーが発生します。この種のエラーは、エラーの理由も表示されず、原因もわかりにくいので、解決には調査や試行錯誤が必要となります

 このエラーは実行中に不意に発生するもので、この表示からは原因もわからず途方に暮れてしまうかもしれません。諦めの早い人は、Swift Playgroundsではコレクションビューはサポートされていないのかと早とちりして、これ以上追求するのを止めてしまいかねません。しかし実際には、コレクションビューはテーブルビューよりも要求が厳しく、空のビューコントローラーだけでは動作しないのです。でも大丈夫。少しだけ設定してやれば、コレクションビューならではの表示が可能になります。

 まず、最小限必要なのは、コレクションビューコントローラーのオブジェクトを作る際に、レイアウトを指定することです。そのレイアウトとは、UICollectionViewLayoutクラスのオブジェクトで指定するのですが、あらかじめ用意されたUICollectionViewFlowLayoutクラスを使えば、いかにもコレクションビューらしいフローレイアウトが比較的簡単に実現できます。早速試してみましょう。

コレクションビューコントローラーの場合には、何も指定しないで初期化したオブジェクトは機能せずにエラーが発生してしまいます。そこで、コレクションビューのレイアウトを決定するオブジェクトを指定して初期化してみます

 レイアウトを指定すれば、とりあえずエラーは発生しなくなります。しかし表示されるのは真っ黒なビューだけです。

コレクションビューのレイアウトを指定することでエラーは発生しなくなりました。しかし、それだけではこのような真っ黒なビューが表示されるだけで、コレクションビューの特徴は何も確認できません

 テーブルビューのように空のコレクションビューが表示されることはないのですが、エラーが発生しなくなったということは、少なくともプレイグラウンドではコレクションビューが使えない、ということはなさそうだと思わせます。画面が真っ黒なのは、コレクションビューコントローラーのデフォルトのビューであるコレクションビューの背景色が黒になっているに過ぎないと考えられます。

 そこで、もう少しだけ設定を加えていきましょう。まず、viewDidLoadメソッドの中で、コレクションビューの背景色を白に設定し、さらにセルの再利用のためのIDを「MyCell」に設定しています。

コレクションビューならではの表示を実現するために設定を加えていきます。まずはviewDidLoadメソッドの中でビューの背景色を白にし、セルを再利用するためのIDを「MyCell」に設定します

 このセルの再利用のIDというのはテーブルビューにもあるのですが、テーブルビューの場合にはそれを利用しなくても非効率になるだけで動作は可能でした。コレクションビューの場合には、このIDの設定は必須ということになります。それによってセルのために確保するメモリをできるだけ節約する機構が動作するのです。

 また、コレクションビューの場合には、セクションがいくつあるか、指定されたセクションの中に項目がいくつあるか、指定した位置のセルの中身は何なのか、といった質問に答えないとセルは何も表示されません。そこで、とりあえずセクション数は1、そのセクションには項目が12あって、どのセルの背景色もグレーだと答えるコードを書きましょう。

コレクションビューのセクション数、指定したセクションの項目数、指定した位置のセルそのものを返す、コレクションビューのデータソースとしてのメソッドを実装します。とりあえずセクション数は1、項目数は12、セルは場所に関わらずグレーの背景色だけを指定したものを返しています

 これで、とりあえず12個の背景色がグレーで中身は何もないコレクションビューの項目が表示されるようになりました。

ここまでのプログラムで、グレーの正方形のセルがビューの左上から右方向に、ビューの端まで来たら折り返してその下の行に、全部で12個並ぶコレクションビューが表示できました

 すべてデフォルトの設定なので、ビューの端からセルが並んでいたり、個々のセルもかなり小さめですが、今回はこの設定のまま中身を表示することに注力していきます。

この連載の記事

週間ランキングTOP5

ASCII倶楽部会員によく見られてる記事はコレだ!

ASCII倶楽部の新着記事

会員専用動画の紹介も!