ToastView

//
//  ToastView.swift
//  Booster
//
//  Created by hiju on 2021/11/29.
//

import UIKit

final class ToastView: UIView {
    private let leftImageView: UIImageView = {
        let imageView = UIImageView()
        imageView.contentMode = .scaleAspectFit
        imageView.tintColor = .boosterOrange
        return imageView
    }()
    private let toastLabel: UILabel = {
        let label = UILabel()
        label.textColor = .boosterLabel
        label.font = .notoSansKR(.medium, 20)
        label.lineBreakMode = .byCharWrapping
        label.numberOfLines = 5
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)

        configureInitialSetting()
    }

    required init?(coder: NSCoder) {
        super.init(coder: coder)

        configureInitialSetting()
    }

    func configureUI(message: String, image: UIImage) {
        toastLabel.text = message
        toastLabel.sizeToFit()
        leftImageView.image = image
    }

    func labelHeight() -> CGFloat {
        return toastLabel.frame.size.height
    }

    private func configureInitialSetting() {
        backgroundColor = .boosterEnableButtonGray
        layer.cornerRadius = frame.size.height / 4

        addSubview(toastLabel)
        addSubview(leftImageView)

        leftImageView.translatesAutoresizingMaskIntoConstraints = false
        leftImageView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        leftImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 15).isActive = true
        leftImageView.widthAnchor.constraint(equalToConstant: frame.size.width / 8).isActive = true
        leftImageView.heightAnchor.constraint(equalToConstant: frame.size.width / 8).isActive = true

        toastLabel.translatesAutoresizingMaskIntoConstraints = false
        toastLabel.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
        toastLabel.leadingAnchor.constraint(equalTo: leftImageView.trailingAnchor, constant: 15).isActive = true
        toastLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -20).isActive = true
    }
}

func showToastView(message: String, isOnTabBar: Bool = false, image: UIImage = .caution) {
        let toastView = ToastView.init(frame: CGRect(x: 30,
                                                     y: frame.size.height,
                                                     width: frame.size.width - 60,
                                                     height: 80))
        toastView.configureUI(message: message, image: image)

        self.addSubview(toastView)

        toastView.translatesAutoresizingMaskIntoConstraints = false
        toastView.leadingAnchor.constraint(equalTo: self.leadingAnchor, constant: 30).isActive = true
        toastView.trailingAnchor.constraint(equalTo: self.trailingAnchor, constant: -30).isActive = true
        toastView.heightAnchor.constraint(equalToConstant: toastView.labelHeight() + 80).isActive = true
        toastView.topAnchor.constraint(equalTo: self.bottomAnchor).isActive = true

        let options = KeyframeAnimationOptions(rawValue: AnimationOptions.curveEaseInOut.rawValue)
        UIView.animateKeyframes(withDuration: 3,
                                delay: 0,
                                options: options,
                                animations: {

            UIView.addKeyframe(withRelativeStartTime: 0, relativeDuration: 0.1 / 3.0) {
                if isOnTabBar {
                    toastView.transform = CGAffineTransform(translationX: 0, y: -(toastView.frame.size.height * 2 + 80))
                }
                else {
                    toastView.transform = CGAffineTransform(translationX: 0, y: -(toastView.frame.size.height * 2 + 30))
                }
            }
            UIView.addKeyframe(withRelativeStartTime: 3.9 / 4.0, relativeDuration: 0.1 / 3.0) {
                toastView.transform = .identity
            }

        }, completion: { _ in
            toastView.removeFromSuperview()
        })
    }

사용 방식

view.showToastView(message: "")

• 하단에 애니메이션과 함께 나오는 토스트 뷰를 만들었습니다.
• 좌측에 보여질 사진과, 레이블을 결정할 수 있습니다.