[ Swift ] 간단한 토스트 메세지 구현하기 (feat.UILabel)

안녕하세요~

 

정말 오래간만에 블로그 포스팅을 합니다.

 

오늘은 간단하게 토스트 메시지를 구현하는 방법에 대해서 

정리하려고 합니다 : )

 

1. UILabel 커스텀하기

출처: Apple Developer

 

drawText(in:)은 Label의 text가 그려질 때

rect에 관한 값을 수정할 수 있는 메서드로 Override 해서 사용하시면 됩니다. 

이때, drawText(in:)에서 padding값을 설정하시게 되면 문자와 Label 사이에 공간이 생기고 

토스트 메세지 형태로 사용할 수 있습니다.

 

final class ToastLabel: UILabel {
    
    // 상하좌우의 얼마의 패딩값을 줄지 UIEdgeInsets 변수 생성
    private var padding = UIEdgeInsets(top: 8.0, left: 8.0, bottom: 8.0, right: 8.0)
    
    // intrinsicContentSize 재정의 후 사용
    override var intrinsicContentSize: CGSize {
        var contentSize = super.intrinsicContentSize
        contentSize.height += padding.top + padding.bottom
        contentSize.width += padding.left + padding.right

        return contentSize
    }
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setToastLabel()
    }
    
    // 앞서 말했던 drawText Override!
    override func drawText(in rect: CGRect) {
        super.drawText(in: rect.inset(by: padding))
    }
    
    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    private func setToastLabel() {
        // Text
        numberOfLines = 0
        textColor = .white
        textAlignment = .center
        // View
        backgroundColor = .black
        layer.cornerRadius = 10
        layer.masksToBounds = true
    }
}

 

2. Extension 사용하기 

사용하는 방법은 여러 가지가 있겠지만 간단한 프로젝트들을 테스트할 때는 이런 식으로 사용합니다.

extension UIViewController {

    func showToast(message: String) {
        let toastMessage = ToastLabel() // 앞서 만들었던 Custom Label
        toastMessage.text = message

        view.addSubview(toastMessage)
        toastMessage.snp.makeConstraints { make in
            make.width.lessThanOrEqualTo(UIScreen.main.bounds.width * 0.75)
            make.center.equalToSuperview()
        }

        UIView.animate(withDuration: 2, delay: 0, options: .curveEaseInOut) {
            toastMessage.alpha = 0
        } completion: { _ in
            toastMessage.removeFromSuperview()
        }
    }
}

 

 

3. 패딩 적용 전 모습

 

4. 패딩 적용 후 모습

 

 

개인 프로젝트하실 때 간단하게 사용할 수 있는 토스트 메시지 정리해봤습니다.

 

그럼 이만 👋🏻 👋🏻 👋🏻