[iOS - swift] UITableView의 편집모드 사용 방법 (셀 삭제, 셀 이동, canEditRowAt, editingStyleForRowAt, commit, canMoveRowAt, moveRowAt)

셀 삭제 기능 활성화 방법

• UITableView의 편집모드 중 셀 삭제 - UITableView에서 아무것도 설정 안하고 수정모드에 들어가면 UI는 모두 활성화
  • 버튼에서 tap()이 눌렸을 때 tableView.setEditing(animated:)로 편집모드 설정

@objc private func tap() {
    let shouldBeEdited = !tableView.isEditing
    tableView.setEditing(shouldBeEdited, animated: true)
    editButton.isSelected = shouldBeEdited
}

• 왼쪽에 삭제 UI 버튼이 노출되고, 삭제 버튼을 눌러도 아무런 반응이 없는 상태

• 셀 삭제 기능 활성화 - delegate 할당

tableView.delegate = self

• canEditRowAt에서 삭제 UI가 표출될 셀 지정

extension ViewController: UITableViewDelegate {
    func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
        indexPath.row > 2
    }
}

• Editing 모드에 들어가면 위에서 true를 리턴한 셀들만 삭제 UI 노출
  • (단, 아직 삭제 버튼을 눌러도 아무런 반응 x)

• editingStyleForRowAt에서 editing 스타일 지정 (삭제, 추가, none)

func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCell.EditingStyle {
    indexPath.row > 2 ? .delete : .none
}

• commit 메소드를 추가하면 마침내 delete 버튼을 눌렀을때 오른쪽에 DELETE가 등장

func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
    
}

• 데이터소스로 사용하고 있는 배열에서 삭제하고, UI에 있는 셀까지 deleteRows(at:with:)으로 삭제하면 반영 완료

func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
    guard editingStyle == .delete else { return }
    items.remove(at: indexPath.row)
    tableView.deleteRows(at: [indexPath], with: .fade)
}

셀 이동 기능 활성화 방법

• canMoveRowAt에서 이동 가능한 셀 지정
  • 아직 여기까지해도 편집모드에 들어갔을때 move 버튼이 보이지 않음

func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
    indexPath.row > 2
}

• moveRowAt을 추가하면 마침내 move 버튼(햄버거버튼)이 노출

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

• 셀을 놓았을 때 특정 셀에는 이동이 안되게끔 하고싶은 경우, targetIndexPathForMoveFromRowAt 추가

// ex) 셀이 위로는 이동 불가능하고 아래로만 이동시킬수 있는 코드
func tableView(_ tableView: UITableView, targetIndexPathForMoveFromRowAt sourceIndexPath: IndexPath, toProposedIndexPath proposedDestinationIndexPath: IndexPath) -> IndexPath {
    guard sourceIndexPath.row < proposedDestinationIndexPath.row else { return sourceIndexPath }
    return proposedDestinationIndexPath
}

정리

• 셀 삭제, 셀 이동 모두 UITableViewDelegate 에서 처리
• 셀 삭제 활성화
  • canEditRowAt에서 수정 가능한 셀 지정
  • editingStyleForRowAt에서 delete 스타일 지정
  • commit에서 삭제했을때 데이터 소스에 반영

// delegate
func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
    indexPath.row > 2
}
func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCell.EditingStyle {
    indexPath.row > 2 ? .delete : .none
}
func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
    guard editingStyle == .delete else { return }
    items.remove(at: indexPath.row)
    tableView.deleteRows(at: [indexPath], with: .fade)
}

• 셀 이동 활성화
  • canMoveRowAt에서 이동가능한 셀 지정
  • moveRowAt을 선언만해도 move 버튼 (햄버거버튼) 등장
  • targetIndexPathForMoveFromRowAt에서 이동이 안되게끔할 셀 지정

func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
    indexPath.row > 2
}
func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
    
}
// ex) 셀이 위로는 이동 불가능하고 아래로만 이동시킬수 있는 코드
func tableView(_ tableView: UITableView, targetIndexPathForMoveFromRowAt sourceIndexPath: IndexPath, toProposedIndexPath proposedDestinationIndexPath: IndexPath) -> IndexPath {
    guard sourceIndexPath.row < proposedDestinationIndexPath.row else { return sourceIndexPath }
    return proposedDestinationIndexPath
}

* 전체 코드: https://github.com/JK0369/ExTableViewEditing