【Swift】UITableViewDelegateの使い方。テーブルのセルが選択されたときにイベントを発生させる。(Swift 2.1、XCode 7.2)

2020年6月16日

UITableViewDelegateプロトコルとは

前回までの記事でTable View(以下、テーブルビュー)とTable View Cell(以下、セル)を使って、データを目次のように並べて表示する方法と各部品の設定について説明してきた。⇒「記事

Tabel ViewとTable View Cell

 

テーブルビューはデータの一覧表示だけでなく、選択されたデータを通知するイベントを発生させることができる。そこで、本記事ではUITableViewDelegate(以下、テーブルビューデリゲート)を用いたイベント処理について説明する。

テーブルビューデリゲートとは、テーブルのデータが選択また編集されたときに呼び出されるメソッドが定義されたプロトコルである。メソッドはすべてoptionalなので、必要なものだけ実装すればいい。

 

データ選択時のイベントを実装する

それでは、テーブルビューデリゲートを適用して、イベント処理を試してみよう。

まずはテーブルビューをデバイス画面に配置する。そして、Ctrlキーを押しながらテーブルビューをデバイス画面の上にある黄色い丸に運び、ポップアップで表示されたメニューから「dataSource」を選択する。

さらに、もう一度テーブルビューを黄色い丸に運び、今度は「delegate」を選択する。これは、テーブルビューのイベントが発生したときはこのUIViewControllerのデリゲートメソッドを呼び出すという設定である。

デバイス画面にテーブルビューを追加

 

次に、下図赤枠の「Table View」をクリックしたあとにアトリビュートインスペクタボタン(黄緑枠)を押して設定画面を表示する。設定項目のPrototype Cellsを1に変更するとテーブルビューの下に「Table View Cell(水色枠)」が追加される。
テーブルビューにセルを追加

 

次に、下図水色枠の「Table View Cell」をクリックしたあとにIdentifier(黄枠)に「TestCell」を入力する。
identifierにTestCellを設定

 

次に、イベントが通知されたことをアプリ画面に表示するためにラベルをデバイス画面に配置する(下図赤矢印)。

続いて、黄緑枠のボタンを押してアシスタントエディタを開き、Ctrlキーを押しながらラベルをソースコードまで運ぶ(下図青枠)。吹き出しの設定画面が表示されるので、Connectionに「Outlet」、Nameに「testLabel」を入力してConnectボタンを押す。これで、ラベルの変数がソースコードに追加され、ラベルの値を操作できるようになった。

ラベルをデバイス画面に配置し、ソースコードとコネクションを確立する

以下のコードは選択されたデータをラベルに表示する例。「データを返すメソッド」と「データの個数を返すメソッド」はテーブルビューにデータを表示するために適用したUITableViewDataSourceプロトコルの必須メソッドである。

テーブルビューデリゲートのメソッドは青色箇所のメソッドで、データが選択されたあとに、テーブルビューのインスタンスと選択されたデータのインデックスを引数にこのメソッドが呼び出されるので、引数をもとにデータを取り出し、ラベルの値に設定している。

以下は実際のプレイ動画

 

その他のデリゲートメソッド

他にもデータを選択したときに呼び出されるメソッドは複数ある。以下のコードはデータの選択がらみで呼び出される7つのメソッドを実装した例。

引数で渡ってくるデータはすべて同じである。異なるのはメソッドが呼び出されるタイミングで、データがハイライトされる前に呼び出されるものがあれば、選択を解除した段階で呼び出されるものもある。

 

上記コードを実行してデータを選択すると、以下の順番で出力されることになる。

テーブルビューデリゲートのメソッドは他にたくさんあるのでプロパティの定義から試してみてはどうだろうか。(必須メソッドを調べる方法については⇒「記事」)