[iOS - swift] 토스트 메세지 (toast message), 글자에 따른 toast view width 동적 조절, 문자열 크기 동적 계산

 

특정 뷰 위에 문자열의 크기만큼의 토스트 뷰 표출

toast view를 띄우는 프레임워크 이용

• 커스텀 toastMessageView를 만든 후 toastView를 띄우는 프레임워크를 사용
• 종속성 

pod 'Toast-Swift', '~> 5.0.1'

• import 

import Toast_Swift

커스텀 ToastMessageView 추가

• ToastMessageView.xib

• ToastMessageView.swift

//
//  ToastMessageView.swift
//  ToastViewEx
//
//  Created by 김종권 on 2021/02/18.
//

import UIKit

class ToastMessageView: UIView {

    @IBOutlet weak var toastMessageLabel: UILabel!

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

    override func prepareForInterfaceBuilder() {
        super.prepareForInterfaceBuilder()
        xibSetup()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        xibSetup()
    }

}

extension UIView {
    func xibSetup() {
        guard let view = loadViewFromNib(nib: type(of: self).className()) else {
            return
        }
        view.translatesAutoresizingMaskIntoConstraints = false
        view.frame = bounds
        addSubview(view)
    }

    func loadViewFromNib(nib: String) -> UIView? {
        let bundle = Bundle(for: type(of: self))
        let nib = UINib(nibName: nib, bundle: bundle)
        return nib.instantiate(withOwner: self, options: nil).first as? UIView
    }
}

extension NSObject {

    var className: String {
        return String(describing: type(of: self))
    }

    static func className() -> String {
        return String(describing: self)
    }
}

토스트 메세지 띄우는 방법

• 토스트 메세지를 주면, 토스트 뷰의 width를 구하는 함수 정의

private func widthSizeToastViewByComparing(string: String) -> CGFloat {
    let temporaryLabel = UILabel()
    temporaryLabel.font = UIFont.systemFont(ofSize: 15) // 주의: ToastMessageView에서 지정한 UILabel의 폰트와 폰트사이즈 동일하게 설정
    temporaryLabel.text = string
    return temporaryLabel.intrinsicContentSize.width + 48.5
}

• 특정 뷰 위에 토스트 메세지 뷰를 띄우는 함수 정의

func showToastView(message: String, above anchorView: UIView, offset: CGFloat) {
    let centerX: CGFloat = view.bounds.width / 2
    let centerY: CGFloat = anchorView.frame.origin.y - (toastViewHeight / 2) - offset
    let point = CGPoint(x: centerX, y: centerY)

    self.showToastView(message: message, point: point)
}

func showToastView(message: String, point: CGPoint? = nil) {
    let toastViewWidth = widthSizeToastViewByComparing(string: message)
    let messageView = ToastMessageView(frame: CGRect(x: 0, y: 0, width: toastViewWidth, height: toastViewHeight))

    messageView.layer.cornerRadius = 16
    messageView.toastMessageLabel.text = message
    if let point = point {
        view.showToast(messageView, point: point)
    } else {
        view.showToast(messageView)
    }
    toastMessageView?.isHidden = true
    toastMessageView = messageView
}

• 문자열의 길이가 달라져도 toast message의 크기가 일정하게 나오는 것을 확인 

* 전체 source code: github.com/JK0369/ToastViewExample

최적화 코드 - https://ios-development.tistory.com/636