Displaying pop up / alerts in iOS applications
Pop ups are important. Sometimes, they’re annoying (yeah I’m talking about those random pop ups on web pages). When they’re important, they can show information regarding application execution, state management, ask the user for inputs or certain access permissions and so on. So how do you display a meaningful pop up in an iOS app? Let’s find out!
Fire up Xcode
First thing first, let’s open up a project on Xcode. How else are we going to get started? .__. Create a single view iOS application.
Next up, open your Main.storyboard with the assistant editor enabled.
Now let’s stare for the blank UIView for a while and get lost into oblivion on what we should do. Okay not that much. We need to show a pop up. But pop ups need to be triggered by something, or in better words some event/action. So how do we trigger the event/action? Think of controls that can trigger or send some action to the ViewController.
Simplest yet : Add a button!
Okay, so let’s add a button to the view. But will only adding the button do our job? Nope. This ain’t magic trick!
First of all, create an outlet for the button, since a button can’t create itself. (ctrl + left mouse click and then drag and drop it in your ViewController.swift file) Let’s just name it popButton. Now your ViewController.swift file should look like this.
That tiny button?
Moving on, the button looks tiny and not that much attractive. Let’s add some styling. For our case, just changing the Font and Font size will do for now. Also lets just give it some meaningful title instead of just “Button”.
Set the font and the title according to the image. Now we’re don styling and now, our button looks like this -
I knew you’d ask the question. Hold your horses. We’re getting there.
Time for to add some action!
Okay, now let’s go and create an action for the button outlet. Name it showPopUp. Should be like this —
Now that we got the action defined, let’s get to work to show our pop up.
UIAlertController : What’s that?
UIAlertController is responsible for creating pop ups in the iOS applications we see and use today. So in Apple Documentation terms, we need to create an UIAlertController instance and present(display) it. Let’s create the UIAlertController first.
actionSheet pop ups are displayed from bottom and can hold multiple actions. An example would make it clear.
On the other hand, an alert looks like this —
The difference is pretty obvious from the images. For now, we’re going to show an alert. So to do so, our code looks like this —
Okay we defined an alert, so how do we display or ugh present it? There’s a method called present. We’re going to use that. present takes 3 arguments — the alert, whether it should be animated while popping up and what to do on completion. We’ll be setting animated to true and completion to nil since we don’t need that here. However you can define a closure for that if you want to.
Now let’s run it. (Wait for the simulator if your mac is slow)
Aaaaand we’ve the pop up but wait a second. How do we get away from this one? Tapping anywhere else on the screen doesn’t do anything at all. Fishy! So how do we get rid of this problem?
Houston, we’ve a problem
The pesky alert won’t be gone until we define some action for it. Yeah moooooar action. So how to do that? We’ll use UIAlertAction for this purpose. So let’s add a simple action on the pop up that’ll show an “okay” button and when we tap it the alert will be gone!
Before that something to talk about. Actions also have styles and what are they? An UIAlertAction has 3 styles -
- cancel — so that the user gets an indication that some operation will get canceled.
- default — default behavior, which means to go forward. with the operation.
- destructive — something will get deleted.
So now we need to define the action and add it to our alert.
Now let’s run it on simulator again. This time the pop up will bend to our will.
Yep! it does! What if we want to add more actions? Well just define them in the same fashion and add them to the alert control. EZ.
What about action sheets?
It’ll be unfair to talk about pop ups and not talk about action sheets. Now the good thing is, we don’t need to change our existing code entirely. We just need to changed the style of the alert to actionSheet. It can right there but a single action on an action sheet doesn’t look good. So let’s add some more.
And this is how it looks.
If you closely the Nope action has a style of “cancel” and it’s separated from the others. Well that’s how they designed it and it’s legit as well. Also the Cursed action is marked red because we set it’s style to “destructive”.
So that was kinda basics of displaying pop ups, however pop ups can be made versatile through tweaking, we’ll leave that for a future post. Till then sayonara.