[swift] 50.MarqueeLabel을 이용한 새로운 이벤트 알림 스크롤 효과 구현하기

많은 앱에서는 새로운 이벤트나 알림을 사용자에게 효과적으로 전달하기 위해 공지사항을 화면에 스크롤하는 효과를 사용합니다. 이번에는 MarqueeLabel이라는 라이브러리를 이용하여, 이벤트 알림을 스크롤하는 효과를 구현해보겠습니다.

1. MarqueeLabel 라이브러리 설치하기

먼저, MarqueeLabel 라이브러리를 프로젝트에 추가해야 합니다. CocoaPods를 사용한다면, Podfile에 다음과 같이 추가해주세요.

pod 'MarqueeLabel', '~> 4.0'

그리고 터미널에서 프로젝트 폴더로 이동하여, 다음 명령어로 라이브러리를 설치합니다.

pod install

2. MarqueeLabel 사용하기

MarqueeLabel은 UILabel의 subclass로, 텍스트를 스크롤하는 효과를 주는 기능을 제공합니다. 먼저, MarqueeLabel을 사용하기 위해 다음과 같이 import문을 추가하세요.

import MarqueeLabel

다음으로, MarqueeLabel을 생성하여 화면에 추가하는 방법을 살펴보겠습니다. 다음 코드는 화면 상단에 스크롤되는 이벤트 알림을 추가하는 예제입니다.

let marqueeLabel = MarqueeLabel(frame: CGRect(x: 0, y: 0, width: UIScreen.main.bounds.width, height: 50))
marqueeLabel.text = "새로운 이벤트 알림입니다. 어서 확인하세요!"
marqueeLabel.textColor = UIColor.black
marqueeLabel.font = UIFont.systemFont(ofSize: 15)
marqueeLabel.type = .continuous
marqueeLabel.speed = .duration(10.0)
marqueeLabel.fadeLength = 10.0
marqueeLabel.trailingBuffer = 30.0

self.view.addSubview(marqueeLabel)

위 코드에서 frameMarqueeLabel의 위치와 크기를 설정하는 부분입니다. text에는 알림에 표시할 문자열을 입력하며, textColorfont는 텍스트의 색상과 폰트를 설정합니다. type은 스크롤 효과의 종류를 설정하며, speed는 스크롤 속도를 설정합니다. fadeLength는 시작과 끝 부분의 약간의 페이드 효과의 길이를 설정하며, trailingBuffer는 마지막 텍스트와 우측 경계 사이의 여백을 설정합니다.

3. 실행 및 결과 확인하기

위 코드를 실행하면, 화면 상단에 지정한 텍스트가 스크롤되는 효과를 확인할 수 있습니다. 텍스트가 스크롤되는 속도와 페이드 효과 등은 위에서 설정한 값에 따라 달라질 수 있습니다.

이렇게 MarqueeLabel을 사용하여 앱에서 이벤트 알림을 효과적으로 전달할 수 있습니다. 이러한 스크롤 효과를 추가하면 사용자들이 알림을 놓치지 않고 빠르게 확인할 수 있으므로, 사용자 경험을 향상시킬 수 있습니다.

References