[iOS] Toaster 만들기

안녕하세요~!~! 5anniversary입니다!!

 

이번 시간에는 Toaster🍞를 만들어보려고 해요!!

 

제가 알기로는 안드로이드에서는 Toaster기능이 있는 걸로 아는데 아쉽게도 iOS에서는 없어요...ㅠㅜ 

 

사용자에게 특정한 이벤트가 일어났다는 것을 효과적으로 알려준다고 알고 있는 게 Toaster라고 알고 있는데 말이에요 😢

 

자 그럼 한번 Toaster를 만들어보도록 하죠!!

 

우선 저는 UIViewControlle의 extension으로 만들어줄 거예요!!

 

우선 이 메서드에서 들어가게 될 컴포넌트는 두 개에요!!

 

UILabel과 UIView에요

 

그리고 파라미터 값은 7가지에요!! 물론 사용하시는 분들이 마음대로 커스텀해서 바꿔주셔도 됩니다!!

 

파라미터값은

 

1. 텍스트에 들어갈 message

2. 사용하다 보니 정해진 값으로 들어가면 키보드 때문에 가려지더라고요 그래서 높이 조절을 위해 yAnchor를 받습니다!

3. textColor ~

4. textFont ~

5. backgrouncColor ~

6. backgroundRadius ~

7. toaster가 지속될 시간인 duration ~ 

 

이렇게 파라미터를 받아와서 처리해줍니다!!

 

    func showToast(_ message: String,
                   _ yAnchor: CGFloat,
                   _ textColor: UIColor,
                   _ textFont: UIFont,
                   _ backgroundColor: UIColor,
                   _ backgroundRadius: CGFloat,
                   _ duration: TimeInterval) {
                   
        let label = UILabel()
        let backgroundView = UIView()
        
        backgroundView.backgroundColor = backgroundColor.withAlphaComponent(0.6)
        backgroundView.layer.cornerRadius = backgroundRadius;
        label.textColor = textColor
        label.textAlignment = .center;
        label.font = textFont
        label.text = message
        label.alpha = 1.0
        label.clipsToBounds  =  true

        self.view.addSubview(backgroundView)
        self.view.addSubview(label)

        label.translatesAutoresizingMaskIntoConstraints = false
        label.centerXAnchor.constraint(equalTo: self.view.centerXAnchor).isActive = true
        label.bottomAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.bottomAnchor,
                                        constant: -yAnchor).isActive = true
        label.heightAnchor.constraint(equalToConstant: 40).isActive = true
        
        backgroundView.translatesAutoresizingMaskIntoConstraints = false
        backgroundView.topAnchor.constraint(equalTo: label.topAnchor).isActive = true
        backgroundView.leadingAnchor.constraint(equalTo: label.leadingAnchor,
                                                constant: -20).isActive = true
        backgroundView.trailingAnchor.constraint(equalTo: label.trailingAnchor,
                                                 constant: 20).isActive = true
        backgroundView.bottomAnchor.constraint(equalTo: label.bottomAnchor).isActive = true

        UIView.animate(withDuration: duration, delay: 0.1, options: .curveEaseOut, animations: {
            label.alpha = 0.0
            backgroundView.alpha = 0.0
        }, completion: {(isCompleted) in
            label.removeFromSuperview()
            backgroundView.removeFromSuperview()
        })
    }

 

제가 사용한 코드는 이렇게 구성이 되어있어요!!

 

여기서 label에 대한 값 혹은 view에 대한 값들을 변경하면 원하는 데로 Toaster를 커스텀해 사용하실수 있습니다!!