UITableViewCellをタップして削除ボタンを表示させる

8971 ワード
Swift iOS iOS テキストリンク

UITableViewのリストを削除するケースで、UITableViewCellをタップして削除ボタンを表示させるやり方。

本来であれば、iOSの作法にのっとってナビゲーションバーに編集ボタンを置いて編集モードにさせたり、Cellを左にスワイプした時に削除ボタンを表示させるのが普通だけど、それらのUIが他の機能とバッティングしていたため、このような対応が必要になった。

MGSwipeTableCellを使用

UITableViewCellをスワイプした時に表示させる削除や編集ボタンのアニメーションやイベントをカスタマイズできるライブラリMGSwipeTableCellを使った。
もともとスワイプさせてボタンを表示させることを目的としたライブラリだが、スワイプの操作を無効にすることと、ボタンを表示させるメソッドが用意されているので、その２つのAPIを利用して、今回の仕様に対応させた。
MGSwipeTableCellはcocoapodsからインストールできる。

以下は、ストーリーボードで実装した場合。

ストーリーボードの設定

Cellをタップした時にUITableViewのdidSelectRowAtIndexPathが呼ばれるようにUITableViewのSelectionをSingle Selectionに設定する。

UITableViewCellのClassにMGSwipeTableCellを指定

削除ボタンを設定

cellForRowAtIndexPathで削除ボタンを設定する。
下記サンプルは右ボタンに削除ボタンを１つだけ設定しているが、複数のボタンを配置したり、セルの左側にボタンを設定することも可能。

override func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
  let reuseIdentifier = "programmaticCell"
  var cell = tableView.dequeueReusableCellWithIdentifier(reuseIdentifier) as! MGSwipeTableCell!
  if cell == nil
  {
    cell = MGSwipeTableCell(style: UITableViewCellStyle.Subtitle, reuseIdentifier: reuseIdentifier)
  }
  cell.textLabel!.text = "Title"
  cell.delegate = self

  // セルの右に表示する削除ボタンを設定
  cell.rightButtons = [MGSwipeButton(title: "Delete", backgroundColor: UIColor.redColor())]
  cell.rightSwipeSettings.transition = MGSwipeTransition.Static

  return cell
}

Cellがタップされた時の処理

didSelectRowAtIndexPathで削除ボタンを出現させる。

//Cellを選択した時
override func tableView(tableView: UITableView, didSelectRowAtIndexPath indexPath: NSIndexPath) {
  let cell = tableView.cellForRowAtIndexPath(indexPath) as! MGSwipeTableCell!
  //削除ボタンを表示
  cell.showSwipe(MGSwipeDirection.RightToLeft, animated: true)
}

削除処理

MGSwipeTableCellDelegateでスワイプでのボタン表示を無効にし、削除ボタンが押された時の削除処理を実装する。
削除ボタンが押された時はtappedButtonAtIndexでボタンのIndex。directionで左右の位置が取得できる。
サンプルはCellの右側から出現した１つ目のボタンを削除ボタンとして判定している。

extension tableViewController:MGSwipeTableCellDelegate{
  func swipeTableCell(cell: MGSwipeTableCell!, canSwipe direction: MGSwipeDirection) -> Bool {
    //Swipe操作を無効
    return false
  }
  func swipeTableCell(cell: MGSwipeTableCell!, tappedButtonAtIndex index: Int, direction: MGSwipeDirection, fromExpansion: Bool) -> Bool {
    //削除ボタンを選択した時
    if direction == .RightToLeft && index == 0 {
      // 削除処理
      // ・・・
      return false
    }
    return true
  }
}

参考

MGSwipeTableCell
UITableViewCell show delete button on tap

86. Partition List
エンコードの授業を終えた最初の週...