その2この記事は2016年8月5日に書かれたものです。内容が古い可能性がありますのでご注意ください。TweetUIKitの部品の中でもなにかと作成方法が複雑なテーブルビュー。iPhoneアプリ開発とテーブルビューは切っても切り離せないほどよく使われる部品ですよね。この際テーブルビューの基本的な作成方法をマスターしてしまいましょう!!※この連載ではストーリーボードを用いてテーブルビューを作成していくことにします。今回は実際に作成していきますよー。View」の2種類について解説しました。View」を使って解説していきます。View」を画面いっぱいに広げて全画面に配置したいと思います。Controller」にすればいいじゃん、というツッコミは一切受け付けません。Viewを置かないと何も始まらないので、画面に配置しましょう。Layoutの設定をしておきます。LayoutのPinメニュー(図の青枠部分)をクリックして開き、上下左右の余白を0にします。すると画面の上下左右いっぱいに広げられて表示されます。ここで注意しなければならない点が2つあります。画面の左右の端にはデフォルトで20pt分の余白が設定されているため、マージンを無視した値を設定しなくてはなりません。margins」のチェックを外す必要があります。Layoutの設定をしたとすると、値を0に設定したとしても画面の両端に20pt分の余白が出てしまうので結局修正(もしくはやり直し)する必要が出てしまいます。画面の上部にはステータスバー(電池残量や電波強度が表示される部分)があるため、そのステータスバーの下端を基準(テーブルビューの上端)としなければなりません。値を入力する部分の横の▼をクリックすると、基準となる位置を選択することができます。Guide」を選択してから値を0にするようにしましょう。誤って「View」を選択してしまうと、テーブルビューとステータスバーの表示が被ってしまうので気をつけて下さい。Layoutの制約に則ったサイズに変更してあげましょう。Frames」をクリックします。Layoutの設定はおしまい。できた結果が次のようになります。Cell」を配置する次にセルを配置します。セルとはテーブルビューに表示される1つ1つのマス目を指します。上記の赤枠1つ1つがセルです。そのセルを作成していきます。Cell」を配置します。この時ドロップする場所はテーブルビューの上であればどこでも構いません。いうかどこに配置しても図の青枠のようにテーブルの一番上に配置されます。Cell」は雛形となるセルであることです。5個のセルを作成したい場合を考えてみましょう。Cell」を5つ配置すれば良いかに思ってしまいます。こんな感じになりますね。このようにストーリーボードで配置したとしても実際にビルドしてみると分かりますが、何も表示されません。これはなぜかというと、上でも述べた通りこの部品は「雛形となるセル」であって、そのセルを表示するためには必ずコードで記述する必要があるからです。1つの特徴として、テーブルビューでは同じ雛形のセルを再利用して使い回すという手法がとられています。これは次回コードを記述した時にイメージが沸くと思いますので、今はそうなんだーと思っていれば大丈夫です。いう手法が取られていることでメモリの消費を抑えることができるなどのメリットがあるみたいですよ。Cellはあくまで雛形となるセルであって、ストーリーボードに配置しただけでは何も表示されません。コードで設定を記述する前提の部品となっています。そのため、コード上で扱えるようにするために名前をつける必要があります。Cellは複数配置してしまった場合は1つだけに戻しておいてください。Cell(青枠部分)を選択し、右側のアトリビュートインスペクタ「Identifier」に任意の識別子を設定します。これがこの雛形セルの名前となってコード上から操作することが可能になるのです。今回は「myCell」という識別子を設定しています。今回はこれで終わりにします!次回は実際にコードを記述して、テーブルにセルを表示してみたいと思います。