UITableView 스와이프 메뉴, 편집 모드 다루기

UITableView 스와이프 메뉴, 편집 모드 다루기 

UITableView Editing, Move, Delete

 

 

 

아이폰 모바일 앱 개발에서 UITableView를 안 다룰 수가 없습니다.

UITableView를 잘 다루면 UI 개발 반은 먹고 들어간다고 해도 과언이 아니지요 

오랜만에 테이블뷰를 이용하여 각 행의 삭제나 순서 이동 등 편집 기능을 개발하려고 했더니 변경된 내용들이 있길래 포스팅을 해봅니다.

물론 오래전에 변경됬지만 제가 늦게 안 거긴 합니다

 

 

 

스와이프 메뉴

UITableViewDelegate 메서드 중에 tableView:editingStyle:indexPath: 메서드 없이

self.tableView.setEditing(true, animated: true)만 하면 왼쪽에 -버튼은 나오는데 스와이프 메뉴는 안 나옵니다.

tableView:editingStyle:indexPath: 메서드를 내용 없이 구현만 해줘도 스와이프 메뉴(delete)가 나옵니다.

아래처럼 editingStyle이 delete일 때를 if문으로 구분하여 사용자가 삭제 버튼을 눌렀을 때 행해질 내용을 구현할 수 있습니다.

 

    public func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
     if editingStyle == .delete {
//        self.tableArray.remove(at: indexPath.row)
//        tableView.deleteRows(at: [indexPath], with: .fade)
     }
    }

 

 

tableView:editingStyle:indexPath:메소드만을 이용하면 스와이프 메뉴를 한 가지만 사용할 수 있습니다. 

여러 개의 스와이프 메뉴 생성하고 싶으시다면 지금부터의 내용을 살펴보시면 됩니다!

 

 

 

 

UITableViewRowAction

UITableViewRowAction을 사용하시면 가능하나 구현해보니 아래와 같은 워닝이 뜹니다!

'UITableViewRowAction' was deprecated in iOS 13.0: Use UIContextualAction and related APIs intead.

오랜만에 구현해보려고 했더니 depreated가 되었더군요 

구현 방법은 아래와 같았지만 패쓰합니다.

    public func tableView(_ tableView: UITableView, editActionsForRowAt indexPath: IndexPath) -> [UITableViewRowAction]? {

        let delete = UITableViewRowAction(style: .destructive, title: "Delete") { (action, indexPath) in
            // delete item at indexPath
            self.tableArray.remove(at: indexPath.row)
            tableView.deleteRows(at: [indexPath], with: .fade)
            print(self.tableArray)
        }

        let share = UITableViewRowAction(style: .default, title: "Share") { (action, indexPath) in
            // share item at indexPath
            print("I want to share: \(self.tableArray[indexPath.row])")
        }

        share.backgroundColor = UIColor.lightGray

        return [delete, share]

    }

 

 

 

 

UIContextualAction

UIContextualAction 이란 게 생겼습니다.

UITableViewRowAction보다 어떤 게 더 좋을지 한번 살펴봅니다.

일단 새로운 함수가 두 개 생겼습니다.

tableView: trailingSwipeActionsConfigurationForRowAt indexPath:
tableView: leadingSwipeActionsConfigurationForRowAt indexPath:

함수명만 보아도 뭔지 느낌이 옵니다.

첫 번째 함수는 오른쪽에서 왼쪽으로 스와이프 했을 때 보일 메뉴와 관련된 것이고

두 번째 함수는 왼쪽에서 오른쪽으로 스와이프 했을 때 보일 메뉴를 구현하는 곳입니다.

UITableViewRowAction보다 좋은 점은 이제 양쪽으로 스와이프 메뉴를 쉽게 구현할 수 있다는 것이겠네요

그리고 커스텀 이미지도 셋팅하기 편해서 시스템 이미지를 간편하게 사용 할 수도 있습니다.

시스템 이미지 관련해서도 나중에 포스팅하겠습니다.

이제는 UIContextualAction을 사용하여 왼쪽이든 오른쪽이든 여러 스와이프 메뉴를 만들 수가 있습니다.

public func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {

        let share = UIContextualAction(style: .normal, title: "Share") { action, view, completion in
            completion(true)
        }

        let delete = UIContextualAction(style: .destructive, title: "Delete") { [weak self] action, view, completion in
//            self?.langs.remove(at: indexPath.row)
//            tableView.deleteRows(at: [indexPath], with: UITableViewRowAnimation.automatic)
            completion(true)
        }

//        delete.image = #imageLiteral(resourceName: "trash")

        return UISwipeActionsConfiguration(actions: [delete, share])
    }
    
    public func tableView(_ tableView: UITableView, leadingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
        let like = UIContextualAction(style: .normal, title: "Like") { [weak self] action, view, completion in
            guard let `self` = self else {
                return
            }
//            self.langs[indexPath.row].liked = !self.langs[indexPath.row].liked
            completion(true)
        }

//        like.image = langs[indexPath.row].liked ? #imageLiteral(resourceName: "filledLike") : #imageLiteral(resourceName: "like")
        like.backgroundColor = UIColor.darkGray

        return UISwipeActionsConfiguration(actions: [like])
    }

 

 

 

이동

UITableViewDataSource의 tableView:sourceIndexPath:destinationIndexPath 함수를 구현해주면 

테이블뷰 우측에 이동 메뉴가 표시됩니다.

sourceIndexPath로 들어오는 값이 선택한 행의 위치이고

destinationIndexPath로 들어오는 값이 옮겨진 위치입니다.

해당값을 가지고 원하시는 내용을 구현하시면 됩니다.

func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
    }