September 16, 2020

Design your own Custom Alert in iOS

By Mohit Agrawal

Awesome custom alert with swift

Introduction

In native UIAlert we do not get many options to make it super-duper. So in today’s tutorial, I will show you a simple way to design your own custom alert.

The approach which I am using to use is very easy to understand. If you get it then you can design any complex alert without having any problem 🦹🏻.

What will we build?

Let me show you first that what are we going to design. It will help you to understand the concept more effectively.

custom alert ios 1

As you can see here, I am using a small icon, two labels, and two buttons for the action. Let’s see how we can design this type of custom alert in iOS.

Implementation

1 STEP: Create a new iOS project in swift with a storyboard and give it some nice name.

2 STEP: We need some action that can trigger our custom alert. So let’s create a simple button.

Open the Main.storyboard and create a simple UIButton, also make IBAction for it in ViewController.swift.

custom alert ios 2

3 STEP: Now this is the main step because here onwards the actual work starts.

Create a new ViewController in the same Main.storyboard. I will show you how we will convert this newly created view controller in an alert.

custom alert ios 3

Do not forget to create a class file for the newly created view controller. You can name it “AlertViewController.swift

Select the complete view of the new controller and make its background color clear. Check out the above image for more clarity. Now it should look like this.

custom alert ios 4

4 STEP: In the above step, we have made a transparent view controller. Can you guess why 🤪?

You will understand it very soon!!!.

Create a new view inside the main view and give it some appropriate height and width constraints so that it will look like some kind of Alert pop up.

custom alert ios 5

5 STEP: Congo 🥳, the basic skeleton of our custom alert is ready. Let’s code the button IBAction so that we can trigger the Alert.

In STEP-2 we have created IBAction for the button. In that write this block of code.

@IBAction func showAlert(_ sender: Any) {
        let sb = UIStoryboard(name: "Main", bundle: nil)
        let alertVC = sb.instantiateViewController(identifier: "AlertViewController") as! AlertViewController
        alertVC.modalPresentationStyle = .overCurrentContext
        present(alertVC, animated: true, completion: nil)
    }

Now if you run your code and press the button, then you should be able to pop up the Alert view (blank white view).

6 STEP: In this step, we just have to add two labels, two buttons, and one circular view with an image view.

Check out the below image which explains how I am using various elements to design our custom alert.

custom alert ios 6

Demo

Conclusion

Designing a custom alert in ios is not a big deal if you understand this concept. Now you should be able to design any complex custom alert.

Subscribe YouTube: More tutorials like this

I hope this blog post is useful for you, do let me know your opinion in the comment section below.
I will be happy to see your comments down below 👏.
Thanks for reading!!!