Swift Tutorial – How to Implement iOS Toast Message With Animation In Your iPhone App?

ios toast message

Suppose, you want to show some messages for a few seconds to notify your users upon a particular action, what method will you use? We have noticed many iPhone app developers use UIAlertView to achieve this goal. While UIAlertView is a good option to show some messages/titles, but the problem is, the user will have to close the alert message manually.

Normally, it looks like this:

ios pop up alert message

Now, what if you want to show the same message for some time and after that, the message should hide automatically? The answer is iOS Toast Message used for this purpose.

What is Toast Message?

A toast message in iOS is a small, short-lived popup that provides a small bite of information to the users.

It looks something like this:

toast sample

In this iOS Swift tutorial, we will learn how to implement an iOS toast message in your iPhone app, but we will also show how to add animation to that.

Steps to Implement iOS Toast Message With Animation

In this demo, we will show Toast Alert with Blur animation when the username or password field is left empty and a user presses the Login button.

  1. First, go to XCode and create a new project.

  2. create a new project in xcode

  3. Now, select the project type as a Single View Application and click on next.

  4. select single view application

  5. In the next tab, set the project name and move forward.

  6. choose options for your new project for ios toast message

  7. Once you create a new project, go to Main.Storyboard, select ViewController, and drop UITextField from the “Show Object Library” section.

  8. go to the main storyboard

    Now, you can repeat this step for the password as well.

  9. Next, again go to Main.Storyboard, select ViewController and drop UIButton from the “Show Object Library” section.

  10. After adding the button, the final UI should look like this:

  11. final UI of toast message

  12. Once you have the UI ready similar to the image above, it’s time to create an Event for the login button.

  13. creata an event

  14. Now, once you create the event, it’s time to implement the animation on toast.

  15. create animation toast

    import UIKit
    
    //MARK: Add Toast method function in UIView Extension so can use in whole project.
    extension UIView
    {
    func showToast(toastMessage:String,duration:CGFloat)
    {
    //View to blur bg and stopping user interaction
    let bgView = UIView(frame: self.frame)
    bgView.backgroundColor = UIColor(red: CGFloat(255.0/255.0), green: CGFloat(255.0/255.0), blue: CGFloat(255.0/255.0), alpha: CGFloat(0.6))
    bgView.tag = 555
    
    //Label For showing toast text
    let lblMessage = UILabel()
    lblMessage.numberOfLines = 0
    lblMessage.lineBreakMode = .byWordWrapping
    lblMessage.textColor = .white
    lblMessage.backgroundColor = .black
    lblMessage.textAlignment = .center
    lblMessage.font = UIFont.init(name: "Helvetica Neue", size: 17)
    lblMessage.text = toastMessage
    
    //calculating toast label frame as per message content
    let maxSizeTitle : CGSize = CGSize(width: self.bounds.size.width-16, height: self.bounds.size.height)
    var expectedSizeTitle : CGSize = lblMessage.sizeThatFits(maxSizeTitle)
    // UILabel can return a size larger than the max size when the number of lines is 1
    expectedSizeTitle = CGSize(width:maxSizeTitle.width.getminimum(value2:expectedSizeTitle.width), height: maxSizeTitle.height.getminimum(value2:expectedSizeTitle.height))
    lblMessage.frame = CGRect(x:((self.bounds.size.width)/2) - ((expectedSizeTitle.width+16)/2) , y: (self.bounds.size.height/2) - ((expectedSizeTitle.height+16)/2), width: expectedSizeTitle.width+16, height: expectedSizeTitle.height+16)
    lblMessage.layer.cornerRadius = 8
    lblMessage.layer.masksToBounds = true
    lblMessage.padding = UIEdgeInsets(top: 4, left: 4, bottom: 4, right: 4)
    bgView.addSubview(lblMessage)
    self.addSubview(bgView)
    lblMessage.alpha = 0
    
    UIView.animateKeyframes(withDuration:TimeInterval(duration) , delay: 0, options: [] , animations: {
    lblMessage.alpha = 1
    }, completion: {
    sucess in
    UIView.animate(withDuration:TimeInterval(duration), delay: 8, options: [] , animations: {
    lblMessage.alpha = 0
    bgView.alpha = 0
    })
    bgView.removeFromSuperview()
    })
    }
    }
    extension CGFloat
    {
    func getminimum(value2:CGFloat)->CGFloat
    {
    if self < value2
    {
    return self
    }
    else
    {
    return value2
    }
    }
    }
    
    //MARK: Extension on UILabel for adding insets - for adding padding in top, bottom, right, left.
    
    extension UILabel
    {
    private struct AssociatedKeys {
    static var padding = UIEdgeInsets()
    }
    
    var padding: UIEdgeInsets? {
    get {
    return objc_getAssociatedObject(self, &AssociatedKeys.padding) as? UIEdgeInsets
    }
    set {
    if let newValue = newValue {
    objc_setAssociatedObject(self, &AssociatedKeys.padding, newValue as UIEdgeInsets!, objc_AssociationPolicy.OBJC_ASSOCIATION_RETAIN_NONATOMIC)
    }
    }
    }
    
    override open func draw(_ rect: CGRect) {
    if let insets = padding {
    self.drawText(in: UIEdgeInsetsInsetRect(rect, insets))
    } else {
    self.drawText(in: rect)
    }
    }
    
    override open var intrinsicContentSize: CGSize {
    get {
    var contentSize = super.intrinsicContentSize
    if let insets = padding {
    contentSize.height += insets.top + insets.bottom
    contentSize.width += insets.left + insets.right
    }
    return contentSize
    }
    }
    }
  16. On the login button touch, call the extension method which we created earlier

  17. login touch button

    @IBOutlet weak var txtPassword: UITextField!
    @IBOutlet weak var txtUserName: UITextField!
    
    //MARK: Login Action
    
    @IBAction func btnLoginPressed(_ sender: UIButton) {
    if txtUserName.text == ""
    {
    //Call UIView extension method
    self.view.showToast(toastMessage: "Please Enter Username,beacuse it is necessary to add For getting logged in.", duration: 1.1)
    }
    else if txtPassword.text == ""
    {
    self.view.showToast(toastMessage: "Please Enter Password.", duration: 1.1)
    }
    else
    {
    //Do login
    }
    
    }

    And Done!

    Frequently Asked Questions

    Where can I use toast messages in iOS?

    There are several use-cases of toast messages. You can use them for displaying the consequences of actions triggered by your users. For instance, you can notify a user upon successful sign-in by displaying a welcome toast message on iOS.

    What’s the difference between the iPhone app toast message and Snackbar?

    While a Snackbar is similar to a swift toast message, the only difference being that it’s more versatile and interactive. For instance, it allows users to undo any action with just a single tap. A Snackbar is generally used to communicate feedback on user actions.

    Can I display a toast message in Android?

    Yes, you can display a toast message similar to the one showed here in an Android by following our tutorial on displaying custom toast messages in your app using Android.

    Conclusion

    Now that you know how to display a toast message with animation in an iPhone app, you can play around with different animations. For instance, you can make an animation to ease out or ease in, run it in reverse, or set it to repeat. Once you feel ready to continue your journey towards the next stage of iPhone app development, start learning other components.

    Meanwhile, if you’ve got an idea for iPhone app development and would like to discuss it with us, drop us a line with your app requirements. Our business analyst will get back to you within 48 hours.

    You may also like,

    This page was last edited on February 2nd, 2021, at 4:40.

Author Bio

Hitesh Trivedi

Hitesh Trivedi

Designation: iOS Team Lead

Hitesh Trivedi is an iOS Team Lead at Space-O Technologies. He has over 10 years of experience in iOS app development. He has guided to develop over 100 iPhone apps with unique features and functionalities. He has special expertise in Swift and Objective-C.

 
 

Want to Develop a Mobile App? Contact Us Now!

Get your free consultation now

Leave a Reply

Your email address will not be published. Required fields are marked *