テーブルビューコントローラーを配置する

　最も簡単にテーブルビューを表示する方法は、プレイグラウンドのライブビューとしてテーブルビューコントローラーのオブジェクトを張り付けることです。それだけなら、書き方によもよりますがわずか1〜2行で実現できます。

　いつものようにUIKitとPlaygroundSupportのインポートは必要ですが、たったこれだけで、プレイグラウンドのグラフィック画面にテーブルビューが表示可能です。

テーブルビューは、空のテーブルビューコントローラーを作成して、プレイグラウンドのライブビューに張り付けるだけで、とりあえず表示できます

　このままでは、罫線が見えるだけで何のデータも表示しない空のテーブルですが、上下にスワイプしてみれば罫線がスクロールすることが確認できるでしょう。

テーブルビューに文字のリストを表示する

　テーブルビューに表示する内容は、通常は動的に変化する場合がほとんどです。そのため、テーブルビューのプロパティを設定して内容を変更するといった固定的な方法ではなく、流動的に内容を変化させる方法が用意されています。簡単に言えば、外部から呼び出してもらうメソッドを用意しておき、必要に応じてその呼び出しに応えることで表示すべき内容を返すようになっています。

　ここで言う「外部」とは、とりあえずiOSのことだと思えばいいでしょう。実際には、アプリが起動して最初の画面を作る際や、そのあとにユーザーがテーブルビューを操作するとiOSが反応し、内容を表示するために必要なデータをテーブルビューコントローラーに要求してくるというイメージです。長大なテーブルの場合、最初からすべての表示データを用意しておくのではなく、ユーザーがテーブルをスクロールすると、新しく画面に現れる部分に対応した表示データをその都度要求してくるのです。

　それを実現するために最低限実装しなければならないメソッドは2つです。1つは、テーブルビューとしていくつの要素（行）があるのかを返すもの。もう1つは指定された特定の行に表示すべきデータを返すものです。逆の立場、つまりiOSの立場で考えてみれば、少なくともこれら2つの情報があればテーブルビューの内容を表示できそうなことがなんとなくわかるでしょう。

　テーブルビューに内容を表示するために、もう1つ必要なものがあります。それは表示する内容そのものです。ここでは、ビューコトンローラーの中で固定的な配列として9つの果物の名前をカタカナの文字列で定義することにしました。

　1つめのメソッドは、単純にこの配列の要素の数を返すだけです。その配列の名前がfruitだとすれば、fruit.countを返せばいいのです。

　2つめのメソッドは、データの位置（テーブルビューの行の番号）をIndexPathというタイプのオブジェクトで受け取ります。といっても恐れることはありません。そのオブジェクトのrowというプロパティが行の番号を表しているので、それをインデックスとして、fruits配列から要素を取り出すだけです。

　ただし、この2つめのメソッドが返すのは表示する文字列ではありません。UITableViewCellというタイプのオブジェクトです。このセルというのは、テーブルビューの罫線の間の領域全体を表すものと思ってください。今回は文字列しか表示しませんが、セルには画像やコントロール類を含むこともできます。

　実際のコードは画面で確認してください。

テーブルビューの中身を表示する処理は、ちょっとだけ複雑ですが、行の数を返すメソッドと、指定された行の内容を返すメソッドを実装するだけで、最小限のものが実現できます

　これで全部です。2つめのメソッドの中では、まず空のセルを作り、その中に含まれるtextLabelというプロパティの、さらにtextというプロパティに指定された位置に対応する配列の要素、つまりどれかの果物の名前を代入して返します。

　これを動かしてみると、9つの果物の名前を表示するテーブビューとなりました。この状態では、要素の数が画面の高さに比べて少ないために全体が表示されていて、スクロールの必要はありません。それでも、多少は上下にスクロール可能でしょう。iPadを縦に持ってグラフィック画面を横長にすると、全部の要素がいちどに表示されなくなるので、テーブビューのスクロール機能の重要性が実感できるはずです。

上で示した2つのメソッドによって、9つの果物の名前を表示するテーブルビューになりました

テーブルビューに画像の表示を加える

　一般的に使われているテーブルビューには、さまざまな表示方法のバリエーションがあります。上で見たような文字だけのものはむしろ稀で、画像を伴っているものも多いでしょう。そこで、ここでも個々の行の中に画像を表示してみましょう。

　画像を表示するには、当然ながらその前に画像ファイルを用意しなければなりません。これは何でもいいのですが、ここではせっかくなので上の9種類の果物の画像を用意することにしました。と言っても手を抜いて、Mac上で「Appleカラー絵文字」のフォントを使って表示した絵文字のスクリーンショットを取り、それをJPEGファイルとして保存したものを使うことにしました。画像のサイズは128×128ピクセルとしましたが、これも特に規定はありません。極端に大きいとメモリーに負担がかかるので適切ではありませんが、常識的な範囲なら大丈夫でしょう。iPadのカメラで撮影した写真を使うことも可能です。

　Mac上で適当に用意した画像は、iCloud Drive経由でSwift Playgroundsに転送することができます。まずMac上でiCloud Driveに保存したら、プレイグラウンドのタイトルの右側にある「＋」ボタンをタップし、最上部の選択肢で真ん中の画像マークを選びます。

テーブルビューの個々のセルの中に表示する画像を用意したら、iCloud Drive経由で読み込むため「＋」をタップし、さらに真ん中の画像アイコンを選びます

　最初は何も画像がないので「No Images」と表示されます。ここで、その下の「Insert From...」をタップすると、iCloud Driveに保存されているファイルやフォルダーの内容が表示されます。

iCloud Driveに保存した画像ファイルが表示されるので、1つずタップして選んでいきます

　ここで使いたい画像を1つずつタップしていきます。これでそれらの画像がプレイグラウンドからアクセス可能になります。その結果、1つ前の画面では「No Images」だったところに、使用可能な画像の一覧が表示されるようになります。

必要な画像すべてが、プレイグラウンドから利用できるようになりました。これは、このプレイグラウンドに固有のリソースとしてコピーされた状態です

　これで準備が整いましたので、プログラムに変更を加えましょう。まずは、画像のファイル名を表す文字列の配列を作ります。これは、表示する果物の名前と順番を対応させます。ファイル名は、もちろんMacで作成した画像のファイル名です。この例の場合は、以下のようにpicsという名前で、9つのファイル名を含む配列を作成しました。

　あとは、指定された行の内容として返すセルの中に、これらの画像を埋め込めばいいのです。そのための処理は驚くほど簡単です。セルには、あらかじめimageViewという画像用のプロパティが用意されているので、そのimageプロパティに画像を代入するだけです。ただし、imageプロパティには画像ファイル名ではなく、それから作成したUIImageタイプのオブジェクトを代入します。そのための処理も含めて次の1行を追加するだけです。

　これらの2行を含む全体のプログラムは画面で確認してください。

テーブルビューのセルに画像を表示するためには、まず画像ファイル名の配列を作り、行の指定に応じて、その画像ファイルから作成したUIImageオブジェクトを、セルの所定のプロパティに代入します

　これを動かすと、みごとに果物の画像と、その名前の文字列からなるセルの並んだテーブルビューが表示されました。

文字だけのテーブルビューを表示するプログラムに、わずか2行を追加しただけで、画像付きのセルを表示するテーブルビューができました

次回の予定

　今回は、テーブルビューとしてもっとも基本的なタイプのものを表示してみました。それだけでも、複数の項目を簡単にレイアウトできる、テーブルビューの威力が実感できたでしょう。次回は、もう少し複雑な構造のテーブルビューの表示にトライしてみることにします。