본 포스트에서는 MarqueeLabel 라이브러리를 사용하여 배송 상태 애니메이션을 구현하는 방법을 알아보겠습니다. MarqueeLabel은 텍스트가 화면을 벗어나지 않고 자동으로 스크롤되도록 도와주는 라이브러리입니다.

1. MarqueeLabel 라이브러리 추가하기

먼저, MarqueeLabel을 프로젝트에 추가해야 합니다. 이를 위해 CocoaPods를 사용하겠습니다. Podfile에 다음과 같이 추가해주세요.

pod 'MarqueeLabel'

설치 후, pod install을 실행하여 의존성을 설치합니다.

2. MarqueeLabel 사용하기

MarqueeLabel을 사용하려면, MarqueeLabel 클래스의 객체를 생성하고, animationDelay 등의 속성을 설정해야 합니다. 아래는 MarqueeLabel을 사용하여 배송 상태를 표시하는 예시 코드입니다.

import UIKit
import MarqueeLabel

class DeliveryStatusViewController: UIViewController {
    
    @IBOutlet weak var statusLabel: MarqueeLabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // MarqueeLabel 생성 및 설정
        let marqueeLabel = MarqueeLabel(frame: CGRect(x: 0, y: 0, width: 200, height: 30))
        marqueeLabel.animationDelay = 3 // 애니메이션 지연 시간 설정
        marqueeLabel.marqueeType = .continuous // 무한 반복 애니메이션 설정
        marqueeLabel.text = "배송 중..." // 표시할 텍스트 설정
        marqueeLabel.textColor = UIColor.red // 텍스트 색상 설정
        marqueeLabel.textAlignment = .center // 텍스트 정렬 설정
        
        // 이전의 UILabel 대신 MarqueeLabel을 사용
        statusLabel = marqueeLabel
    }
}

위 코드에서는 MarqueeLabel을 statusLabel로 설정하여 배송 상태를 표시하고 있습니다. animationDelay 속성은 애니메이션 시작 시간을 지정하며, marqueeType 속성을 사용하여 애니메이션 효과를 설정할 수 있습니다. textColor와 textAlignment 등의 속성을 사용하여 텍스트의 색상과 정렬 방식을 설정할 수도 있습니다.

3. 주의 사항

• MarqueeLabel은 UILabel을 상속한 클래스이므로, UILabel 속성을 사용하는 방식으로 사용해야 합니다.
• 애니메이션이 작동하기 위해 MarqueeLabel의 부모 뷰의 크기를 충분히 넓게 설정해야 합니다.
• 화면 전환이나 뷰가 숨겨진 상태에서는 애니메이션 작동이 정지될 수 있습니다.

이제, MarqueeLabel을 이용하여 배송 상태 애니메이션을 구현할 수 있습니다. 참고로, MarqueeLabel은 다양한 customize 옵션을 제공하므로, 필요에 따라 커스텀 설정을 추가할 수 있습니다.

참고 자료

• MarqueeLabel Github 링크