[ Project ] todoList 구현하기 #2

 

 

 

 

안녕하세요💚

어제는 todolist를 보여줄 테이블뷰과 todolist의 완료를 표시할 수 있는 체크 박스 버튼을 구현하였는데요.

[ Project ] todoList 구현하기 #1 

[ Project ] todoList 구현하기 #1

 

 

 

오늘은 취소선 구현과 todolist에 네비게이션 컨트롤러를 추가하여 edit 버튼과 add 버튼을 구현하였습니다.

또한 추가적으로 데이터 매니저 클래스를 만들어 데이터도 분리를 해주고,
todolist의 정렬을 바꾸어주는 기능도 구현을 해보았어요!!

시작해 봅시다✨

 

취소선 구현

todo 완료 시에 완료한 부분과 미완료한 부분의 구분을 위해서 취소선을 추가하고 글꼴 색을 바꾸어주었어요.

우선 취소선을 구현하기 위해서는 AttributedString에 대한 이해가 필요합니다!

 

 

AttributedString이란?

문자열, 문자열 각각의 요소, 문자열의 범위와 관련된 속성을 관리하는 것입니다. 문자열과 관련된 속성은 폰트나 폰트의 사이즈, 폰트 사이의 간격, 폰트 색상 등등을 이야기할 수 있습니다. 여기서 NSAttributedString 는 읽기 전용 속성 문자열에 대한, NSMutableAttributedString 은 수정 가능한 속성 문자열에 대한 프로그램 인터페이스를 선언합니다.

 

 

어쨌든 NSAttributedString은 문자열의 속성을 보여주거나 변경할 수 있다는 거죠!

 

 

[ NSAttributedString의 key 종류 ]

 

static let attachment: NSAttributedString.Key

The attachment for the text.

 

static let backgroundColor: NSAttributedString.Key

The color of the background behind the text.

 

static let baselineOffset: NSAttributedString.Key

The vertical offset for the position of the text.

 

static let cursor: NSAttributedString.Key

The cursor object.

 

static let expansion: NSAttributedString.Key

The expansion factor of the text.

Deprecated

 

static let font: NSAttributedString.Key

The font of the text.

 

static let foregroundColor: NSAttributedString.Key

The color of the text.

 

static let glyphInfo: NSAttributedString.Key

The name of a glyph info object.

 

static let kern: NSAttributedString.Key

The kerning of the text.

 

static let ligature: NSAttributedString.Key

The ligature of the text.

 

static let link: NSAttributedString.Key

The link for the text.

 

static let markdownSourcePosition: NSAttributedString.Key

The position in a Markdown source string corresponding to some attributed text.

 

static let markedClauseSegment: NSAttributedString.Key

The index of the marked clause segment.

 

static let obliqueness: NSAttributedString.Key

The obliqueness of the text.

Deprecated

 

static let paragraphStyle: NSAttributedString.Key

The paragraph style of the text.

 

static let shadow: NSAttributedString.Key

The shadow of the text.

 

static let spellingState: NSAttributedString.Key

The spelling state of the text.

 

static let strikethroughColor: NSAttributedString.Key

The color of the strikethrough.

 

static let strikethroughStyle: NSAttributedString.Key

The strikethrough style of the text.

 

static let strokeColor: NSAttributedString.Key

The color of the stroke.

 

static let strokeWidth: NSAttributedString.Key

The width of the stroke.

 

static let superscript: NSAttributedString.Key

The superscript of the text.

 

static let textAlternatives: NSAttributedString.Key

The alternatives for the text.

 

static let textEffect: NSAttributedString.Key

The text effect.

 

static let toolTip: NSAttributedString.Key

The tooltip text.

 

static let underlineColor: NSAttributedString.Key

The color of the underline.

 

static let underlineStyle: NSAttributedString.Key

The underline style of the text.

 

static let verticalGlyphForm: NSAttributedString.Key

The vertical glyph form of the text.

Deprecated

 

static let writingDirection: NSAttributedString.Key

The writing direction of the text.

 

출처 : https://developer.apple.com/documentation/foundation/nsattributedstring/key 에서 발췌

 

여기서 취소선을 구현하는 요소는 strikethroughStyle 입니다. 그래서 전 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
    }
}

 

