[UITableView] Swipe Action을 구현하는 방법 (UISwipeActionsConfiguration, UIContextualAction)

1️⃣ Swipe Action 어떻게 구현하는데?

---

오늘 글은 테이블뷰에서 스와이프(밀기 동작)를 했을 때 보이는 액션인, Swipe Action을 구현하는 방법에 대해 알아보려 한다.

TableView (= CollectionView)를 구현할 때, Delegate와 DataSource 프로토콜을 필수로 채택하고 그에 따른 세부 내용을 구현해주는 것은 iOS 개발의 아주 기본적인 상식이라고 말할 수 있는데,

오늘 구현해줄 Swipe Action은 UITableViewDelegate에 구현되어 있다.

Apple 공식 문서를 살펴보면, Swipe Action은 2가지 형태로 구현해줄 수 있다고 한다.

하나는 왼쪽에서 액션을 주는 leadingSwipeActionsConfigurationForRow,
또 다른 하나는 오른쪽에서 액션을 주는 trailingSwipeActionsConfigurationForRow로 구분된다.

오늘은 예시로, 오른쪽에 액션을 주는 trailingSwipeActionsConfigurationForRow 메서드를 사용해서 구현해보겠다.
두 메서드 모두 UISwipeActionsConfiguration 객체를 반환하는 형태인데, 해당 객체는 인수로 UIContextualAction을 담아 같이 보내게 된다.

즉, SwipeAction을 구현하기 위해서는 UIContextualAction과 UISwipeActionsConfiguration에 대해 모두 이해할 필요가 있다.

 

2️⃣ 코드로 구현해보자!

---

UIContextualAction은 테이블 뷰 또는 컬렉션 뷰의 셀을 스와이프하거나 길게 눌렀을 때, 보여지는 액션을 정의할 수 있는 클래스다.

위에 보이는 것처럼 파라미터로 style, title, handler를 받아 액션을 정의하게 되는데,

• style은 .normal 타입과 .destructive타입 중 하나를 선택할 수 있고
• title은 화면에 표시하게 될 타이틀의 내용 (String)을,
• handler는 액션 선택시 호출하게 될 handler block으로 action, sourceView, completionHandler를 받아서 세부 내용을 구현해줄 수 있다.

let deletAction = UIContextualAction(style: .normal,
                                     title: "삭제") { (action, view, completionHandler) in
    // 삭제 동작에 대한 액션을 구현해 주는 부분
}

위에서 구현한 객체를 이제 UISwipeActionsConfiguration안에 담아줄 차례이다.
이때, swipeActions에 구현해줄 액션이 여러 개일 경우를 대비해서 Array 형태로 담도록 되어있으니, 액션이 하나이더라도 배열에 담아줘야 한다.

추가로 액션 화면에 보이는 배경색은 UIContextualAction으로 만든 상수와 연결해서 아래와 같이 선언할 수 있고,

swipeAction을 끝까지 되는 것을 막기 위해서는
UISwipeActionsConfiguration으로 만든 객체와 연결한 아래와 같은 코드를 한 줄 추가해주기만 하면 된다.

그러면 아래와 같은 동작이 최종적으로 가능해진다‼️

최종 구현 화면

 

3️⃣ 전체코드 확인!

---

func tableView(_ tableView: UITableView, 
               trailingSwipeActionsConfigrationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? {
    let deletAction = UIContextualAction(style: .normal,
                                         title: "삭제") { (action, view, completionHandler) in
        // 삭제 동작에 대한 액션을 구현해 주는 부분
    }
    deleteAction.backgroundColor = .red
    
    let swipeActions = UISwipeActionsConfiguration(actions: [deleteAction])
    swipeActions.performsFirstActionWithFullSwipe = false
    
    return swipeActions
}