[swift] NumberMorphView를 활용하여 타임라인 애플리케이션 구현하기

29 Nov 2023

swift

소개

이번 기술 블로그에서는 Swift의 NumberMorphView를 활용하여 타임라인 애플리케이션을 구현하는 방법에 대해 알아보겠습니다. NumberMorphView는 숫자를 부드럽게 애니메이션화하는 커스텀 뷰입니다. 이를 활용하여 타임라인 애플리케이션에서 날짜와 시간을 표시하고 업데이트하는 기능을 구현할 수 있습니다.

NumberMorphView란?

NumberMorphView는 애플리케이션에서 숫자를 부드럽게 애니메이션화하는 데 사용되는 커스텀 뷰입니다. 주로 타이머, 카운트다운 타이머, 타임라인 등에서 사용됩니다. 이 뷰는 숫자를 자연스럽게 증가 또는 감소시키는 애니메이션을 제공하여 시각적인 효과를 줄 수 있습니다.

타임라인 애플리케이션 구현

이제 NumberMorphView를 활용하여 간단한 타임라인 애플리케이션을 구현해보겠습니다.

프로젝트 설정

우선 Xcode에서 새로운 iOS 프로젝트를 생성합니다. 프로젝트 설정과 관련된 작업은 생략하겠습니다.

NumberMorphView 사용하기

NumberMorphView를 사용하기 위해 NumberMorphView 라이브러리를 프로젝트에 추가합니다. Cocoapods를 사용한다면 Podfile에 다음을 추가합니다:

pod 'NumberMorphView'

생성한 프로젝트 디렉토리에서 pod install 명령어를 실행하여 라이브러리를 설치합니다.

타임라인 데이터 표시

우리의 타임라인 애플리케이션에서는 현재 시간을 표시할 NumberMorphView를 사용합니다. 이를 위해 다음과 같이 코드를 작성해보겠습니다:

import NumberMorphView

class TimelineViewController: UIViewController {
  
  @IBOutlet weak var timeLabel: NumberMorphView!
  
  let dateFormatter: DateFormatter = {
    let formatter = DateFormatter()
    formatter.dateFormat = "HH:mm:ss"
    return formatter
  }()
  
  override func viewDidLoad() {
    super.viewDidLoad()
    
    // NumberMorphView 설정
    timeLabel.animationDuration = 0.5
    timeLabel.targetFont = UIFont.systemFont(ofSize: 40)
    
    // 타이머 설정
    let timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(updateTime), userInfo: nil, repeats: true)
    timer.fire()
  }
  
  @objc func updateTime() {
    let currentTime = Date()
    let formattedTime = dateFormatter.string(from: currentTime)
    
    // 시간 업데이트
    timeLabel.count(from: 0, to: Float(formattedTime), withDuration: 0.5)
  }
}

위의 코드에서는 NumberMorphView를 IBOutlet로 연결하고, 현재 시간을 표시하기 위해 updateTime() 메소드를 구현합니다. 타이머를 사용하여 1초마다 updateTime() 메소드가 호출되도록 설정합니다. NumberMorphView의 count(from:to:withDuration:) 메소드를 사용하여 시간을 자연스럽게 업데이트할 수 있습니다.

결론

이번 글에서는 Swift의 NumberMorphView를 활용하여 타임라인 애플리케이션을 구현하는 방법에 대해 알아보았습니다. NumberMorphView를 사용하면 숫자를 부드럽게 애니메이션화할 수 있어 타임라인 애플리케이션 같은 곳에서 유용하게 활용할 수 있습니다.

참고 자료

NumberMorphView GitHub 레포지토리

목차

소개