attributeString이라는 변수에 NSMutableAttributedString(String: self) 인스턴스를 생성하고, 해당 인스턴스의 내부 함수인 addAttribute 함수를 사용해 취소선 스타일을 적용하였습니다.

 

todo를 완료하였을 때, 체크 박스가 체크되고 해제됨에 따라 취소선도 그어지고, 제거돼야 하니 취소선이 지워졌을 때의 메서드도 구현을 하였습니다.

 

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

 

이제 취소선을 대입해 봅시다. 어제 구현한 checkButton이 선택되고 해제됨에 따라 변화시켰던 checkButtonTapped 함수에 적용을 해보았어요. sender.isSelected 가 true라는 것은 Selected 함수가 활성화되었을 때이므로 checkButton을 누르면 비활성화 상태로 다시 만들어야겠죠?ㅎ

 

	@IBAction func checkButtonTapped(_ sender: UIButton) {
        if sender.isSelected {
            sender.isSelected = false
            todoText.textColor = UIColor.black
            todoText.font = UIFont.systemFont(ofSize:18)
            todoText.attributedText = todoText.text?.removeStrikeThrough()
        }else {
            sender.isSelected = true
            todoText.textColor = UIColor.darkGray
            todoText.font = UIFont.systemFont(ofSize:18)
            todoText.attributedText = todoText.text?.strikeThrough()
        }
    }

 

추가적으로 폰트의 색상도 변경을 해주었습니다.

 

구현한 화면

체크 박스 클릭시 취소선 생성 / 해제시 최소선 해제

 

 

 

네비게이션 컨트롤러를 사용한 Edit 버튼과 Add 버튼 구현

 

우선 네비게이션 컨트롤러부터 추가해 봅시다.

 

[ 네비게이션 컨트롤러 추가 방법 ]

이미 메인화면을 구현한 뒤에 네비게이션 컨트롤러를 설치하는 방법을 알아봅시다!

우선 Main.storyboard에서 추가하고 싶은 화면의 ViewController를 클릭한 다음

오른쪽 아래의 하단에 빨간 테두리 아이콘을 클릭한 후 Navigation Controller를 눌러주면 끝입니다!

 

네비게이션 Controller를 추가했다면, 이제 Edit 버튼을 생성해야겠죠?!

이것도 아주아주 쉬워요!!

 

[ 네비게이션 바에 버튼 추가하기 ]

 

 shift + cmd + L  단축키 눌러 아래의 화면이 뜬다면 검색창에 button 검색합니다!

Bar Button Item을 드래그하여 Navigation Item 아래에 위치하도록 잡은 후 놓기

 

위의 그림대로 출력이 되었다면, 아마 Right Bar Button Items 에는 이미 버튼이 하나가 있을 거예요!

만약 없다면 위의 방법을 똑같이 하여 Bar Button Items을 Left Bar Button Items 아래나 Right Bar Button Items 아래에 추가하시면 됩니다!!

 

저는 오른쪽에 Edit 버튼을 왼쪽에 Add 버튼을 추가하였어요!

 

Edit 버튼 구현하기

• Editting 모드로 변경하기
• Editting 모드로 변경되었을 때, 버튼 이름 변경하기

 

 

구현하고 싶은 Edit 버튼을 클릭한 후 Attribute 바의 System Item 을 Edit 로 구현하면 되는데요! 저는 Edit 버튼이 클릭되었을 때 Done으로 텍스트를 변경하고 싶어서 System Item 을 Custom 으로 Bar Item의 Title을 "Edit"으로 변경해 주었습니다.

EditButton을 눌렀을 때 Editing 모드와 Edit 버튼의 이름을 변경해 주기 위해서는 해당 버튼과 @IBOutlet / @IBAction을 연결을 해주어야 합니다. 

 

class ViewController: UIViewController {
    
    // editButton 연결
    @IBOutlet weak var editButton: UIBarButtonItem!
    
    @IBOutlet weak var date: UILabel!
    @IBOutlet weak var tableview: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setting()
        setTitle()
    }
    
    // edit Button이 눌렸을 때 버튼 이름 변경하기 -> 추가모드로 변환
    @IBAction func editButtonTapped(_ sender: UIBarButtonItem) {
        if self.tableview.isEditing {
            // editing 모드 비활성화
            self.editButton.title = "Edit"
            self.tableview.setEditing(false, animated: true)
        } else {
            // editing 모드 활성화
            self.editButton.title = "Done"
            self.tableview.setEditing(true, animated: true)
        }
    }
    
}

 

