【Swift】テーブルに表示しているデータをキーボードを使って変更する。(Swift 2.1、XCode 7.2)

2020年6月16日

テーブルデータの変更とは

前回までの記事で、TableView(以下、テーブルビュー)とTableViewCell(以下、セル)を使ってデータを目次のように並べて表示し、セルの並び替え、削除を行う方法を説明してきた。⇒「記事

Tabel ViewとTable View Cell

 

「削除ができる。」、「並び替えができる。」、その他に必要そうなのはテーブルに表示しているデータをキーボードを使って変更する機能だ。そこで本記事では、キーボードからセルと元データの値を変更する実装方法について説明する。なお、今まで説明してきた内容の復習なので難しく考えなくても大丈夫。

 

テーブルデータ変更の仕様を考える

まずどんなテーブルビューを作るか考える。セルをタップすると下図のようにキーボードが表示され、タップしたセルの文字列を自由に変更できるようにする。そして、キーボードが閉じた段階で元データが変更内容で上書きされる仕様にする。

コードを把握しやすくするため、セルの並び替えや削除機能は実装しない。

作成するアプリのイメージ

 

実装は前回の記事で作成したものを修正する流れで行うので、前回の記事をまだ読んでいない方はそちらを試したあとにここから先を読むことをお勧めする。⇒「前回の記事

テーブルデータの変更を実装する

それでは作業を開始する。

XIBファイルの画面を開き、配置していた3個のラベルをすべて削除する。そして、UITextField(以下、テキストフィールド)の部品を新たに配置する(下図赤矢印)。

次に、テキストフィールドをクリックしたあとに黄緑枠のアトリビュートインスペクタボタンを押して設定画面を開き、Border Styleの設定を変更してテキストフィールドの枠線を消す。

自作セルにUITextFieldを配置

 

次にTestTableViewCell.swiftを開き、前回の記事で追加したラベル(@Outlet)の3行を削除する。続いて、Ctrlキーを押しながらテキストフィールドをソースコードにドラッグ&ドロップで運び、吹き出しの設定画面を開く。Connectionに「Outlet」、Nameに「testTextField」を入力し、Connectボタンを押す。
UITextFieldとソースコードのコネクションを確立する

 

テキストフィールドの値が修正されてから元データを変更するまでの流れはデリゲートを利用して実装する。⇒「デリゲートとは

下図のように、テキストフィールドの変更通知を自作セルが受け、自作セルがUIViewControllerインスタンスに通知を流す。そして、UIViewControllerインスタンスは自分が保持している元データを修正するという実装にする。

edit_cell_delegate_exam1

 

自作セルのソースコード(TestTableViewCell.swift)を開き、以下のように修正する。テキストフィールドのデリゲート先に自作セルがなり、通知を受けたらキーボードを閉じて自分のデリゲート先に通知を流している。

また、自分のデリゲート先(ViewControlloerクラス)に適用してもらうプロトコル(TestDelegate)をここで定義している。

 

次にViewController.switを開き、以下のように修正する。データを返すメソッドで自作セルのデリゲート先に自分を設定している。通知を受けたら変更されたセルのインデックスを取得し、データを修正している。

 

以下は実際の動画

 

標準出力には以下のように表示される。