文系プログラマの勉強ノート

スマホアプリ開発やデザインなどについて勉強したことをまとめています

【Xcode】iOS11からUITableViewのSwipe Actionが新しくなった

f:id:an3714106:20171023224043p:plain:w250
iOS11からUITableViewDelegateにSwipe Actionの新しいメソッドが追加されました。
これによって以下のことができるようになりました。
(iOS11以降限定です)

  • 左から右へのSwipe Actionを実装する
  • Swipe Actionに画像を表示する



使用イメージ

f:id:an3714106:20171023224331p:plain:w250
左から右へのSwipe Action使用例です。
こんな感じで文字の代わりにアイコンを表示できるようになりました!



f:id:an3714106:20171023224318p:plain:w250
こちらは従来通り右から左へのSwipe Action、文字を表示した場合です。
こちらもアイコンに変えることができます。



サンプルコード

上記の使用イメージで使用したソースコードです。
storyboardで適当なUITableViewControllerと紐づけてください。

class ViewController: UITableViewController {
    
    let dataSource = ["One", "Two", "Three"];
    
    override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return dataSource.count
    }
    
    override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = UITableViewCell(style: .default, reuseIdentifier: "Cell")
        cell.textLabel?.text = dataSource[indexPath.row]
        return cell
    }
    
    // iOS11以降
    // 右から左へスワイプ
    @available(iOS 11.0, *)
    override func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        
        let editAction = UIContextualAction(style: .normal,
                                            title: "Edit",
                                            handler: {(action: UIContextualAction, view: UIView, completion: (Bool) -> Void) in
            print("Edit")
            // 処理を実行完了した場合はtrue
            completion(true)
        })
        editAction.backgroundColor = UIColor(red: 101/255.0, green: 198/255.0, blue: 187/255.0, alpha: 1)
        
        let deleteAction = UIContextualAction(style: .destructive,
                                              title: "Delete",
                                              handler: { (action: UIContextualAction, view: UIView, completion: (Bool) -> Void) in
            print("Delete")
            // 処理を実行できなかった場合はfalse
            completion(false)
        })
        deleteAction.backgroundColor = UIColor(red: 214/255.0, green: 69/255.0, blue: 65/255.0, alpha: 1)
        
        return UISwipeActionsConfiguration(actions: [editAction, deleteAction])
    }
    
    // iOS11以降
    // 左から右へスワイプ
    @available(iOS 11.0, *)
    override func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        
        let favoriteAction = UIContextualAction(style: .normal,
                                                title: "Favorite",
                                                handler: { (action: UIContextualAction, view: UIView, completion: (Bool) -> Void) in
            print("Favorite")
            // 処理を実行完了した場合はtrue
            completion(true)
        })
        favoriteAction.backgroundColor = UIColor(red: 210/255.0, green: 82/255.0, blue: 127/255.0, alpha: 1)
        favoriteAction.image = UIImage(named: "ic_favorite")
        
        return UISwipeActionsConfiguration(actions: [favoriteAction])
    }
}