Help us understand the problem. What is going on with this article?

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

nasutaro211
Twitter: https://twitter.com/nasupc xcodeとかRailsを使ってアプリを作ってる。 名古屋大学アプリ開発団体jack副代表(Twitter: https://twitter.com/jackapp_tmy)
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away