How to make Custom AlertView/DialogBox with Animation in Swift 3

Although we have UIAlertViewController to display Alerts, we don’t have enough flexibility to make customization. so, here i am writing another tutorial on how you can make you own AlertView/DialogBox as you like.

For this tutorial, we will make a simple AlertView which will have a Title and an image but you can achieve any complex design with this method. if you can imagine, you can make it. 👍

Lets Get Started…

I have created a simple Protocol named Modal which helps you to show/dismiss your custom AlertView/DialogBox. You can play around with animation values to meet your requirement. lets get started by adding this file to your project.

After you have added Modal Protocol to your project, Create a new Swift file and give it any name you like. i will name it CustomAlertView. now, create a class named CustomAlertView and make it a subclass of UIView.

import UIKit
class CustomAlertView: UIView{
}

now, confirm to the Modal protocol and implement the required Variables.

class CustomAlertView: UIView, Modal {
     var backgroundView = UIView()
     var dialogView = UIView()
}

We will need to make our own initializer to initialize our CustomAlertView with a title and an image so, lets create a initializer which will take a Title and Image. If you are going to make your own initializer, you also need to implement a required init?(coder aDecoder: NSCoder) and override init(frame: CGRect). you also need to call its designated initializer from your initializer. so, we call init(frame: CGRect) by providing the main screen bounds which will make our CustomAlertView to cover the whole screen.

if you want to learn more about Initializers, go to this link.

convenience init(title:String, image:UIImage) {
     self.init(frame: UIScreen.main.bounds)
}
override init(frame: CGRect) {
     super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
     fatalError("init(coder:) has not been implemented")
}

now, lets design our AlertView

if you remember, we have two variables defined on the top i.e backgroundView and dialogView. dialogView is the view that will contain the actual Alert content and backgroundView is the view behind the dialogView.

For this tutorial i have programmatically designed CustomAlertView but if you don’t like creating your views programmatically, you can always use xib to design your view and add it to respective dialogView and backgroundView.

you can do a lot with backgroundView like you can make the background to be Blur or Transparent or Semi Transparent or show some image. for now, lets make our backgroundView to be Dark Semi Transparent.

backgroundView.frame = frame
backgroundView.backgroundColor = UIColor.black
backgroundView.alpha = 0.6
addSubview(backgroundView)

Similarly, i would like to have the width of the AlertView to be 64 points smaller than the screen width leaving 16 point of leading space and 16 points of trailing space. now, lets add a UILabel on the Top of dialogView, a thin UIView below the Label for a separator line and a UIImageView after it. we are setting title and image that we get from our initializer we have created earlier to respective UILabel and UIImageView. lastly, calculate the total Height for the dialogView and set it. as you can see the y-position of the dialogView is set to the height of the frame. by doing this, dialogView will be placed outside of the screen so when you show your AlertView, it will animate from bottom to center of the screen.

let dialogViewWidth = frame.width-64

let titleLabel = UILabel(frame: CGRect(x: 8, y: 8, width: dialogViewWidth-16, height: 30))
titleLabel.text = title
titleLabel.textAlignment = .center
dialogView.addSubview(titleLabel)
let separatorLineView = UIView()
separatorLineView.frame.origin = CGPoint(x: 0, y: titleLabel.frame.height + 8)
separatorLineView.frame.size = CGSize(width: dialogViewWidth, height: 1)
separatorLineView.backgroundColor = UIColor.groupTableViewBackground
dialogView.addSubview(separatorLineView)
let imageView = UIImageView()
imageView.frame.origin = CGPoint(x: 8, y: separatorLineView.frame.height + separatorLineView.frame.origin.y + 8)
imageView.frame.size = CGSize(width: dialogViewWidth - 16 , height: dialogViewWidth - 16)
imageView.image = image
imageView.layer.cornerRadius = 4
imageView.clipsToBounds = true
dialogView.addSubview(imageView)
let dialogViewHeight = titleLabel.frame.height + 8 + separatorLineView.frame.height + 8 + imageView.frame.height + 8
dialogView.frame.origin = CGPoint(x: 32, y: frame.height)
dialogView.frame.size = CGSize(width: frame.width-64, height: dialogViewHeight)
dialogView.backgroundColor = UIColor.white
dialogView.layer.cornerRadius = 6
dialogView.clipsToBounds = true
addSubview(dialogView)

finally, i would like to dismiss the AlertView when user taps on anywhere out side the Alert. so, lets add a UITapGestureRecognizer to backgroundView.

backgroundView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(didTappedOnBackgroundView)))

and on the Tap action, dismiss the Alert.

func didTappedOnBackgroundView(){
     dismiss(animated: true)
}

Congratulations!! 🎉 , you have your CustomAlertView ready to use.

now, you can pop up your CustomAlertView from anywhere by simply creating new instance of your CustomAlertView and calling show(animated: Bool) function.

let alert = CustomAlert(title: "Hello there!! 👋🏻👋🏻", image: UIImage(named: "img")!)
alert.show(animated: true)

Example Project : https://github.com/aatish-rajkarnikar/ModalView

Thanks for reading, Hope you like it. if you have any queries about this tutorial, feel free to ask and i will appreciate any Feedbacks or Suggestion.