【Swift/Xcode超入門】ToDoリストを作ってみよう②〜テーブル表示からデータ追加まで〜

まずは、画面と紐づいているクラス、ViewControllerを開きます。

現状、実行するとエラーがおきます。

なぜなら、テーブルのセルの中身と数が決まってないからです。

まずは、テーブルのセルの中身と数を決めるコーディングをしていきます。

import UIKit

//①変更：プロトコル（UITableViewDataSource, UITableViewDelegate）の追加
class ViewController: UIViewController, UITableViewDelegate, UITableViewDataSource {

    @IBOutlet weak var tableView: UITableView!

    // ②追加：テーブルに表示するデータの箱
    var todoList = [String]()

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func addBtnAction(_ sender: Any) {
    }

    // ③追加：セルの数を指定
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return todoList.count
    }

    // ④追加：セルの中身を設定
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "todoCell", for: indexPath)
        let todoTitle = todoList[indexPath.row]
        cell.textLabel?.text = todoTitle
        return cell
    }

}

上記のように、ViewControllerを変更してください。

テーブルを使うときは、このコードを書かないと始まりません。

実行してみましょう。

次は、プラスボタンを押したときに、テキストフィールド付きのアラートを出します。

ボタンを押した時なので、addBtnActionのメソッドの中に記述していきます。

@IBAction func addBtnAction(_ sender: Any) {
}

以下のように処理を追記しましょう。

@IBAction func addBtnAction(_ sender: Any) {
    let alertController = UIAlertController(title: "ToDo追加", message: "ToDoを入力してください。", preferredStyle: UIAlertController.Style.alert)
    alertController.addTextField(configurationHandler: nil)
    let okAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.default) { (acrion: UIAlertAction) in
        //OKをタップした時の処理
    }
    alertController.addAction(okAction)
    let cancelButton = UIAlertAction(title: "CANCEL", style: UIAlertAction.Style.cancel, handler: nil)
    alertController.addAction(cancelButton)
    present(alertController, animated: true, completion: nil)
}

実行して確認してみましょう。

次は、OKを押した時、TextFieldに入力されている値をテーブルに追加する処理を書いていきましょう。

以下のように、追記しましょう。

@IBAction func addBtnAction(_ sender: Any) {
    let alertController = UIAlertController(title: "ToDo追加", message: "ToDoを入力してください。", preferredStyle: UIAlertController.Style.alert)
    alertController.addTextField(configurationHandler: nil)
    let okAction = UIAlertAction(title: "OK", style: UIAlertAction.Style.default) { (acrion: UIAlertAction) in
        // 追加：OKをタップした時の処理
        if let textField = alertController.textFields?.first {
            self.todoList.insert(textField.text!, at: 0)
            self.tableView.insertRows(at: [IndexPath(row: 0, section: 0)], with: UITableView.RowAnimation.right)
        }
    }
    alertController.addAction(okAction)
    let cancelButton = UIAlertAction(title: "CANCEL", style: UIAlertAction.Style.cancel, handler: nil)
    alertController.addAction(cancelButton)
    present(alertController, animated: true, completion: nil)
}

これで、OKをタップすると、TextFieldに書いた値がテーブルに追加されます。

このように、TextFieldに値を入れてOKをタップしてテーブルに追加できることを確認しましょう。

これで、ToDoが追加できるようになりました。