[swift] 52.MarqueeLabel을 이용한 메일 제목 텍스트 애니메이션 구현하기

15 Nov 2023

swift

소개

MarqueeLabel은 텍스트를 자동으로 스크롤하여 화면에 보여주는 라이브러리로, 긴 텍스트를 보여줄 때 유용하게 사용됩니다. 이번 블로그 포스트에서는 MarqueeLabel을 사용하여 메일 제목 텍스트 애니메이션을 구현하는 방법을 소개하겠습니다.

필수 조건

Xcode 12.0 이상
Swift 5.0 이상

설치

MarqueeLabel은 CocoaPods를 통해 설치할 수 있습니다. Podfile에 다음과 같이 추가한 후 pod install 명령어를 실행해주세요.

pod 'MarqueeLabel'

사용 방법

먼저, MarqueeLabel을 사용할 UIViewController에서 MarqueeLabel을 import 해주세요.

import MarqueeLabel

이제 MarqueeLabel이 포함될 UIView를 생성합니다. Interface Builder에서 UIView를 추가하거나 코드로 생성할 수 있습니다.

let marqueeLabel = MarqueeLabel(frame: CGRect(x: 0, y: 0, width: 200, height: 20))

UIView에 MarqueeLabel을 추가합니다.

yourView.addSubview(marqueeLabel)

MarqueeLabel에 텍스트를 설정합니다.

marqueeLabel.text = "메일 제목"

애니메이션 속도와 방향을 설정합니다.

marqueeLabel.speed = .rate(50)
marqueeLabel.trailingBuffer = 30
marqueeLabel.animationCurve = .easeInOut

MarqueeLabel의 시작과 종료 지점을 설정합니다.

marqueeLabel.fadeLength = 10
marqueeLabel.leadingBuffer = 30

MarqueeLabel의 속성을 설정한 후에는 애니메이션을 시작해야 합니다.

marqueeLabel.restartLabel()

예제 코드

다음은 MarqueeLabel을 사용하여 메일 제목 텍스트 애니메이션을 구현한 예제 코드입니다.

import UIKit
import MarqueeLabel

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        let yourView = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 30))
        self.view.addSubview(yourView)

        let marqueeLabel = MarqueeLabel(frame: CGRect(x: 0, y: 0, width: 200, height: 20))
        marqueeLabel.text = "메일 제목"
        marqueeLabel.speed = .rate(50)
        marqueeLabel.trailingBuffer = 30
        marqueeLabel.animationCurve = .easeInOut
        marqueeLabel.fadeLength = 10
        marqueeLabel.leadingBuffer = 30

        yourView.addSubview(marqueeLabel)
        marqueeLabel.restartLabel()
    }
}

결론

MarqueeLabel을 사용하면 긴 텍스트를 자동으로 스크롤하여 애니메이션을 구현할 수 있습니다. 이를 이용하여 메일 제목과 같은 텍스트를 효과적으로 보여줄 수 있습니다.

참고 자료

MarqueeLabel GitHub 페이지