UIAlertController: Alert and Action Sheet in iOS
In this tutorial, I will show you the new way to display an alert message to the user and associate user actions with that alert message in your iOS app.
UIAlertView and UIActionSheet, introduced in iOS 2, were deprecated in iOS 8. And now, starting from iOS 8, they have both been replaced by UIAlertController. But for apps that target prior versions of iOS 8, you should still use the UIAlertView class to display an alert message to the user and the UIActionSheet class to present the user with a set of alternatives for how to proceed with a given task. Action sheets are also used to prompt the user to confirm a potentially dangerous action (for example, to request the user to confirm to delete a file). If you need to show alerts in apps before iOS 8, you should read our iPhone user alerts post. We have recently updated this post by adding Objective-C and Swift side by side.
UIAlertController
Now, let's see how to display an alert message to the user in iOS 8 and later. The UIAlertController class replaces the UIActionSheet and UIAlertView classes for displaying alerts. To create and manage alerts, you should instantiate a UIAlertController with a preferredStyle of UIAlertControllerStyleAlert. The same applies to action sheets, in which case the preferredStyle would be UIAlertControllerStyleActionSheet. After configuring the alert controller with the actions and style you want, you can present it using the presentViewController: animated: completion: method, as you would do with any view controller.
In addition to displaying a message to a user, you can associate actions with your alert controller to give the user a way to respond. For each action you add using the addAction: method, the alert controller configures a button with the action details. When the user taps that action, the alert controller executes a block that you provide when the action object is created.
Multiple text fields can also be added to the alert. However, you can add a text field only if the preferredStyle property is set to UIAlertControllerStyleAlert. Text fields are editable and stacked in the resulting alert in the order in which you added them to the alert controller.
Now, let's see how to put everything in practice. First, I'm going to show you how to build an app using an action sheet (in Objective-C and Swift, side by side) with 2 actions. Afterwards, I'll show you how to build an app using an alert that will contain a textfield and an Ok button. In this case, the user has the option to input some information using the keyboard.
Action Sheet
Open Xcode and create a Single-View Application. Name the project PresentationController. Open the ViewController file and add the following method (either in Objective-C or Swift):
|
1 2 3 |
- (IBAction)actionSheetButtonPressed:(id)sender { } |
|
1 2 3 |
@IBAction func actionSheetButtonPressed(sender: UIButton) { } |
Now, go to Main.storyboard, add a UIButton to the view controller main view and connect it to the previous IBAction. This action will be triggered when the button is pressed. Back in ViewController, complete the actionSheetButtonPressed method:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
- (IBAction)actionSheetButtonPressed:(id)sender { UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"My Alert" message:@"This is an action sheet." preferredStyle:UIAlertControllerStyleActionSheet]; // 1 UIAlertAction *firstAction = [UIAlertAction actionWithTitle:@"one" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) { NSLog(@"You pressed button one"); }]; // 2 UIAlertAction *secondAction = [UIAlertAction actionWithTitle:@"two" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) { NSLog(@"You pressed button two"); }]; // 3 [alert addAction:firstAction]; // 4 [alert addAction:secondAction]; // 5 [self presentViewController:alert animated:YES completion:nil]; // 6 } |
In Swift, it becomes:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@IBAction func actionSheetButtonPressed(sender: UIButton) { let alert = UIAlertController(title: "My Alert", message: "This is an action sheet.", preferredStyle: .Alert) // 1 let firstAction = UIAlertAction(title: "one", style: .Default) { (alert: UIAlertAction!) -> Void in NSLog("You pressed button one") } // 2 let secondAction = UIAlertAction(title: "two", style: .Default) { (alert: UIAlertAction!) -> Void in NSLog("You pressed button two") } // 3 alert.addAction(firstAction) // 4 alert.addAction(secondAction) // 5 presentViewController(alert, animated: true, completion:nil) // 6 } |
In line 1, I create a view controller for displaying an alert to the user with an action sheet as preferred style. In line 2 and 3, I create 2 actions with the specified title: "one" and "two" and default behavior. In line 4 and 5, I add actions from line 2 and 3 to the action sheet created in line 1. Finally, I present the UIAlertController.
Build and run and press the action sheet button and you should see the following:
When you press one of the buttons, a message should appear in the console with the information about which button you pressed.
Alert
Now, let's an alert to the previous example, where the user has a textfield to input some information and an OK button to press when done. Let's start where we left on with example 1. In the previous example, add a new IBAction:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
- (IBAction)alertButtonPressed:(id)sender { UIAlertController *alert = [UIAlertController alertControllerWithTitle:@"My Alert" message:@"This is an alert." preferredStyle:UIAlertControllerStyleAlert]; // 7 UIAlertAction *defaultAction = [UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction * action) { NSLog(@"You pressed button OK"); }]; // 8 [alert addAction:defaultAction]; // 9 [alert addTextFieldWithConfigurationHandler:^(UITextField *textField) { textField.placeholder = @"Input data..."; }]; // 10 [self presentViewController:alert animated:YES completion:nil]; // 11 } |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
@IBAction func alertButtonPressed(sender: UIButton) { let alert = UIAlertController(title: "Alert", message: "This is an alert.", preferredStyle: .Alert) // 7 let defaultAction = UIAlertAction(title: "OK", style: .Default) { (alert: UIAlertAction!) -> Void in NSLog("You pressed button OK") } // 8 alert.addAction(defaultAction) // 9 alert.addTextFieldWithConfigurationHandler { (textField: UITextField!) -> Void in textField.placeholder = "Input data..." } // 10 presentViewController(alert, animated: true, completion:nil) // 11 } |
In line 7, I create a view controller for displaying an alert to the user with an alert as the preferred style. In line 8, I create 1 action with the title "OK". In line 9, I add the action to the alert created in line 7. Then, I add a text field to the alert and finally, I present the UIAlertController.
Build and run, press the alert button and you should see the following:
You can input data in the textfield and when you press the Ok button, the following message should appear in the console: "You pressed button OK".
Conclusions
In this tutorial, I have shown you the new UIAlertController, which was added in iOS 8. This class now replaces UIAlertView and UIActionSheet, both deprecated in favor of some improvements that will hopefully make our lives as developers, easier. Let's hold on that.
Keep innovating, swiftly!
Eva
Eva Diaz-Santana (@evdiasan) is cofounder of InvasiveCode. She develops iOS applications and teaches iOS development since 2008. She also worked at Apple as Cocoa Architect and UX designer.
