Suppose, you want to show some Icon or Image messages for a few seconds to notify users upon a specific action, what method will you use? For ex, on video player user tap and play/pause, mute/unmute, etc icon display for few second. Here it’s important to show icon for notify the user that video play or pause. Text toast message is suppose to easy to create but, what if when you want toast to an image or icon?
Here you will get code for that type of toast message with animation. I’ll create an Extension for toast icon-image, thus you can use it anywhere - anytime with less code.
First of all create extension of UIViewController,
extension UIViewController {
}
Now create function named showToast() and pass string parameter for Image or Icon name.
func showToast(iconName : String) {
}
Further, Let’s create UIImageView with CGRect frame for adding icon-image,
let toastIcon = UIImageView(frame: CGRect(x: self.view.frame.size.width/2 - 40, y: self.view.frame.size.height/2 - 40, width: 80, height: 80))
here, i’ll display icon at vertically & horizontally center of screen, so i’m set x: & y: position accordingly that. You can set x, y, height & width accordingly your requirement.
Next i’m set imageview’s design like it’s background color, radius, scale, etc.
toastIcon.backgroundColor = UIColor.black.withAlphaComponent(0.6) // background color with 0.6 ransparency
toastIcon.layer.cornerRadius = toastIcon.frame.height / 2 // for rounded image
toastIcon.layer.masksToBounds = true
Here i’m using xcode’s system icon to show video play - pause. You can get your required icon from Main.Storyboard, drop-down imageview and start to type at Image name at right sided inspectors , and it’ll display list of system icons.
let mediumConfig = UIImage.SymbolConfiguration(scale: .medium)
here, mediumConfig variable for weight of system icon like, small, medium & bold, i’m using medium.
let pauseImg = UIImage(systemName: iconName, withConfiguration: mediumConfig)
pauseImg variable is to set system icon inside of UIImage.
And finally set pause icon inside of toastIcon UIImageView.
toastIcon.image = pauseImg
Set custom color of system icon using .tintcolor and set alpha for ransparency of icon, here i’m set full alpha, you can adjust it as per you want.
toastIcon.tintColor = .white
toastIcon.alpha = 1.0
And finally our Icon Image is ready and add as subview of self.view.
self.view.addSubview(toastIcon)
Now, it’s time to give a fabulous animation to that icon.
UIView.animate(withDuration: 4.0, delay: 0.1, options: .curveEaseOut, animations: {
toastIcon.alpha = 0.0
}, completion: {(isCompleted) in
toastIcon.removeFromSuperview()
})
Here, i’m set duration of icon with 4 second, this mean the icon is display for 4 second at your screen and than disappear it.
Delay with 0.1 second, this mean icon display after 0.1 second and
Animation with curveEaseOut, you can set accordingly your choice.
And here the extension is finished and it’s time to see that how to use this extension? It’s too easy to use and guess what ! Only one line code is enough for ready to display the toast icon.
showToast(iconName: “pause”)
and here your toast Icon is Ready!
