Custom alert: programmatically create a adaptable alert in Swift

 I haven’t been blogging for some time, but on this gray Sunday it seems like the right time to pick it up again to talk to you about how to create a custom alert. I’ve been working in Aviero Portugal for a while. Aveiro is a quiet, though somewhat touristy city in the North of Portugal. Contrary to the south, the North is very green, mountainous and less dry. I’ve been staying at the fantastic Airbnb apartment of Didi, a nice Portuguese lady who lives in the Philippines most of the year running a software company.  Portugal is a great country to work. The people are so nice and easy-going, though older people don’t speak a word of English. The weather is fine and, not unimportant, it’s cheap to live (esp. when used to the prices in Amsterdam). Anyway, enjoyed it very much out there! On the picture above you see Didi and her mother on their family domain where I had a great afternoon with freaking delicious Port-wine!

Custom alert

At the moment I’m working on an exciting new app for a psychologist. In the app on numerous occasions we have to show an alert. Since the standard UIAlert Apple provide is umhh, rather standard.. I wanted to create a custom alert with adaptable title, message and number of buttons (0, 1 or 2 buttons). In this blog I show you what I did.

The view

I choose to make the custom alert programmatically using anchors because it’s easier to vary the amount of buttons that way. I use 2 classes; a CustomAlertview (a UIView-class) and a CustomAlertController (UIViewController) in which I animate the view in and out.

The CustomAlertView class sets up the subviews programmatically. It uses the presentCustomAlert function to set the constraints of the subviews in its superview. This function in turn, calls setButtons(..) which places no, one or two buttons, set the title and the message text. It’s important to notice that the messageLabel does not have a height constraint and has it’s numberOfLines property set to 0, which means the label’s height increases if it’s message text is longer. When scaling a view like this dynamically, it’s important to set the buttomAnchor of the bottom subview (in this case backgroundView) to the bottomAnchor of the superview, otherwise it will not know it’s own height.

 

The controller

In the controller we place the alertView in its original position with setUpAlertView() in viewDidLoad . This is a position of-screen, because we want to animate it in. We only add a width-constraint and no height-constraint because in that way, the view will scale its height to its intrinsic size based on the length of the message its text.

In ViewDidAppear we gently animate in the alertview. There are loads of ways to work out the animation, but I choose a simple CGAffine transform on the alertView to animate it in from the top. The click on the dismissButton can be handled in the controller, because the action always will be the same: animate out the alert and dismiss it form the stack.

 

Presenting the alert

The custom alert can be presented now from anywhere in the app. The target-actions are added at the place the alert is used, because the action it triggers, will differ on every use of the alert. We use the modalPresentStyle .overCurrentContext because we want to be able to see the underlying view the alert is presented over. This view is visible because we set the view of the viewcontroller to .clear.

Hope you enjoyed it, happy coding!