Swift로 간단한 토스트 메시지 구현하기

iOS 앱에서 사용자에게 간단한 메시지를 보여주기 위해 토스트(Toast) 메시지를 구현하는 방법을 소개해본다.

토스트 메시지는 Android에서 흔히 사용되는 UI 패턴인데 iOS에서는 기본적으로 제공되지 않기 때문에 직접 구현해야 한다.

구현 코드

아래는 UIView를 확장하여 토스트 메시지를 구현한 코드이다.

import UIKit
import SnapKit

extension UIView {
    func showToast(message: String, duration: TimeInterval = 2.0) {
        
        // 토스트 표시할 Label 생성
        let label = UILabel()
        label.backgroundColor = UIColor.black.withAlphaComponent(0.3)
        label.textColor = UIColor.white
        label.textAlignment = .center
        label.font = .mapoGoldenPier(16)
        label.text = message // 표시 할 메세지 설정
        label.alpha = 0.0 // 초기 투명도 (완전 투명)
        label.layer.cornerRadius = 10
        label.clipsToBounds = true
        
        // 토스트 뷰에 추가
        self.addSubview(label)
        
        // 제약 조건
        label.snp.makeConstraints {
            $0.centerX.equalToSuperview()
            $0.top.equalTo(self.safeAreaLayoutGuide.snp.top).offset(40)
            $0.width.equalToSuperview().multipliedBy(0.6)
            $0.height.equalTo(35)
        }
        
        // 애니메이션으로 토스트 메시지 표시
        UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveEaseIn, animations: {
            label.alpha = 1.0 // 0.5초 동안 투명도 1.0으로 변경되면서 서서히 나타남
        }, completion: { _ in
            
            // 토스트 메세지가 일정 시간동안 표시된 후 사라지는 애니메이션
            UIView.animate(withDuration: 0.5, delay: duration, options: .curveEaseOut, animations: {
                label.alpha = 0.0 // 0.5초 동안 투명도를 0.0으로 서서히 사라짐
            }, completion: { _ in
                label.removeFromSuperview() // 애니메이션 끝나면 Label을 뷰에서 제거함
            })
        })
    }
}

코드 설명

1. 토스트 메시지 Label 생성

   • UILabel을 생성하고, 배경색, 텍스트 색상, 폰트, 정렬 등을 설정한다.
   • alpha 값을 0.0으로 설정하여 초기에는 보이지 않게 한다.
   • cornerRadius와 clipsToBounds를 사용하여 라벨의 모서리를 둥글게 만든다.

2. 토스트 메시지 뷰에 추가

   • addSubview를 사용하여 토스트 메시지 라벨을 현재 뷰에 추가한다.

3. 제약 조건 설정

   • SnapKit을 사용하여 라벨의 위치와 크기를 설정한다.
   • 화면 상단에서 40포인트 아래에 위치하도록 설정하고, 너비는 화면의 60%로 지정한다.

4. 애니메이션으로 토스트 메시지 표시

   • UIView.animate를 사용하여 라벨이 서서히 나타나도록 한다.
   • alpha 값을 0.0에서 1.0으로 변경하여 페이드 인 효과를 준다.

5. 토스트 메시지 사라지는 애니메이션

   • 지정된 시간(duration)이 지난 후, 라벨이 서서히 사라지도록 한다.
   • alpha 값을 1.0에서 0.0으로 변경하여 페이드 아웃 효과를 준다.
   • 애니메이션이 완료되면 라벨을 뷰에서 제거한다.

사용 방법

아래는 showToast 메서드를 사용하는 예시이다.

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 버튼 생성 및 추가
        let button = UIButton(type: .system)
        button.setTitle("Show Toast", for: .normal)
        button.addTarget(self, action: #selector(showToastMessage), for: .touchUpInside)
        view.addSubview(button)
        
        // 버튼 제약 조건 설정
        button.snp.makeConstraints {
            $0.center.equalToSuperview()
        }
    }
    
    @objc func showToastMessage() {
        // 토스트 메시지 표시
        self.view.showToast(message: "Hello, Toast!")
    }
}

• 버튼을 탭하면 화면 상단에 "Hello, Toast!"라는 메시지가 나타난다.
• 메시지는 2초 동안 표시된 후 서서히 사라진다.

추가 개선 사항

1. 메시지 위치 조정

   • top.equalTo(self.safeAreaLayoutGuide.snp.top).offset(40) 부분을 수정하여 메시지의 위치를 조정할 수 있다.
   • 예를 들어 화면 하단에 표시하려면 bottom.equalTo(self.safeAreaLayoutGuide.snp.bottom).offset(-40)으로 변경한다.

2. 메시지 스타일 커스터마이징

   • 배경색, 텍스트 색상, 폰트 등을 원하는 대로 변경할 수 있다.

3. 다중 토스트 메시지 처리

   • 여러 개의 토스트 메시지가 동시에 표시되지 않도록 큐(queue)를 사용하여 관리할 수 있다.