[iOS] Swift로 TodoList App 만들기(4) - 편집 모드(셀 이동)

 

오늘은 과제 마무리를 해야 하는 날이라 어제 구현하던 카테고리 작업을 완료하려고 했지만 데이터 전달에 계속 문제가 생겨 하루종일 잡고 있다가 결국 포기했다...🥲 그래도 열심히 도전하고 시도한 것에 의의를 둬봅니다,,

뷰컨 간 데이터 전달에 대해 더 공부하고 다시 수정해볼 예정!!

 

그래서 오늘은 카테고리 데이터를 계속 수정하다가

다른 기능이라도 추가하기 위해  Edit 버튼을 추가하여 편집모드 기능이 되도록 구현했다.

• Edit 버튼➕ Done 버튼
• 테이블 뷰의 행의 위치 이동 및 삭제 

 

Edit Button

 

NavigationBarButton에 편집 모드 전환을 위한 Edit 버튼을 추가해주고 편집 모드 종료를 위한 버튼인 doneButton까지 추가했다.

뷰가 로드될 때 편집 모드 종료에 필요한 doneButton을 초기화해주는 과정도 해주기!

 

 

tapEditButton

✔️ editButton을 통해 사용자가 편집 모드로 전환하고 doneButton을 통해 편집 모드를 종료

// MARK: - edit 버튼
@objc func doneButtonTap() {
    self.navigationItem.rightBarButtonItem = self.editButton
    self.todoTableView.setEditing(false, animated: true)
}

@IBAction func tapEditButton(_ sender: UIBarButtonItem) {
    guard !self.todoData.isEmpty else { return }
    self.navigationItem.rightBarButtonItem = self.doneButton
    self.todoTableView.setEditing(true, animated: true)
    
}

• tapEditButton(_:): editButton이 탭되었을 때 호출되는 IBAction 메서드
• 👉이 메서드에서는 todoData 배열이 비어있지 않은 경우에만 Navigation Bar의 오른쪽 버튼을 doneButton으로 변경하고, todoTableView의 편집 모드를 활성화

• doneButtonTap(): doneButton이 탭되었을 때 호출되는 메서드
• 👉Navigation Bar의 오른쪽 버튼을 editButton으로 변경하고, todoTableView의 편집 모드를 비활성화

 

moveRowAt

✔️ moveRowAt이란? 사용자가 테이블 뷰의 특정 행을 다른 위치로 이동할 수 있는 기능

// MARK: - 할일의 순서를 바꿀 수 있는 기능 구현
func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
    return true
}
// move row at:행이 다른 위치로 변경되면, souceIndexPath 파라미터를 통해 어디에 있었는지 알려주고, destinationIndexPath 파라미터를 통해 어디로 이동했는지 알려줌
func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
    var todos = self.todoData
    let todo = todos[sourceIndexPath.row]
    todos.remove(at: sourceIndexPath.row)
    todos.insert(todo, at: destinationIndexPath.row)
    self.todoData = todos
}

• tableView(_: canMoveRowAt:): 지정된 행을 이동할 수 있는지 여부를 결정
• 👉이 메서드에서는 todoData 배열이 비어있지 않은 경우에만 Navigation Bar의 오른쪽 버튼을 doneButton으로 변경하고, todoTableView의 편집 모드를 활성화

• tableView(_: moveRowAt:): 테이블 뷰의 특정 행을 다른 위치로 이동할 때 호출
• 👉 이동한 행의 인덱스와 목적지로 이동할 인덱스가 전달
  
  • sourceIndexPath에 있는 행의 todo 객체를 배열에서 제거
  • destinationIndexPath로 이동할 위치에 todo 객체를 추가
  • 변경된 todoData 배열을 업데이트

테이블 뷰의 특정 행을 드래그하여 다른 위치로 이동할 수 있게 되며 행을 이동하면 해당하는 todoData 배열도 업데이트되어 순서가 변경된다.

 

 

결과 화면

 

이제 실행해보면 Edit 버튼을 눌러 편집 모드로 변경 후  좌측 삭제 버튼 기능과 우측 순서 변경 기능을 사용할 수 있다!

 

이렇게 마무리하고 과제 제출 후 리드미까지 작성했다. 

전체 코드는 깃허브에 업로드 해뒀습니다~!🤗

• 🔗GitHub Link