TableViewController と Storyboard でテーブルをつくる (Swift)

ViewController でテーブルを作成する記事はよく見かけたのですが、 TableViewController を使う方法はあまりなかったのでメモ。

まだまだ学び始めたばかりでよくわかっていないことだらけなので、手順だけ。

ざっくり書くと、

1. storyboard で TableViewController を追加
2. 追加した TableViewController の cell に要素を追加
3. TableViewController に対応させるファイル ( TableViewController.swift ) を作成
4. cell に対応させるファイル ( TableViewCell.swift ) を作成
5. cell と TableViewCell.swift を対応させる
6. TableViewController と TableViewController.swift を対応させる
7. TableViewController.swift を実装する

という流れです。

storyboard で TableViewController を追加

storyboard を選択し、右下のライブラリの検索窓に tableviewcontroller 等と入力して、 TableViewController をドラッグアンドドロップ。

追加した TableViewController の cell に要素を追加

先ほどと同様に、cell に追加したい要素をライブラリで検索します。
要素を cell の上にドラッグアンドドロップで配置します。

TableViewController に対応するファイル ( TableViewController.swift ) を作成

command + N 等でファイル作成画面を開きます。
Cocoa Touch Class を選択します。

次画面で、 Subclass of を UITableViewController にします。
Class 名は自由に変更して構いません。

そのままファイルを作成します。

cell に対応させるファイル ( TableViewCell.swift ) を作成

先ほどと同様に、 Cocoa Touch Class を選択します。

次画面で、 Subclass of を UITableViewCell にします。
Class 名は自由に変更して構いません。

そのままファイルを作成します。

cell と TableViewCell.swift を対応させる

アイデンティティインスペクタから Custom Class の Class を TableViewCell にします。

次に、属性インスペクタ から Identifier を任意の値に設定します。この値はファイル名と対応していなくて構いません。

TableViewController と TableViewController.swift を対応させる

先ほどと同様に、 アイデンティティインスペクタから Custom Class の Class を TableViewController にします。

ちなみに、ここまでの作業だけで storyboard で cell に追加した要素が表示されるようになるかと思うかもしれませんが、まだ不十分です。
Build には成功しますが、以下のよう cell には何も表示されないので、後述の実装が必須となります。

UITableViewController.swift を実装する

たくさんコードが書いてありますが、変更する箇所は以下の関数 3 つです。

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    // #warning Incomplete implementation, return the number of sections
    return 0
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return 0
}

/*
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("reuseIdentifier", forIndexPath: indexPath)

    // Configure the cell...

    return cell
}
/*

この 3 つを以下のように書き換えるだけです。

override func numberOfSectionsInTableView(tableView: UITableView) -> Int {
    // #warning Incomplete implementation, return the number of sections
    return 5 // 任意の値に変更する ( 1 セクションあたりの行数 )
}

override func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    // #warning Incomplete implementation, return the number of rows
    return 1 // 任意の値に変更する ( セクション数 )
}

// コメントアウトを外す
override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCellWithIdentifier("TableViewCell", forIndexPath: indexPath) // reuseIdentifier を cell に設定した Identifier に書き換える

    // Configure the cell...

    return cell
}

以上で作業は終わりです。

確認する

Build すると追加した要素が表示されていることを確認できます。
レイアウトは調整していないので汚いです。