[swift] NumberMorphView를 활용한 할 일 목록 애플리케이션 구현하기

29 Nov 2023

swift

소개

이번 프로젝트에서는 NumberMorphView를 사용하여 할 일 목록을 보여주는 애플리케이션을 구현할 예정입니다. NumberMorphView는 숫자를 부드럽게 변화시켜주는 커스텀 뷰로, 할 일 갯수를 동적으로 표시할 때 유용하게 사용할 수 있습니다.

NumberMorphView 소개

NumberMorphView는 CocoaPods를 통해 사용할 수 있습니다. 먼저 Podfile에 다음과 같이 추가합니다:

pod 'NumberMorphView'

그리고 터미널에서 pod install 명령어를 실행하여 패키지를 설치합니다.

NumberMorphView를 사용하기 위해 뷰 컨트롤러에서 다음과 같이 import합니다:

import NumberMorphView

NumberMorphView의 사용은 매우 간단합니다. 뷰를 인터페이스 빌더에서 추가하거나 코드로 생성한 후, 다음과 같이 값을 지정하면 됩니다:

numberMorphView.value = 10

애플리케이션 구현하기

이제 할 일 목록 앱을 구현해보겠습니다. 앱은 다음과 같은 기능을 제공할 것입니다:

할 일 추가하기: 사용자가 할 일을 추가할 수 있습니다.
할 일 완료하기: 사용자가 할 일을 완료할 수 있습니다.
할 일 목록 보기: 사용자가 현재 할 일 목록을 확인할 수 있습니다.

먼저, Todo라는 모델 클래스를 생성합니다. 이 클래스는 할 일의 제목과 완료 여부를 저장합니다:

class Todo {
    let title: String
    var isCompleted: Bool

    init(title: String) {
        self.title = title
        self.isCompleted = false
    }
}

다음으로, TodoListViewController를 구현합니다. 이 뷰 컨트롤러는 할 일 목록을 보여주는 역할을 합니다. NumberMorphView를 사용하여 할 일의 개수를 표시할 것입니다:

import UIKit
import NumberMorphView

class TodoListViewController: UIViewController {
    @IBOutlet weak var todoCountLabel: NumberMorphView
    @IBOutlet weak var tableView: UITableView

    var todoList: [Todo] = []

    override func viewDidLoad() {
        super.viewDidLoad()

        // NumberMorphView 초기화
        todoCountLabel.value = 0

        // UITableView 설정
        tableView.dataSource = self
        tableView.delegate = self
    }

    // 할 일 추가하기
    @IBAction func addTodoButtonTapped(_ sender: UIButton) {
        let alertController = UIAlertController(title: "할 일 추가", message: nil, preferredStyle: .alert)
        alertController.addTextField { textField in
            textField.placeholder = "할 일"
        }
        let addAction = UIAlertAction(title: "추가", style: .default) { [weak self] _ in
            if let title = alertController.textFields?.first?.text {
                let todo = Todo(title: title)
                self?.todoList.append(todo)
                self?.updateTodoCount()
                self?.tableView.reloadData()
            }
        }
        alertController.addAction(addAction)
        present(alertController, animated: true, completion: nil)
    }

    // 할 일 완료하기
    func completeTodo(at index: Int) {
        todoList[index].isCompleted = true
        tableView.reloadData()
    }

    // 할 일 개수 업데이트하기
    func updateTodoCount() {
        UIView.animate(withDuration: 0.5) { [weak self] in
            self?.todoCountLabel.value = self?.todoList.filter { !$0.isCompleted }.count ?? 0
        }
    }
}

// UITableView 데이터 소스 및 델리게이트 구현
extension TodoListViewController: UITableViewDataSource, UITableViewDelegate {
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return todoList.count
    }

    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: "TodoCell", for: indexPath)
        let todo = todoList[indexPath.row]
        cell.textLabel?.text = todo.title
        cell.accessoryType = todo.isCompleted ? .checkmark : .none
        return cell
    }

    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        completeTodo(at: indexPath.row)
    }
}

이제 할 일 목록 애플리케이션이 준비되었습니다. NumberMorphView를 사용하여 할 일 목록의 개수를 표시하고, 할 일을 추가하고 완료할 수 있습니다.

결론

이렇게 NumberMorphView를 활용하여 할 일 목록 애플리케이션을 구현해보았습니다. NumberMorphView를 사용하면 숫자를 부드럽게 변화시킬 수 있어 다양한 애플리케이션에서 활용할 수 있습니다. 관심 있는 분들은 CocoaPods를 통해 NumberMorphView를 설치하여 직접 사용해보시기 바랍니다.