【UITableViewController】超かんたん実装！ソースコード解説

iOSアプリ開発

こんにちは！
「UITableViewController」と「UITableView」が別物だとさっきはじめて知りました僕です！

今回は「UITableViewController」と「Coredata」を使ってフォルダで分別できるメモ帳を作ってみました。

「UITableViewController」の超簡単な使い方メモ

（1）「UITableViewController」をストーリーボードに設置

ストーリーボードにて、部品の中から「UITableViewControlle」を選んでボード内にドラッグ&ドロップします。

（2）「UITableViewController」の中にある「Table View Cell」の中に「UIlabel」を設置

「UITableViewController」の中にある「Table View Cell」の中に「UIlabel」をドラッグ&ドロップで設置します。別に設置しなくても動くには動くんですけど、labelすらないテーブルに何の意味があるのかという話になりますので、最低限labelだけは設置しておきます。

（3）「UITableViewController」の中にある「Table View Cell」の「identifier」に好きな名前をつける

「UITableViewController」の中にある「Table View Cell」の「identifier」に好きな名前をつけます。tableCellでもTestCellでもお好みに。ちなみに「identifier」って、「アイデンティファイア」って読むんですよ。知っていましたか？僕は知りませんでした。必殺技みたいでかっこいい名前ですね。

（4）「UITableViewController」とSwiftファイルを紐づける

Swiftファイルを新規作成します。ファイル名はお好みで。ファイルが作成できたら、ストーリーボードのIdentity inspectorタブの「Custom Class」という部分から「UITableViewController」とswiftファイルの紐付けを行います。

（5）2つの必須メソッドを追加

テーブルビューには2つの必須メソッドが存在します。それが下記です。

override func tableView(_ table : UITableView, cellForRowAt: IndexPath) -> UITableViewCell{

    let cell = table.dequeueReusableCell(withIdentifier: "さっきidentifierにつけた名前", for: cellForRowAt)
    cell.textLabel?.text = "test"
    return cell

}

override func tableView(_ table : UITableView, numberOfRowsInSection: Int) -> Int {

    return 3

}

1つ目のメソッドが、セルの中身を定義するメソッド。
2つ目のメソッドが、セルの個数を定義するメソッド。
とりあえず上記をそのままコピペして、実行してみてください。「test」と3つ並んだテーブルが作成されるはずです。

「UITableViewController」を使う場合は「UITableViewDataSource」と「UITableViewDelegate」を継承する必要はありません。

すでに「UITableViewController」の中に含まれているからです。やったね楽チンだ。

（6）2つのメソッドの中身をいい感じに整える

2つのメソッドの中身をいい感じに整えてください。以上おわり。

※ 右上のフォルダ追加ボタンは気にしないでください。

セルがタップされた際の動作を追加

セルがタップされた際の動作を追加しましょう。

セルがタップされた時に呼び出されるメソッドについては、公式リファレンスでは「UITableViewのページ」ではなく「UITableView Delegateのページ」に書かれています。

参考：https://developer.apple.com/documentation/uikit/uitableviewdelegate

「func tableView(UITableView, didSelectRowAt: IndexPath)」というメソッドが、セルタップ時に呼び出されるメソッドです。

「タップした」だの「スクロールした」だの「スワイプした」だの、そういう画面触った系の処理はすべてデリゲートのページに書かれています。ややこしいなぁ〜全部UITableViewのページに書いておいてくれよと感じるのは僕だけかい？

override func tableView(_ table: UITableView, didSelectRowAt indexPath: IndexPath){

}

↑この中にセルがタップされた際の処理を書いていきます。

今回は「セルがタップされたら画面遷移をする」という処理にしたかったので、下記のように書きました。あくまで一例です。segueを使用して画面遷移をした場合の例です。

override func tableView(_ table: UITableView, didSelectRowAt indexPath: IndexPath){
    self.performSegue(withIdentifier: "あらかじめ指定しておいたsegueの名前", sender: nil)
}

セルを増やす

「ボタンを押したらセルを増やす」という動作を追加します。といっても別に追加用のメソッドがあるわけではないんですよ。

(1)セル追加ボタンを設置

ストーリーボードにて、セル追加ボタンを設置しswiftファイルとactionで繋いでおきます。

(2)セル情報の保存元となる場所にデータを追加

セル情報の保存元となる場所（Core Dataだったり、配列だったり、とにかくセル情報を保存しているところ）にデータを追加します。

(3)UITableViewを更新

データの追加が終わったタイミングで、「reloadDataメソッド」でUITableViewを更新します。すると新しく追加したセルが表示されます。

スワイプでボタンを表示

override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {

    let editAction = UIContextualAction(style: .normal, title: "Edit", handler: {(action: UIContextualAction, view: UIView, completion: (Bool) -> Void) in
          //Editを選んだときの動作
        completion(true)
    })
    editAction.backgroundColor = UIColor.green

    let deleteAction = UIContextualAction(style: .destructive, title: "Delete", handler: { (action: UIContextualAction, view: UIView, completion: (Bool) -> Void) in
        //Deleteを選んだときの動作
        completion(true)
    })
    deleteAction.backgroundColor = UIColor.red

    return UISwipeActionsConfiguration(actions: [editAction, deleteAction])
}