[iOS] TableView Swipe 기능 구현

아래 메모장 앱에서 Swipe기능까지 추가하여 해당 셀을 삭제하도록 만들어주었다.

https://org9899.tistory.com/76

[iOS] TableView를 이용한 메모장 만들기

UISwipeActionsConfiguration

테이블 뷰의 각 cell에 Swipe해서 Action을 설정하려면, UITableViewDelegate에 있는
func tableView(_ tableView: UITableView, trailingSwipeActionsConfigurationForRowAt indexPath: IndexPath) -> UISwipeActionsConfiguration? 메서드를 사용하면 된다.

어떤 cell을 trailing swipe(오른쪽 -> 왼쪽) 했을 때의 action을 정해주는 메서드라고 보면된다. 이 메서드는UISwipeActionsConfiguration?을 반환하는데, 이 클래스의 정의는 "테이블의 row(행)을 스와이프할 때 수행할 action의 집합 (set)"이라고 되어 있다.
그래서 trailing 메서드 안에서 이 UISwipeActionsConfiguration?라는 set 안에 들어갈 원하는 action들을 추가해주고 리턴해주면 된다.

 

UIContextualAction

이 UISwipeActionsConfiguration?에 추가될 action들은 UIContextualAction 타입으로 생성한다.

UIContextualAction의 정의를 보면 "사용자가 테이블의 row(행)을 스와이프 할 때 표시할 작업(action)"이라고 나와있다.

 

처음에 추가했던 코드는 아래 코드였는데, 테이블뷰셀은 지웠는데 데이터소스에서는 memodatamodel의 count로 알고있어서 갯수를 맞춰주지않아서 오류가 났었다.

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

        let delete = UIContextualAction(style: .normal, title: "") { [self] (_, _, success: @escaping (Bool) -> Void) in
                          // 원하는 액션 추가   
                tableView.deleteRows(at: [indexPath], with: .fade)
                success(true)
            }

                // 각 ContextualAction 대한 설정
                delete.backgroundColor = .systemRed
                delete.image = UIImage(systemName: "trash.fill")

               // UISwipeActionsConfiguration에 action을 추가하여 리턴
               return UISwipeActionsConfiguration(actions: [delete])
}

[오류화면]

- 아래 화면처럼 삭제 스와이프가 동작이 되려다가 말았던 문제가 있었다.

 

아래 두개의 코드를 추가해주어, 셀이 삭제될때 메모 데이터의 갯수도 같이 삭제하여 갯수를 맞춰주고, 개수를 업데이트하여 화면에 표시되도록 하였다.

self.MemoData.remove(at: indexPath.row) // 셀 삭제될때 해당 MemoData도 같이 지워서 갯수를 맞춰줘야 오류가 나지않음.
cellCountLabel.text = String(MemoData.count) // 셀 삭제될때마다 개수 업데이트

 

• 추가한 코드

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

        let delete = UIContextualAction(style: .normal, title: "") { [self] (_, _, success: @escaping (Bool) -> Void) in
                          // 원하는 액션 추가
                self.MemoData.remove(at: indexPath.row) // 셀 삭제될때 해당 MemoData도 같이 지워서 갯수를 맞춰줘야 오류가 나지않음.
                tableView.deleteRows(at: [indexPath], with: .fade)
                cellCountLabel.text = String(MemoData.count) // 셀 삭제될때마다 개수 업데이트
                success(true)
            }

                // 각 ContextualAction 대한 설정
                delete.backgroundColor = .systemRed
                delete.image = UIImage(systemName: "trash.fill")

               // UISwipeActionsConfiguration에 action을 추가하여 리턴
               return UISwipeActionsConfiguration(actions: [delete])
}

 

 

 

• 시연화면

 

• 참고

https://velog.io/@marisol/UITableViewCell%EC%97%90-Swipe-%EA%B8%B0%EB%8A%A5-%EC%B6%94%EA%B0%80%ED%95%98%EA%B8%B0

UITableViewCell에 Swipe 기능 추가하기

 

[Git]

- standard, challenge4 참고

https://github.com/Eunice991217/UMC_3rd-iOS

GitHub - Eunice991217/UMC_3rd-iOS: sejong UMC 3rd iOS-study

 

좋아요2

공유하기

통계

게시글 관리