위의 코드와 같이 버튼과 ViewController를 연결하고, 버튼이 눌렸을 때 Editing 모드를 활성화하는 코드를 구현합니다.

추가적인 코드 설명은 아래와 같습니다.

 

• self.tableview.isEditing
  : 테이블 뷰가 editing 모드인지 아닌지를 출력하거나 입력하는 요소

 

• self.editButton.title = "Edit"
  : 버튼의 title을 변경

 

• self.tableview.setEditing(true, animated: true) 
  : 테이블 뷰를 Editing 모드로 활성화

 

 

구현한 화면

edit 버튼이 클릭됨에 따라 editing 화면으로 전환

 

 

 

Add 버튼 구현하기

• Editing 모드일 때만 Add 버튼 보이기

 

위의 Edit 버튼을 구현한 것과 동일하게 Add 버튼을 구현해 봅시다!

 

 

그림에서 보이지는 않지만 Edit 버튼 반대편에 Add 버튼이 존재합니다. 현재 보이지 않는 이유는 제가 Drawing 에 Hidden 을 체크해 뒀기 때문인데요?! 저는 Edit 모드일 때만 todo 리스트를 추가할 수 있었으면 좋겠어서 기본 화면에서는 버튼을 숨겨두었습니다. 그리고 System Item 에서 Add 를 선택해 주시면 됩니다!

 

class ViewController: UIViewController {
    
    @IBOutlet weak var editButton: UIBarButtonItem!
    @IBOutlet weak var addButton: UIBarButtonItem!

    @IBOutlet weak var date: UILabel!
    @IBOutlet weak var tableview: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        dataManager.makeListData()
        setting()
    }
    
    // edit Button이 눌렸을 때 버튼 이름 변경하기 -> 추가모드로 변환
    @IBAction func editButtonTapped(_ sender: UIBarButtonItem) {
        if self.tableview.isEditing {
            // editing 모드 비활성화
            self.editButton.title = "Edit"
            self.tableview.setEditing(false, animated: true)
            // addButton 비활성화 / 숨기기
            self.addButton.isEnabled = false
            self.addButton.isHidden = true
        } else {
            // editing 모드 활성화
            self.editButton.title = "Done"
            self.tableview.setEditing(true, animated: true)
            // addButton 활성화 / 보이기
            self.addButton.isEnabled = true
            self.addButton.isHidden = false
        }
    }
    
    // add Button이 눌렸을 때 얼럿창 띄우기
    @IBAction func addButtonTapped(_ sender: UIBarButtonItem) {
        
    }
}

 

위의 코드와 같이 해당 Add 버튼과 @IBOutlet / @IBAction 을 연결을 해주시고요! 우선 위에서 구현했던 editButtonTapped 함수에 각각 editing이 활성화되고 비활성화되었을 때, add버튼을 활성화하고 보이도록!  add버튼이 비활성화되고 보이지 않도록 구현을 하였습니다.

 

• self.addButton.isEnabled
  : 버튼이 활성화되는지 안 되는 지를 출력하거나 입력받는 요소

 

• self.addButton.isHidden
  : 버튼의 숨김모드를 활성화했는지 안 했는 지를 출력하거나 입력받는 요소

 

구현한 화면

Edit 버튼 눌렀을 때 add 버튼 활성화

Done 버튼이 눌렀을 때 add 버튼 비활성화

 

 

Add 버튼 눌렸을 때 얼럿창 띄우기

