[UIKit] toast message 만들기

 

 

---

 

앱을 만들다보면 toast msg를 띄워서 정보를 주는 경우가 많은데 아쉽게도 iOS에는 그런 기능이 없다..

직접 만들자!

 

 

우선 UIView를 상속하는 class를 만들어 줍니다

public class ToastMessage: UIView {}

 

저는 요론 종류의 토스트 메세지를 만들거에요 (x는 제외)

그래서 이런 프로퍼티와 enum이 필요합니다

public enum ToastType {
    case common, alert, info
}

var text = UILabel()
var icon = UIImageView()
var type : ToastType

 

UI는 각자 취향껏 만드시고

(생략)

 

토스트 메세지의 특징은 잠깐 떴다 사라지는거 잖아요 ?

그 부분을 구현하기 위해 animate를 사용했습니다

 

animate

animate는 이렇게 생겼는데요,

class func animate(
    withDuration duration: TimeInterval,
    animations: @escaping () -> Void,
    completion: ((Bool) -> Void)? = nil
)

animations 부분에 클로저로 실행할 애니메이션을 작성합니다

withDuration은 animations을 실행시키는데 얼마정도의 시간을 소요할 것인지 입력합니다

초단위로 입력할 수 있어요!

completion에는 animations가 끝나고 나서 실행할 내용을 작성할 수 있습니다

 

저는 toast함수를 다음과 같이 작성해주었습니다

public func toast(){

    UIView.animate(withDuration: 0.5) {
        print("toast : \(self.text.text!)")
        self.isHidden = false
        self.alpha = 0.9
    } completion: { _ in
        UIView.animate(withDuration: 0.5, delay: 2) {
            self.alpha = 0
        } completion: { _ in
            self.isHidden = true
        }
    }

}

alpha는 0~1사이에 숫자를 입력하여 투명도를 조절합니다

(0에 가까울 수록 투명해져요)

이 함수는 0.5초에 거쳐서 투명도를 0.9로 올리고

애니메이션이 끝난 후에는 2초 후에 0.5초에 거쳐서 투명도를 0으로 만드는 것이에요

즉, 토스트 메세지가 2초 떴다가 사라진다는 거에요

 

isHidden을 써준 이유는 혹시나 toast msg 때문에 다른 view들이 방해받을까봐 작성해주었습니다~!

 

toast버튼을 눌렀을 때만 메세지를 띄우기 위해서

ToastMessage init부분에 다음과 같이 작성해줍니다

public init(type: ToastType){
    self.type = type
    super.init(frame: .zero)
    // 초기화 할 때 view 안보이게
    self.isHidden = true
    self.alpha = 0
}

 

 

ToastMessage를 사용할 뷰컨에서 toast()를 호출해주면 이렇게!

 

 

간단하게 띄울 수 있는 Toast Message를 구현해보았습니다 :)