【Swift】View Tableの編集モードの使い方。セルの並び替え、削除をする。(Swift 2.1、XCode 7.2)

2020年6月16日

編集モードとは

前回までの記事でTable View(以下、テーブルビュー)にデータを並べて表示する方法や、タップしたときのイベント処理について説明してきた。⇒「記事
Tabel ViewとTable View Cell

 

本記事ではテーブルビューのさらに嬉しい機能の「編集モード」について説明する。編集モードとは、テーブルビューのデータを並べ替えたり、削除したりできるモードのことで、アプリ起動中にモードを変更しながら利用する。

 

編集モードを試す

編集モードを試してみよう。まずは部品の準備から。

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

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

 

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

テーブルビューにセルを追加

 

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

identifierにTestCellを設定

 

次に、テーブルビューを通常モードと編集モードに切り替えるためのボタンを配置する(下図赤矢印)。続いて、黄緑枠のボタンを押してアシスタントエディタを開き、Ctrlキーを押しながらボタンをソースコードまで運ぶ(下図青枠)。吹き出しの設定画面が表示されるので、Connectionに「Action」、Nameに「changeMode」を入力してConnectボタンを押す。これで、ボタンを押した時に実行されるメソッドが追加された。

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

 

次に、Ctrlキーを押しながらテーブルビューをソースコードまで運ぶ(下図紫枠)。吹き出しの設定画面が表示されるので、Connectionに「Outlet」、Nameに「testViewTable」を入力してConnectボタンを押す。これで、ソースコードからテーブルビューを操作できるようになった。

Table Viewとソースコードのコネクションを確立する

 

以下のコードは、テーブルビューの通常モードと編集モードを切り替えるコードの実装例。

「データを返すメソッド」と「データの個数を返すメソッド」はテーブルビューにデータを表示するためのUITableViewDataSourceプロトコルの必須メソッドである。

「ボタン押下時に呼ばれるメソッド」では、テーブルビューが通常モードのときは編集モードに、編集モードのときは通常モードに切り替える作りにしている。

 

以下は実際のプレイ動画

 

データの削除

上記コードを実行すると、編集モードで削除ボタンを表示することはできるが、実際に削除することができない。

削除するには以下のメソッドを追加する。このメソッドはビューが編集されるときに呼び出されるメソッドで、配列からデータを削除し、テーブルビューの再読み込みを実施している。

 

以下は実際に動かした動画

 

削除できるデータを制限する

初期状態では編集モードにしたときにすべてのセルが編集できるようになっている。特定のセルやセクションは編集できないようにしたい場合は以下のメソッドを追加する。

このメソッドはビューの表示処理が実行されるときにデータの個数ぶん呼び出される。編集したくないセルのインデックス番号のときはfalseを返すようにすれば、その行に削除ボタンは表示されなくなる。

 

以下は実際のプレイ動画。1~2行目は削除ボタンが表示されなくなった。

 

データの並び替え

セルの並び替えをしたい場合は以下のメソッドを追加する。

元の位置のインデックスと移動先のインデックスが引数で渡ってくるので、テーブルビューに表示するための元データを編集する。ここでデータを編集しておかないと、テーブルの再読み込みがされたときに並び順がもとに戻ってしまう。

 

以下は実際のプレイ動画。先ほど追加した「編集可否を答えるメソッド」によって1~2行目は並び替えをすることができなくなった。

 

並び替えできるデータを制限する

編集はできるようにして、並び替えだけできないようにしたい行がある場合は以下のメソッドを追加する。

 

「編集可否を答えるメソッド」を削除して、上記の「並び替え可否を答えるメソッド」を実装した場合は以下の動画のようになる。削除はすべての行で可能だが、並び替えは青山さんの行しかできなくなった。

 

編集モードでデータを選択できるようにする

テーブルビューの記事で、設定項目のEditingについては編集モードの記事で動作確認をすると言ったので確認する。⇒「記事

デバイス画面のテーブルビューをクリックしたあとに下図赤枠のアトリビュートインスペクタボタンを押して設定画面を表示する。下図黄緑枠のEditingを「Single Selection During Editing」に変更してアプリを起動する。
テーブルビューのアトリビュートインスペクタ

 

以下は実際のプレイ動画。編集モードでもセルを選択できるようになった。