SWTableViewCellを使ってTableViewで右スワイプだけではなく左スワイプにも対応する

UITableViewRowActionでは左スワイプに対応できなかったので、SWTableViewCellを使って左スワイプにも対応してみる。

以前書いたTableViewをスワイプしたらボタンを表示させるのプロジェクトに拡張することで対応します。

使用するモノ

SWTableViewCell

objective-cで書かれているけど、swiftで使います。

環境

環境	バージョン
Xcode	7.3
Swfit	2.2
SWTableViewCell	0.3.7

SWTableViewCellのインストール by cocoapod

初期化

pod init

Podfileを編集

vi Podfiel

Podfileの中身

# Uncomment this line to define a global platform for your project
# platform :ios, '8.0'
# Uncomment this line if you're using Swift
use_frameworks!

target 'SwipeTest' do
    pod 'SWTableViewCell', '~> 0.3.7'k
end

インストール

pod install

SWTableViewCellを使う

SWTableViewCellをインポート

import UIKit
import SWTableViewCell

cellForRowAtIndexPathでUITableViewCellではなくSWTableViewCellを使用するように変更する。

        // tableCell の ID で SWTableViewCell のインスタンスを生成
        let cell = table.dequeueReusableCellWithIdentifier("tableCell", forIndexPath: indexPath) as! SWTableViewCell
        // ボタンの設定
        cell.rightUtilityButtons = self.getRightUtilityButtonsToCell() as [AnyObject]
        cell.leftUtilityButtons = self.getLeftUtilityButtonsToCell() as [AnyObject]

カスタムボタンの定義

    // 右からのスワイプ時のボタンの定義
    func getRightUtilityButtonsToCell()-> NSMutableArray{
        let utilityButtons: NSMutableArray = NSMutableArray()
        utilityButtons.sw_addUtilityButtonWithColor(UIColor.blueColor(), title: NSLocalizedString("Share", comment: ""))
        utilityButtons.sw_addUtilityButtonWithColor(UIColor.grayColor(), title: NSLocalizedString("Archive", comment: ""))
        utilityButtons.sw_addUtilityButtonWithColor(UIColor.redColor(), title: NSLocalizedString("Delete", comment: ""))
        return utilityButtons
    }

    // 左からのスワイプ時のボタンの定義
    func getLeftUtilityButtonsToCell()-> NSMutableArray{
        let utilityButtons: NSMutableArray = NSMutableArray()
        utilityButtons.sw_addUtilityButtonWithColor(UIColor.greenColor(), title: NSLocalizedString("New", comment: ""))
        utilityButtons.sw_addUtilityButtonWithColor(UIColor.yellowColor(), title: NSLocalizedString("Edit", comment: ""))
        return utilityButtons
    }

最後に

ストーリーボードでtableCellのカスタムクラスを`SWTableViewCell`に設定する。

これで右スワイプだけではなく左スワイプにも対応

ボタンのクリックイベントを拾う

このままだとボタンをクリックしたイベントを拾わないので設定する。

ViewControllerのプロトコルにSWTableViewCellDelegateを定義する

class ViewController: UIViewController, UITableViewDataSource, UITableViewDelegate, SWTableViewCellDelegate {
    ...
}

cellForRowAtIndexPathでdelegateを設定

        // tableCell の ID で SWTableViewCell のインスタンスを生成
        let cell = table.dequeueReusableCellWithIdentifier("tableCell", forIndexPath: indexPath) as! SWTableViewCell
        // ボタンの設定
        cell.rightUtilityButtons = self.getRightUtilityButtonsToCell() as [AnyObject]
        cell.leftUtilityButtons = self.getLeftUtilityButtonsToCell() as [AnyObject]
        // アクションを受け取るために設定
        cell.delegate = self

アクションをオーバーライドして実装する

    // 右からのスワイプ時のボタンのアクション
    func swipeableTableViewCell(cell: SWTableViewCell!, didTriggerRightUtilityButtonWithIndex index: Int) {
        switch index {
        case 0:
            print("Push Share Btn!")
        case 1:
            print("Push Archive Btn!")
        case 2:
            print("Push Delete Btn!")
        default:
            print("other")
        }
    }

      // 左からのスワイプ時のボタンのアクション
    func swipeableTableViewCell(cell: SWTableViewCell!, didTriggerLeftUtilityButtonWithIndex index: Int) {
        switch index {
        case 0:
            print("Push New Btn!")
        case 1:
            print("Push Edit Btn!")
        default:
            print("other")
        }
    }

はまったところ

let cell = table.dequeueReusableCellWithIdentifier("tableCell", forIndexPath: indexPath) as! SWTableViewCellで
キャストエラーが起きてちょっとはまったけど、ストーリーボードの設定をちゃんとしたら動いた。

Could not cast value of type 'UITableViewCell' (0x10e2b7540) to 'SWTableViewCell' (0x10cbf55c0).

最後に

このままだとスワイプした後にフォーカス外れても閉じないけど、きっと閉じる方法も用意されているんだろう・・・