Edited at

UITableViewの編集モードを使ってCellの削除を実装するまで

More than 1 year has passed since last update.


TableViewのCellの削除の流れ

tableViewのdlegateなどは実装してあることを前提としています。

1. 編集ボタンを作ってNavigationBarに追加

2. 編集ボタンを押したらTableViewの編集モードを切り替える

3. 削除の実装

4. バツボタンの背景色を変える

5. 通常時の横にシュッてやるとdeleteが出てしまうのをオフにする


1. 編集ボタンを作ってNavigationBarに追加

まず実装したいViewを選択した状態でxcodeの上のメニューバーからEditor -> Enbed In -> NavigationControllerでNavigationBarを画面に追加する(Viewが二つになるがこれらがうまく重なるイメージ)

その後実装したいViewのControllerのviewDidLoad()に次のコードを書き込む


ViewController.swift

        self.navigationController?.isNavigationBarHidden = false

navigationItem.title = "title"
navigationItem.rightBarButtonItem = editButtonItem

ちなみにこのeditButtonは押すと勝手にDoneのボタンに切り替わってくれる優れもの


2. 編集ボタンを押したらTableViewの編集モードを切り替える

さらに優れていることにeditButtonを押した時の処理はsetEditingという関数をoverrideすることで書ける

のでここに処理を書き込む


ViewController.swift

    override func setEditing(_ editing: Bool, animated: Bool) {

//override前の処理を継続してさせる
super.setEditing(editing, animated: animated)
//tableViewの編集モードを切り替える
tableView.isEditing = editing //editingはBool型でeditButtonに依存する変数
}


3. 削除の中身の実装

削除ボタンが押された時の処理は次のdelegateメソッドの中に書ける


ViewVontoroller.swift

    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {

//dataを消してから
datasorceArray.removeAtIndex(indexPath.row)
//tableViewCellの削除
tableView.deleteRows(at: [indexPath], with: .automatic)
}


4. バツボタンの背景色を変える

3までで背景が白の場合などは違和感を感じないだろうがtableViewの背景が白以外だとバツボタンの背景色が白になっているので違和感がある。これはTableViewCellクラスの方に背景色を書き込むことで解決する。


TableViewCell.swift

    override func awakeFromNib() {

super.awakeFromNib()
self.backgroundColor = UIColor(red: 235/255, green: 225/255, blue: 213/255, alpha: 1.0)
}


5. 通常時の横にシュッてやるとdeleteが出てしまうのをオフにする

cellのeditingStyleというのを設定してやれば良いらしい。


viewController.swift

func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCellEditingStyle {

if tableView.isEditing {
return .delete
}
return .none
}


参考資料

https://stackoverflow.com/questions/47900063/how-to-change-uitableviewcell-edit-button-background-color

http://saruhei1989.hatenablog.com/entry/2015/09/08/190000

https://ja.stackoverflow.com/questions/37791/uitableview%E3%81%AE%E5%89%8A%E9%99%A4%E3%83%9C%E3%82%BF%E3%83%B3%E7%84%A1%E5%8A%B9%E3%81%AB%E9%96%A2%E3%81%97%E3%81%A6