Design and code your own UIAlertView

AlertViews are a common way to display a message to a user in iOS. This view allow an user to be informed of critical information (battery is low) or to make a decision about a course of action (are you sure you want to delete this item?)

For this kind of use cases, default UIAlertController (remember, UIAlertView is deprecated!) are just perfect, but what if I need a more complex UI that include an Slider, a Switch a Segmented Control or a UI designed from scratch? The only way I found to achieve this is creating a custom UIAlertView.

If you are in this situation, you may think: let’s subclass the UIAlertController class and add new features and custom things!. Then, you check the API reference and find this:

Subclassing

The UIAlert​Controller class is intended to be used as-is and does not support subclassing. The view hierarchy for this class is private and must not be modified.

So, what do we do now? 🤔 The answer is: subclass UIViewController and change its behavior to looks like an UIAlertView! Let’s see how.

I’ve created a simple app to show the difference between a standard UIAlertView and a custom one.

The UI

First, design the UI of your AlertView. In my case, I used Storyboard and it looked like this. I also added Constraints to make it responsive.

The controller

Then, we create a class that will subclass UIViewController. This class will handle all AlertView’s logic and user actions: tap a button, write on a UITextField, animate the view, dismiss it, etc…

The implementation is straightforward, but let me explain you some parts in detail:

alertTextField.becomeFirstResponder()

This method request text field focus and open the keyboard by default.

alertTextField.resignFirstResponder()

On the other hand, this one close the keyboard and delete the text field focus.

view.layoutIfNeeded()

Use this method to force the layout of subviews before drawing. This is useful if you need to draw, like in this case, border to the buttons because it prevent from UI glitches like drawing two borders: before and after Constraints are changed.

Tip: to draw border to the buttons I found a really good gist from Isuru Nanayakkara on Github that use Swift extensions, don’t forget to 🌟 it! Link

self.view.backgroundColor = UIColor.black.withAlphaComponent(0.4) 

Set the background color to a transparent black, so it makes the ViewController that open our CustomAlertView visible on background.

The delegate

As you may saw, the delegate pattern is used to communicate our CustomAlertView with the class that show it. The way is implemented is using a Protocol.

The instantiation

The last thing is instantiate and show our CustomAlertView.

Extend your ViewController with the delegate Protocol to react to CustomAlertView actions (cancel and ok buttons in this example), instantiate the CustomAlertView, set the delegate and present it, done!
The rest of code is used to animate the CustomAlertView correctly, and act like a UIAlertController.

That’s all folks! Its a very simple custom AlertView, but with few things in mind you could custom it as you want/need. As always, feedback is welcome, thanks for reading and ❤️ if you found it useful!

Code

https://github.com/DrankoLQ/CustomAlertView

References

[1] https://developer.apple.com/reference/uikit/uialertview

[2]https://developer.apple.com/library/content/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html

[3]https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/UIKitUICatalog/UIAlertView.html

[4]https://gist.github.com/Isuru-Nanayakkara/496d5713e61125bddcf5