Add Button이 눌렸을 때, todoList를 추가하는 얼럿창을 구현해 봅시다. 얼럿창에는 title과 message와 텍스트 필드가 나오고 확인 버튼을 누르면 텍스트 필드가 추가가 되고, 취소를 누르면 텍스트 필드가 추가되지 않습니다.

 

    // add Button이 눌렸을 때 얼럿창 띄우기
    @IBAction func addButtonTapped(_ sender: UIBarButtonItem) {
    	// 얼럿 Controller를 사용한 얼럿창 생성
        let alert = UIAlertController(title: "Add", message: "해야 할 일을 입력해주세요.",
                                      preferredStyle: .alert)
        alert.addTextField{ tf in
        	// 텍스트 필드 안의 글
            tf.placeholder = "to do"
        }
        // 확인 액션 버튼 생성
        alert.addAction(UIAlertAction(title: "확인", style: .default, handler: { _ in
            // 텍스트 필드 글 받아오기
            guard let text = alert.textFields?[0].text else {return}
            if text != "" {
            	// 데이터 메니저를 통한 리스트 업데이트
                self.dataManager.updateTodoListData(text)
                // 테이블뷰의 데이터 리로드
                self.tableview.reloadData()
            }
        }))
        // 취소 액션 버튼 생성
        alert.addAction(UIAlertAction(title: "취소", style: .cancel, handler: nil))
        self.present(alert, animated: true, completion: nil)
    }

 

위의 addButtonTapped() 코드에 얼럿창을 추가하는 함수를 구현하였습니다.

어떤 의미인지 코드를 하나하나 뜯어봅시다!

 

• UIAlertController(title: "Add", message: "해야 할 일을 입력해 주세요.", preferredStyle: .aleart)
  : UIAlertController를 사용하여 얼럿창을 생성
    title (얼럿창의 이름), message (얼럿창의 제목 밑에 들어갈 메시지 문구), preferredStyle (. actionSheet와. alert 중 선택)

       -. actionSheet : 화면의 아래쪽에 위치한 창

       -. alert : 화면의 중간에 위치한 창 

 

• tf.placeholder = "to do"
  : 텍스트 필드의 placeholder 설정
    placeholder란? 텍스트를 적기 전에 보이는 글

 

• alert.addTextField {}
  : 얼럿 창에 TextField 추가

 

• alert.addAction()
  : 얼럿 창에 Action 추가

 

• UIAlertAction(title: "확인", style:. default, handler: { 클로저 })
  : UIAlertAction 추가
    title (얼럿 액션의 이름), style (. default,. cancel,. destructive 중 선택 ), handler(버튼으로 인해 수행될 작업 코드 추가)
  -. default : 일반적인 코드
  -. cancel : 실행 취소
  -. destructice : 강조하는 코드로 글씨 색상이 다름

 

• alert.textFields?[0].text
  : TextFields 란의 0부터 시작한 문자열 추출

 

• self.tableview.reloadData()
  : tableview 다시 리로드

 

• self.present(alert, animated: true, completion: nil)
  : 얼럿창 띄우기

 

 

구현한 화면

todolist 추가하기 버튼

todo list 취소하기 버튼

 

 

 

ListDataManager 클래스 생성

: 데이터를 보관하고 관리할 수 있는 ListDataManager 클래스를 생성하였습니다. 외부에서 todoList 데이터에 접근하지 못하도록 private로 구현하고, 함수를 통해 데이터를 추가하거나 삭제하거나 변경할 수 있도록 구현하였습니다.

 

class ListDataManager {
    private var todoListDataArray: [TodoData] = []
    
    func makeListData() {
        todoListDataArray = [
            TodoData(id: 0, title: "오이사기", isChecked: false),
            TodoData(id: 1, title: "헤드셋고치기", isChecked: false),
            TodoData(id: 2, title: "책사기", isChecked: false),
            TodoData(id: 3, title: "영양제 먹기", isChecked: false),
            TodoData(id: 4, title: "병원 방문", isChecked: false),
            TodoData(id: 5, title: "물 2L 마시기", isChecked: false),
            TodoData(id: 6, title: "강아지 산책 시키기", isChecked: false),
            TodoData(id: 7, title: "자기소개 하기", isChecked: false),
            TodoData(id: 8, title: "iOS 강의듣기", isChecked: false),
            TodoData(id: 9, title: "TIL 작성하기", isChecked: false),
            TodoData(id: 10, title: "알고리즘 문제 풀기", isChecked: false),
            TodoData(id: 11, title: "열공하기", isChecked: false),
        ]
    }
    
    func getTodoListData() -> [TodoData] {
        return todoListDataArray
    }
    
    func updateTodoListData(_ title: String) {
        let todo = TodoData(id: todoListDataArray.count + 1, title: title, isChecked: false)
        todoListDataArray.append(todo)
    }
    
