UITableViewの編集モード

例えば、iOS標準の「メール」アプリや、「メモ」アプリでは、ナビゲーションバーの右側に「編集」ボタンがあり、
「編集」ボタンを押すと、テーブルビューの行を一括選択したり削除したり...と、編集できるようになる。
これを、どうやるか。

準備
今回は、ナビゲーションバーの上に「編集」ボタンを表示させるため、UINavigationControllerを利用する。
テーブルビューの最低限の実装は、次の記事を参照。
UITableViewの最低限の実装

  • あらかじめ、UITableViewを持ったViewControllerを、NavigationControllerにのせておく。ストーリーボードでやると下の図のような感じ。

実装手順

  • ナビゲーションバーを表示するようにする。(何もしなくても表示されている場合もあるかも。)
    例えば、ViewControllerのviewDidLoadでやる場合は、次のようにする。

  • ViewControllerのRightBarButtonにUIViewControllerが持っているeditButtonItemをセットする。

編集ボタンの表示の仕方は、下のコードのようにrightBarButtonに直接代入しても良い。上のコードのようにsetRightBarButtonを使えば、アニメーションが使えて、ふわっとした感じで表示非表示を切り替えできる。

  • これで起動してみると、ナビゲーションバーの右上に「編集」または「Edit」ボタン(言語設定により異なる)が表示されている。
    しかし、今のままでは、押してもボタンの表示が切り替わるだけで、他には何も起こらない。

実は、「編集」ボタンを押したときは、ViewControllerのeditingプロパティが変更されている。
なので、editingプロパティ変更のタイミングに合わせて、何か処理を行うように実装する。

  • ViewControllerのsetEditing(_:animated:)をオーバーライドする。

  • setEditing(_:animated:)の中で、ViewControllerが持っているtableViewに対してsetEditingする。

  • これでもう一度プロジェクトを実行してみる。すると、今度は「編集」ボタンを押した際に、テーブルビューの表示が編集モードになる。

ここから先は、UITableViewDelegateを使って、実際の編集処理(追加、削除、並び替えなど)を実装していく。
それはまた次回。

関連記事
UITableViewに行を追加する