ToDoList 앱 만들기 (3)

2024.03.19 - [◽️ Programming/T I L] - ToDoList 앱 만들기 (1)

2024.03.21 - [◽️ Programming/T I L] - ToDoList 앱 만들기 (2)

ToDoList 만들기 (3)

오늘은 새로 배운 MVC 패턴, 클래스 간 데이터 이동 등 강의를 통해 배운 내용을 이번 과제에 한번 녹여내보고 싶어 원래 만들었던 ToDoList 를 버리고 새로 다시 만들었다.

다시 만들면서 취소선 만들기 부분이 생각보다 이해가 되지 않는 부분이 있어 다른 분의 블로그를 참고하여 새로 공부를 다시 했다.

---

취소선 구현

먼저 원래 사용했던 UISwitch 를 토글하여 true/false 를 구한 후 이 값을 활용하여 사용하는 법보다 UIButton 을 사용하여 select 속성으로 변환 후 적용하는게 더욱 쉽고 간편하고 직관적이라고 생각해 UISwitch 를 버려 버렸다..

먼저 취소선을 설정하기 위한 중요한 개념은 AttributedString 이었다.

AttributedString은 문자열을 표현하는 객체로 텍스트 표시에 대한 다양한 속성을 정의하는 데 사용된다.

이 내용을 바탕으로 String을 확장하여 취소선을 넣어 줄 수 있도록 세팅하자

extension String {
    func strikeThrough() -> NSAttributedString {
        let attributeString = NSMutableAttributedString(string: self)
        attributeString.addAttribute(NSAttributedString.Key.strikethroughStyle, value: NSUnderlineStyle.single.rawValue, range: NSMakeRange(0, attributeString.length))
        return attributeString
    }
}

extension String {
  func removeStrikeThrough() -> NSAttributedString {
        let attributeString = NSMutableAttributedString(string: self)
        attributeString.addAttribute(NSAttributedString.Key.strikethroughStyle, value: 0 , range: NSMakeRange(0, attributeString.length))
        return attributeString
    }
} 

선을 넣는 strikeThrough 과 선을 제거하는 removeStrikeThrough 을 해줄 수 있는 함수를 설정한 뒤 이 내용을 IBAction 으로 연결한 checkButtonTapped 에 대입하여 적용시켜준다.

@IBAction func checkButtonTapped(_ sender: UIButton) {
        if sender.isSelected {
            sender.isSelected = false
            cellLabel.textColor = .black
            cellLabel.attributedText = cellLabel.text?.removeStrikeThrough()
        } else {
            sender.isSelected = true
            cellLabel.textColor = .black
            cellLabel.attributedText = cellLabel.text?.strikeThrough()
        }
    }

이렇게 되면 아래와 같이 버튼을 누를때 마다 해당되는 셀에 취소선이 생기게 된다 🙂

---

네비게이션 바를 활용하여 삭제(수정) 버튼 구현

네비게이션 바를 활용하여 자연스럽게 버튼을 넣어 깔끔한 ui 를 구성할 수 있다.

사진에 보이는 Edit 버튼을 활용하여 편집 모드로 들어가는 것을 구현해보자

생각보다 아주 간편하게 구현할 수 있다 이러한 편리 기능은 애플이 이미 구현을 다 해놨기 때문에

우리는 적절하게 잘 활용하기만 하면 된다.

@IBAction func editButtonTapped(_ sender: UIBarButtonItem) {
        if tableView.isEditing {
            editButton.title = "Edit"
            tableView.setEditing(false, animated: true)
        } else {
            editButton.title = "Done"
            tableView.setEditing(true, animated: true)
        }
    }

아까 추가한 Edit 버튼을 연결하여 하단의 내용을 넣어주기만 한다면 간편하게 편집 모드로 들어가 여러가지 행동을 할 수 있다.

사진과 같이 편집 모드로 들어가 삭제가 가능하지만 좌측으로 슬라이드해 삭제하는 편한 기능도 쉽게 넣어줄 수 있다.

 

func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCell.EditingStyle {
        return .delete
    }
    
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == .delete {
            tableView.beginUpdates()
            todoArray.remove(at: indexPath.row)
            tableView.deleteRows(at: [indexPath], with: .fade)
            tableView.endUpdates()
        }
    }

해당 내용을 넣어주면 간편하게 좌측으로 슬라이드 하여 삭제하기 구현 완료

---

오늘은 뭔가 원하는 만큼 진도를 나가지 못하고 잘 해결되지 않아 답답한 하루였다.. 심적으로 조금 힘든하루 였달까.. ㅎㅎ 근데 이러한 과정이 있어야 발전할 수 있다고 생각하니 이정도는 가뿐하다!

내일은 좀 더 깊은 내용을 구현하고 공부할 수 있도록 더욱 노력해야지 🙂