【Swift】UITableViewの末尾（フッター）に送信ボタンを追加する方法

はじめに

テーブルビューの末尾に送信ボタンを追加したい場合、テーブルビューのフッターを活用するのが最もシンプルで効果的な方法です。本記事では、実際のコード例を交えながら、UITableViewのフッター領域にボタンを配置する手順を詳しく解説します。

1. テーブルビューの初期化と基本設定

まず新しいプロジェクトを作成し、ビューコントローラー内に以下のコードを追加します。このコードはテーブルビューを初期化し、1つのセクションと複数の行を生成するものです。

func initTableView() {
    let tableView = UITableView()
    tableView.frame = self.view.frame
    tableView.dataSource = self
    tableView.delegate = self
    tableView.backgroundColor = colorLiteral(red: 0.6000000238, green: 0.6000000238, blue: 0.6000000238, alpha: 1)
    tableView.register(UITableViewCell.self, forCellReuseIdentifier: "cell")
    self.view.addSubview(tableView)
}

func numberOfSections(in tableView: UITableView) -> Int {
    return 1
}

func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 2
}

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let cell = tableView.dequeueReusableCell(withIdentifier: "cell")
    cell?.layer.backgroundColor = colorLiteral(red: 0.2392156869, green: 0.6745098233, blue: 0.9686274529, alpha: 1)
    cell?.textLabel?.text = "cell at \(indexPath.row)"
    return cell!
}

2. 初期化メソッドの呼び出し

続いて、上記の initTableView() を、ビューコントローラーの viewDidLoad() または viewDidAppear(_:) メソッド内で呼び出します。

3. 行とフッターの高さを指定する

次に、以下のコードを追加して、テーブルの各行およびフッターに適切な高さを持たせます。

func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 60
}

func tableView(_ tableView: UITableView, heightForFooterInSection section: Int) -> CGFloat {
    return 100
}

注意点： クラスが UITableViewDataSource および UITableViewDelegate に準拠していることを必ず確認してください。準拠していない場合、上記のデリゲートメソッドがコンパイルエラーとなります。

4. フッタービューとボタンの作成

それでは、いよいよフッタービューを作成し、その中にボタンを追加していきましょう。

func tableView(_ tableView: UITableView, viewForFooterInSection section: Int) -> UIView? {
    let footerView = UIView()
    footerView.backgroundColor = colorLiteral(red: 0.9686274529, green: 0.78039217, blue: 0.3450980484, alpha: 1)
    footerView.frame = CGRect(x: 0, y: 0, width: self.view.frame.width, height: 100)
    let button = UIButton()
    button.frame = CGRect(x: 20, y: 10, width: 300, height: 50)
    button.setTitle("CustomButton", for: .normal)
    button.setTitleColor(colorLiteral(red: 0, green: 0, blue: 0, alpha: 1), for: .normal)
    button.backgroundColor = colorLiteral(red: 0.721568644, green: 0.8862745166, blue: 0.5921568871, alpha: 1)
    footerView.addSubview(button)
    return footerView
}

実行結果の確認

上記のコードをデバイス上で実行すると、テーブルビューの末尾にカスタムボタン付きのフッターが表示されます。ボタンには任意のアクション（例：フォームの送信処理）を追加でき、色やサイズなども要件に応じて自由にカスタマイズ可能です。

まとめ

UITableViewのフッター機能を利用すれば、テーブルビューの末尾に簡単にボタンを配置できます。アンケートフォームや登録画面など、入力項目の下に「送信」ボタンを置きたいケースで非常に便利な手法なので、ぜひ実際のアプリ開発で活用してみてください。