[swift] NumberMorphView를 이용한 타이머 애플리케이션 구현 방법 알아보기

29 Nov 2023

swift

Swift에서 NumberMorphView를 활용하여 타이머 애플리케이션을 구현해보겠습니다.

NumberMorphView란?

NumberMorphView는 숫자를 부드럽게 전환하고 애니메이션을 지원해주는 사용자 정의 뷰입니다. 이를 활용하여 타이머의 시간을 표시할 수 있습니다.

NumberMorphView 설치하기

NumberMorphView를 사용하기 위해서는 Cocoapods를 이용하여 설치해야 합니다. Podfile에 다음 내용을 추가한 후 터미널에서 pod install 명령을 실행합니다.

pod 'NumberMorphView'

타이머 애플리케이션 구현하기

먼저, NumberMorphView를 사용할 뷰 컨트롤러를 생성합니다. 이 뷰 컨트롤러에는 NumberMorphView와 시작/중지 버튼이 필요합니다.
뷰 컨트롤러의 viewDidLoad() 메서드에서 NumberMorphView를 초기화하고 적절한 위치와 크기로 추가합니다.

import NumberMorphView

class TimerViewController: UIViewController {

    let numberMorphView = NumberMorphView()
    let startStopButton = UIButton()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // NumberMorphView 초기화 및 추가
        numberMorphView.frame = CGRect(x: 50, y: 100, width: 200, height: 50)
        numberMorphView.textColor = .white
        numberMorphView.font = UIFont.systemFont(ofSize: 24, weight: .bold)
        numberMorphView.contentMode = .right
        numberMorphView.morphingEnabled = true
        self.view.addSubview(numberMorphView)
        
        // 시작/중지 버튼 설정
        startStopButton.frame = CGRect(x: 50, y: 200, width: 100, height: 50)
        startStopButton.setTitle("Start", for: .normal)
        startStopButton.setTitleColor(.systemBlue, for: .normal)
        startStopButton.addTarget(self, action: #selector(startStopButtonTapped), for: .touchUpInside)
        self.view.addSubview(startStopButton)
    }

    @objc func startStopButtonTapped() {
        // 타이머 시작 또는 중지 로직 작성
    }
}

시작/중지 버튼의 액션 메서드인 startStopButtonTapped()을 구현합니다. 타이머 시작/중지 로직을 작성하면 됩니다.

@objc func startStopButtonTapped() {
    if numberMorphView.isAnimating {
        numberMorphView.stop()
        startStopButton.setTitle("Start", for: .normal)
    } else {
        numberMorphView.start()
        startStopButton.setTitle("Stop", for: .normal)
    }
}

이제 TimerViewController를 적절한 방식으로 호출하여 사용할 수 있습니다. 이를 위해 AppDelegate.swift 파일에서 다음과 같이 수정합니다.

import UIKit

@UIApplicationMain
class AppDelegate: UIResponder, UIApplicationDelegate {

    var window: UIWindow?

    func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {

        // 루트 뷰 컨트롤러 설정
        let timerViewController = TimerViewController()
        window = UIWindow(frame: UIScreen.main.bounds)
        window?.rootViewController = timerViewController
        window?.makeKeyAndVisible()

        return true
    }
}

이제 앱을 실행하면 NumberMorphView와 시작/중지 버튼이 보이는 타이머 애플리케이션을 구현할 수 있습니다.

결론

Swift에서 NumberMorphView를 사용하여 타이머 애플리케이션을 구현하는 방법을 알아보았습니다. NumberMorphView를 이용하면 숫자 전환 애니메이션을 부드럽게 적용할 수 있습니다.