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

2016年4月3日2020年6月16日

編集モードとは

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

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

編集モードを試す

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

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

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

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

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

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

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

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

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

//
//  テーブルビューの通常モードと編集モードを切り替える。
//

import UIKit

class ViewController: UIViewController,UITableViewDataSource {
    
    @IBOutlet weak var testTableView: UITableView!

    //データ
    var dataList = ["青山","阿部","加藤","神田","佐藤","坂田"]

    //データを返すメソッド
    func tableView(tableView:UITableView, cellForRowAtIndexPath indexPath:NSIndexPath) -> UITableViewCell {
        
        //セルを取得する。
        let cell = tableView.dequeueReusableCellWithIdentifier("TestCell", forIndexPath:indexPath) as UITableViewCell
        
        cell.textLabel?.text = dataList[indexPath.row]
        
        return cell
    }


    //データの個数を返すメソッド
    func tableView(tableView:UITableView, numberOfRowsInSection section:Int) -> Int {
        return dataList.count
    }


    //ボタン押下時に呼ばれるメソッド
    @IBAction func changeMode(sender: AnyObject) {
        //通常モードと編集モードを切り替える。
        if(testTableView.editing == true) {
            testTableView.editing = false
        } else {
            testTableView.editing = true
        }
    }
    
    //最初からあるメソッド
    override func viewDidLoad() {
        super.viewDidLoad()
    }
    
}

// テーブルビューの通常モードと編集モードを切り替える。

import UIKit

class ViewController: UIViewController,UITableViewDataSource {

@IBOutlet weak var testTableView: UITableView!

//データ

var dataList = ["青山","阿部","加藤","神田","佐藤","坂田"]

//データを返すメソッド

func tableView(tableView:UITableView, cellForRowAtIndexPath indexPath:NSIndexPath) -> UITableViewCell {

//セルを取得する。

let cell = tableView.dequeueReusableCellWithIdentifier("TestCell", forIndexPath:indexPath) as UITableViewCell

cell.textLabel?.text = dataList[indexPath.row]

return cell

}

//データの個数を返すメソッド

func tableView(tableView:UITableView, numberOfRowsInSection section:Int) -> Int {

return dataList.count

}

//ボタン押下時に呼ばれるメソッド

@IBAction func changeMode(sender: AnyObject) {

//通常モードと編集モードを切り替える。

if(testTableView.editing == true) {

testTableView.editing = false

} else {

testTableView.editing = true

}

//最初からあるメソッド

override func viewDidLoad() {

super.viewDidLoad()

}

以下は実際のプレイ動画

データの削除

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

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

    //テーブルビュー編集時に呼ばれるメソッド
    func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {

        //削除の場合、配列からデータを削除する。
        if( editingStyle == UITableViewCellEditingStyle.Delete) {
            dataList.removeAtIndex(indexPath.row)
        }
        
        //テーブルの再読み込み
        tableView.reloadData()
    }

//テーブルビュー編集時に呼ばれるメソッド

func tableView(tableView: UITableView, commitEditingStyle editingStyle: UITableViewCellEditingStyle, forRowAtIndexPath indexPath: NSIndexPath) {

//削除の場合、配列からデータを削除する。

if( editingStyle == UITableViewCellEditingStyle.Delete) {

dataList.removeAtIndex(indexPath.row)

}

//テーブルの再読み込み

tableView.reloadData()

}

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

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

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

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

    //編集可否を答えるメソッド
    func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool {
    
        //最初の2行は削除不可にする。
        if(indexPath.row < 2) {
           return false
        } else {
            return true
        }
    }

//編集可否を答えるメソッド

func tableView(tableView: UITableView, canEditRowAtIndexPath indexPath: NSIndexPath) -> Bool {

//最初の2行は削除不可にする。

if(indexPath.row < 2) {

return false

} else {

return true

}

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

データの並び替え

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

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

    //並び替え時に呼ばれるメソッド
    func tableView(tableView: UITableView, moveRowAtIndexPath sourceIndexPath: NSIndexPath, toIndexPath destinationIndexPath: NSIndexPath){

        //移動されたデータを取得する。
        let moveData = tableView.cellForRowAtIndexPath(sourceIndexPath)?.textLabel!.text
        
        //元の位置のデータを配列から削除する。
        dataList.removeAtIndex(sourceIndexPath.row)
        
        //移動先の位置にデータを配列に挿入する。
        dataList.insert(moveData!, atIndex:destinationIndexPath.row)
    }

//並び替え時に呼ばれるメソッド

func tableView(tableView: UITableView, moveRowAtIndexPath sourceIndexPath: NSIndexPath, toIndexPath destinationIndexPath: NSIndexPath){

//移動されたデータを取得する。

let moveData = tableView.cellForRowAtIndexPath(sourceIndexPath)?.textLabel!.text

//元の位置のデータを配列から削除する。

dataList.removeAtIndex(sourceIndexPath.row)

//移動先の位置にデータを配列に挿入する。

dataList.insert(moveData!, atIndex:destinationIndexPath.row)

}

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

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

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

    //並び替え可否を答えるメソッド
    func tableView(tableView: UITableView, canMoveRowAtIndexPath indexPath: NSIndexPath) -> Bool {
        let orderData = dataList[indexPath.row]
        
        //青山さん以外の行は並び替え不可にする。
        if(orderData != "青山") {
            return false
        } else {
            return true
        }

    }