    func deleteTodoListData(_ row: Int) {
        todoListDataArray.remove(at: row)
    }
    
    func insertTodoListData(_ row: Int, _ todoData: TodoData) {
        todoListDataArray.insert(todoData, at: row)
    }
}

 

 

 

네비게이션 Title에 UI Lable 추가하기

네비게이션 바가 추가되면서 원래 있던 제목이 아래로 밀려나게 되어서 네비게이션의 Title에 UILable을 추가하고 기존의 todoList는 삭제를 해주겠습니다.

 

class ViewController: UIViewController {
	
    override func viewDidLoad() {
        super.viewDidLoad()
        dataManager.makeListData()
        setting()
        setTitle()
    }
    
	// 네비게이션 title에 UILabel 추가하기
    func setTitle() {
        let title = UILabel(frame: CGRect(x: 0, y: 0, width: 200, height: 40))
        title.textAlignment = .center
        title.font = UIFont.init(name: "American Typewriter Bold", size: 29.0)
        title.text = "Todo List"
        self.navigationItem.titleView = title
    }
}

 

네비게이션 title에 UILabel을 추가하는 setTitle() 함수를 생성하고 viewDidLoad() 함수에 추가해 줍니다.

title을 UILabel로 구현하여 폰트와 텍스트, 정렬을 설정해 주고, 마지막에 titleView로 세팅을 해주었습니다.

 

 

 

Editing 모드에서 요소 삭제하기 / 요소 이동하기

Editing 모드는 tableView에서 설정이 되는 요소이기 때문에 저번 시간에 생성해 둔 본 클래스와 구분하여 UITableViewDataSource와 UITableViewDelegate 프로토콜을 채택한 확장 클래스에 구현을 해 줄 예정입니다.

 

extension ViewController: UITableViewDataSource, UITableViewDelegate {
   
    // editing 모드의 스타일
    func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCell.EditingStyle {
        return .delete
    }
    
    // editing 모드에서의 요소 삭제
    func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {
        if editingStyle == UITableViewCell.EditingStyle.delete {
            print("delete")
            self.dataManager.deleteTodoListData(indexPath.row)
            self.tableview.reloadData()
        }
    }
    
    // editing 모드에서의 row 이동구현
    func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {
        let todolistArray = dataManager.getTodoListData()
        let targetList: TodoData = todolistArray[sourceIndexPath.row]
        dataManager.deleteTodoListData(sourceIndexPath.row)
        dataManager.insertTodoListData(destinationIndexPath.row, targetList)
    }
    
}

 

우선 요소의 삭제를 구현하기 위해 editing Style 에 delete 를 추가해 주시고, commit editingStyle이 포함된 함수에서 삭제하는 요소를 구현해 줍니다. 배열에서 해당 요소를 삭제할 때는 위에서 생성한 배열 삭제 함수를 사용합니다. 또한 row의 이동을 구현하기 위해 이동시킬 배열의 데이터를 다른 곳에 저장해 둔 뒤 해당 배열을 저장된 데이터배열에서 삭제해 주고, 옮긴 곳에 배열을 추가합니다. 이 때도 또한 위에서 구현한 delete함수와 insert함수를 사용하여 구현합니다.  

 

• func tableView(_ tableView: UITableView, editingStyleForRowAt indexPath: IndexPath) -> UITableViewCell.EditingStyle {}
  : tableView의 편집모드를 설정할 수 있는 함수
  
  
• func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCell.EditingStyle, forRowAt indexPath: IndexPath) {}
  : tableView의 삽입과 삭제를 결정할 수 있는 함수
• func tableView(_ tableView: UITableView, moveRowAt sourceIndexPath: IndexPath, to destinationIndexPath: IndexPath) {}
  : tableView의 cell을 특정위치로 이동시킬 수 있는 함수

 

 

시연 영상

 

 

 

 

새로운 구현도 많이 해보고, 만드는 대로 쏙쏙 만들어져서 아주 즐거웠던 하루였어요.

처음엔 취소선 구현이 힘들어서 쩔쩔매다가 NSAttributedString부터 다시 공부를 하게 되었습니다. 더 자세하게 공부하여 다음 포스팅에서 업로드하도록 하겠습니다.ㅎ