16
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-03-30

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

16
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
16
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?