이끼의 생각

iOS Toast 메세지 만들기 (3) 본문

Mobile App/iOS와 Swift

iOS Toast 메세지 만들기 (3)

IKKIson 2019. 4. 16. 16:50

앞서 보여준 2가지의 토스트 메세지와 다르게 이번에 만들 토스트 메시지는 커스텀 클래스로 만들 겁니다.

- 간단한 Toast 메세지 만들기(1) https://ikkison.tistory.com/12?category=761126

간단한 Toast 메세지 만들기(2) https://ikkison.tistory.com/13?category=761126

 

먼저 커스텀 클래스를 xcode 프로젝트에 생성합니다.

 

(1) ToastView

import UIKit

import Foundation
import UIKit

open class ToastView: UILabel {
    
    var overlayView = UIView()
    var backView = UIView()
    var lbl = UILabel()
    
    class var shared: ToastView {
        struct Static {
            static let instance: ToastView = ToastView()
        }
        return Static.instance
    }
    
    func setup(_ view: UIView,txt_msg:String)
    {
        let white = UIColor ( red: 1/255, green: 0/255, blue:0/255, alpha: 0.0 )
        
        backView.frame = CGRect(x: 0, y: 0, width: view.frame.width , height: view.frame.height)
        backView.center = view.center
        backView.backgroundColor = white
        view.addSubview(backView)
        
        overlayView.frame = CGRect(x: 0, y: 0, width: view.frame.width - 60  , height: 50)
        overlayView.center = CGPoint(x: view.bounds.width / 2, y: view.bounds.height - 100)
        overlayView.backgroundColor = UIColor.black
        overlayView.clipsToBounds = true
        overlayView.layer.cornerRadius = 10
        overlayView.alpha = 0
        
        lbl.frame = CGRect(x: 0, y: 0, width: overlayView.frame.width, height: 50)
        lbl.numberOfLines = 0
        lbl.textColor = UIColor.white
        lbl.center = overlayView.center
        lbl.text = txt_msg
        lbl.textAlignment = .center
        lbl.center = CGPoint(x: overlayView.bounds.width / 2, y: overlayView.bounds.height / 2)
        overlayView.addSubview(lbl)
        
        view.addSubview(overlayView)
    }
    
    open func short(_ view: UIView,txt_msg:String) {
        self.setup(view,txt_msg: txt_msg)
        //Animation
        UIView.animate(withDuration: 1, animations: {
            self.overlayView.alpha = 1
        }) { (true) in
            UIView.animate(withDuration: 1, animations: {
                self.overlayView.alpha = 0
            }) { (true) in
                UIView.animate(withDuration: 1, animations: {
                    DispatchQueue.main.async(execute: {
                        self.overlayView.alpha = 0
                        self.lbl.removeFromSuperview()
                        self.overlayView.removeFromSuperview()
                        self.backView.removeFromSuperview()
                    })
                })
            }
        }
    }
    
    open func long(_ view: UIView,txt_msg:String) {
        self.setup(view,txt_msg: txt_msg)
        //Animation
        UIView.animate(withDuration: 2, animations: {
            self.overlayView.alpha = 1
        }) { (true) in
            UIView.animate(withDuration: 2, animations: {
                self.overlayView.alpha = 0
            }) { (true) in
                UIView.animate(withDuration: 2, animations: {
                    DispatchQueue.main.async(execute: {
                        self.overlayView.alpha = 0
                        self.lbl.removeFromSuperview()
                        self.overlayView.removeFromSuperview()
                        self.backView.removeFromSuperview()
                    })
                })
            }
        }
    }
}

 

short 함수와 long 함수는 메세지가 보여지는 시간이 다릅니다. 기존 안드로이드의 Toast와 유사하며 커스텀인 만큼 Duration 시간을 자유롭게 바꾸면 좋습니다.

 

 

2. Toast Message 사용하기.

원하는 곳에 다음의 코드처럼 함수를 사용하면됩니다.

ToastView Class를 생성할 필요는 없이 바로바로 편하게 사용가능합니다.

ToastView.shared.short(self.view, txt_msg: "짧은 시간 토스트 메세지")
ToastView.shared.long(self.view, txt_msg: "긴 시간 토스트 메세지")
Comments