[swift] 82.MarqueeLabel을 이용한 실시간 환율 정보 효과 애니메이션 구현하기

15 Nov 2023

swift

안녕하세요! 이번에는 Swift에서 MarqueeLabel을 활용하여 실시간 환율 정보를 보여주는 효과 애니메이션을 구현하는 방법을 알려드리려고 합니다.

MarqueeLabel 소개

MarqueeLabel은 UILabel의 subclass로, 긴 텍스트를 자동으로 스크롤링하여 보여줄 수 있는 기능을 제공하는 라이브러리입니다. 텍스트가 화면에 다 보이지 않을 때 자동으로 스크롤링되며, 스크롤링 속도나 애니메이션 스타일을 커스터마이징할 수 있습니다.

MarqueeLabel 설치

MarqueeLabel을 사용하기 위해서는 먼저 Cocoapods를 통해 라이브러리를 설치해야 합니다. Podfile에 다음과 같이 추가해주세요.

pod 'MarqueeLabel'

그리고 터미널에서 다음 명령어를 실행하여 Cocoapods를 설치합니다.

$ pod install

MarqueeLabel 사용법

MarqueeLabel을 사용하고자 하는 View Controller에서 MarqueeLabel을 import해줍니다.

import MarqueeLabel

뷰 컨트롤러에서 MarqueeLabel 인스턴스를 생성하고 설정합니다. 이때 MarqueeLabel에 표시할 텍스트와 애니메이션 옵션을 설정합니다.

let marqueeLabel = MarqueeLabel(frame: CGRect(x: 0, y: 0, width: 200, height: 30))
marqueeLabel.text = "환율 정보"
marqueeLabel.scrollDuration = 15
marqueeLabel.animationCurve = .linear
marqueeLabel.fadeLength = 10
marqueeLabel.textAlignment = .center

생성한 MarqueeLabel을 원하는 위치의 뷰에 추가합니다.

view.addSubview(marqueeLabel)

애니메이션을 시작합니다.

marqueeLabel.restartLabel()

실시간 환율 정보 효과 애니메이션 구현

실시간 환율 정보를 표시하기 위해서는 환율 정보 API를 사용하여 데이터를 가져와야 합니다. 가져온 환율 정보를 MarqueeLabel의 text에 업데이트하는 작업을 일정 간격으로 반복하면서 효과적인 실시간 업데이트를 구현할 수 있습니다.

1. 환율 정보 API 호출

func fetchExchangeRate() {
    // 환율 정보 API 호출 및 데이터 파싱
    // 받아온 환율 정보를 텍스트로 업데이트
}

2. 일정 간격으로 API 호출 및 업데이트

override func viewDidLoad() {
    super.viewDidLoad()
    
    // 타이머를 이용하여 일정 간격으로 API 호출 및 업데이트
    Timer.scheduledTimer(timeInterval: 60, target: self, selector: #selector(fetchExchangeRate), userInfo: nil, repeats: true)
}

완성된 코드

import UIKit
import MarqueeLabel

class ViewController: UIViewController {
    
    let marqueeLabel = MarqueeLabel(frame: CGRect(x: 0, y: 0, width: 200, height: 30))
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        marqueeLabel.text = "환율 정보"
        marqueeLabel.scrollDuration = 15
        marqueeLabel.animationCurve = .linear
        marqueeLabel.fadeLength = 10
        marqueeLabel.textAlignment = .center
        
        view.addSubview(marqueeLabel)
        
        Timer.scheduledTimer(timeInterval: 60, target: self, selector: #selector(fetchExchangeRate), userInfo: nil, repeats: true)
    }
    
    @objc func fetchExchangeRate() {
        // 환율 정보 API 호출 및 데이터 파싱
        // 받아온 환율 정보를 텍스트로 업데이트
    }
    
    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()
        
        marqueeLabel.center = view.center
    }
}

이렇게 MarqueeLabel을 사용하여 실시간 환율 정보 효과 애니메이션을 구현할 수 있습니다. 환율 정보 API 호출 및 업데이트 로직은 본인의 환경에 맞게 구현해주시면 됩니다.

더 많은 커스터마이징 옵션 및 기능은 MarqueeLabel의 공식 문서를 참고해주세요. 링크