Alerts with multiple buttons, with edit fields, Action Sheets, Activity Views, Popovers on iPad, and SwiftUI evolution
Introduction to Alerts
In iOS, there are a couple of ways to display some modal messages. To pass information to the user and optionally to get some feedback. Most used are Alerts and Action Sheets. Like secondary options are Activity Views and Popovers.
Alerts
Alerts are most used and the simplest. The UIAlertController is the most important part of it.
Alerts contain a couple of elements:
- Title: It represents the title. About what is the content
- Message: It represents the wider description part of the Alert
- Alert Style: It indicates the type of alert to display
- Alert Actions: These are the Action options with what users can interact with the alert or action sheet.
- Alert Textfield: It indicates the option for the user to make some input
Alerts convey important information related to the state of your app or the device. An alert consists of a title, an optional message, one or more buttons, and optional text fields for gathering input. Aside from these configurable elements, you can’t customize the visual appearance of an alert. — Apple Human Interface Guidelines
Simple Alert with Title, Subtitle, and One Button
This Alert message type is the simplest. It acts like some Info message.
| // 1. Create Alert | |
| let alert = UIAlertController(title: "Reminder", | |
| message: "Your Ticket will Expire Soon.", | |
| preferredStyle: .alert) | |
| // 2. Creeate Actions | |
| alert.addAction(UIAlertAction(title: "OK", | |
| style: .default, | |
| handler: { _ in | |
| print("OK tap") | |
| })) | |
| // 3. Snow | |
| present(alert, animated: true, completion: nil) |
The Code How to Create Simple Alert
If the message parameter gets nil as value then just one line, the title will be presented.
Alert Message with 2 Buttons
You can notice that the “Cancel” button is bold. This is achieved by selecting style as cancel. Also if you support previous iOS versions then this can have slight differences.
| // 1. Create Alert | |
| let alert = UIAlertController(title: "A new update is now available for application", | |
| message: "Do you want to update?", | |
| preferredStyle: .alert) | |
| // 2. Creeate Actions | |
| alert.addAction(UIAlertAction(title: "Update", | |
| style: .default, | |
| handler: { _ in print("OK tap") })) | |
| alert.addAction(UIAlertAction(title: "Cancel", | |
| style: .cancel, | |
| handler: { _ in print("Cancel tap") })) | |
| // 3. Snow | |
| present(alert, animated: true, completion: nil) |
The Code How to Create Alert Message with 2 Buttons
Alert Message with 3 Buttons
Previous Alert had the buttons vertically aligned. If you add 3 buttons, the system will automatically align them vertically in space.
With this Alert we have also used the destructor style, which colors the text to red. It is mostly used for some operations like Delete, Remove. Anything that can indicate to the user that this operation could do some permanent change.
| // 1. Create Alert | |
| let alert = UIAlertController(title: "News", | |
| message: "New Sound was released by your favourite artist.", | |
| preferredStyle: .alert) | |
| // 2. Creeate Actions | |
| alert.addAction(UIAlertAction(title: "Download Now", | |
| style: .default, | |
| handler: { _ in print("Download Now tap") })) | |
| alert.addAction(UIAlertAction(title: "Remind Me Later", | |
| style: .destructive, | |
| handler: { _ in print("Remind Me Later tap") })) | |
| alert.addAction(UIAlertAction(title: "Cancel", | |
| style: .cancel, | |
| handler: { _ in print("Cancel tap") })) | |
| // 3. Snow | |
| present(alert, animated: true, completion: nil) |
The Code How to Create Alert Message with 3 Buttons
Alert Message with TextField
This is the most interesting Alert. This can be used when you want to add some item to the list. When you want to edit some user fields like name, mobile number. Any edit field.
| // 1. Create Alert | |
| let alertController = UIAlertController(title: "Add", | |
| message: "Add new item to Todo list?", | |
| preferredStyle: .alert) | |
| // 2. Create Actions | |
| let confirmAction = UIAlertAction(title: "Save", style: .default) { _ in | |
| // 2a. Monitor the Text | |
| if let txtField = alertController.textFields?.first, let text = txtField.text { | |
| print("Final Text: \(text)") | |
| } | |
| } | |
| let cancelAction = UIAlertAction(title: "Cancel", style: .cancel) { _ in } | |
| alertController.addTextField { textField in | |
| textField.placeholder = "Please enter your new Item" | |
| } | |
| alertController.addAction(confirmAction) | |
| alertController.addAction(cancelAction) | |
| // 3. Show | |
| present(alertController, animated: true, completion: nil) |
The Code How to Create Alert Message with TextField
Alert Message without Button
This is possible but I have seen no use of this. This will present a message and block the screen. You can’t dismiss it.
Action Sheets
Action Sheets belong to the UIAlertController family. But it is presented from the bottom of the screen.
An action sheet presents two or more choices related to an intentional user action. On smaller screens, an action sheet slides up from the bottom of the screen; on larger screens, an action sheet appears all at once as a popover. — Apple Human Interface Guidelines
| // 1. Create Alert, ActionSheet type | |
| let alert = UIAlertController(title: "News", | |
| message: "New Sound was released by your favourite artist.", | |
| preferredStyle: .actionSheet) | |
| // 2. Creeate Actions | |
| alert.addAction(UIAlertAction(title: "Download Now", | |
| style: .default, | |
| handler: { _ in print("Download Now tap") })) | |
| alert.addAction(UIAlertAction(title: "Remind Me Later", | |
| style: .destructive, | |
| handler: { _ in print("Remind Me Later tap") })) | |
| alert.addAction(UIAlertAction(title: "Cancel", | |
| style: .cancel, | |
| handler: { _ in print("Cancel tap") })) | |
| // 3. Show | |
| present(alert, animated: true, completion: nil) |
The Code How to Create ActionSheet
If you run this code on an iPad it will crash. The iPad needs to know the position of the UIAlertController as it is presented inside the popover controller. To fix this crash, we need to add the next line before presenting the Action Sheet.
alert.popoverPresentationController?.sourceView = view
alert.popoverPresentationController?.sourceRect = button.frame
Now the Action Sheet will be presented on the button from source code.
Activity Views
The system provides several standard services, such as copying items to the pasteboard, posting content to social media sites, sending items via email or SMS, and more. Apps can also define custom services. Mostly it is used for sharing content. Can handle sharing text, URLs, images etc. This is not a regular way to present some options to the user but still belongs to the “Modal” view way to communicate with the user.
| let image = UIImage(systemName: "heart.fill") | |
| let items: [Any] = [image!, | |
| "This app is my favorite", | |
| URL(string: "https://medium.com/@varga-zolt")!] | |
| let activityViewController = UIActivityViewController(activityItems: items, applicationActivities: nil) | |
| activityViewController.popoverPresentationController?.sourceView = self.view | |
| // Because iPad /START | |
| activityViewController.popoverPresentationController?.sourceView = view | |
| activityViewController.popoverPresentationController?.sourceRect = button7.frame | |
| // Because iPad /END | |
| present(activityViewController, animated: true) |
Activity Views Code Example
Popovers
Popovers are special ways to present content modally on iPad.
| // 1. Frame where to present Popover | |
| let buttonFrame = button8.frame | |
| // 2. Configure the presentation controller | |
| let popoverContentController = PopoverViewController() | |
| popoverContentController.modalPresentationStyle = .popover | |
| // 3. Present popover | |
| if let popoverPresentationController = popoverContentController.popoverPresentationController { | |
| popoverPresentationController.permittedArrowDirections = .up | |
| popoverPresentationController.sourceView = view | |
| popoverPresentationController.sourceRect = buttonFrame | |
| popoverPresentationController.delegate = self | |
| present(popoverContentController, animated: true, completion: nil) | |
| } |
Popovers Code Example
Code examples can be found on the next link GitHub.
SwiftUI Alerts
Alerts in SwiftUI are pretty much similar to UIKit ones, which is considering the UI. As for the SwiftUI development, it depends on what iOS version you are using. Alerts are evolving and changed a couple of times from iOS 13 to iOS 15. But the principles are the same.
| struct ContentView: View { | |
| @State private var showingAlert = false | |
| var body: some View { | |
| Button("Show Alert") { | |
| showingAlert = true | |
| } | |
| .alert("Do you want to update?", isPresented: $showingAlert) { | |
| Button("Cancel", role: .cancel) { } | |
| Button("Update", role: .none) { } | |
| } | |
| } | |
| } |
SwiftUI Alert with 2 Buttons Code iOS13
SwiftUI Alert with More Buttons Code iOS13
| struct ContentView: View { | |
| @State private var showingAlert = false | |
| var body: some View { | |
| Button("Show Alert") { | |
| showingAlert = true | |
| } | |
| .alert(isPresented: $showingAlert) { | |
| Alert( | |
| title: Text("Delete Card"), | |
| message: Text("This will permanently delete the Card"), | |
| primaryButton: .destructive(Text("Delete"), action: { | |
| print("Delete") | |
| }), | |
| secondaryButton: .default(Text("Cancel"), action: { | |
| print("Cancel") | |
| }) | |
| ) | |
| } | |
| } | |
| } |
SwiftUI Alert with 2 Buttons iOS14
| struct ContentView: View { | |
| @State private var showingAlert = false | |
| var body: some View { | |
| Button("Show Alert") { | |
| showingAlert = true | |
| } | |
| .alert("Delete the Movies?", isPresented: $showingAlert, actions: { | |
| Button("Delete All", role: .destructive, action: { | |
| print("Delete All") | |
| }) | |
| Button("Remind me later", role: .none, action: { | |
| print("Remind me later") | |
| }) | |
| Button("Delete Only This", role: .none, action: { | |
| print("Delete Only This") | |
| }) | |
| Button("Cancel", role: .cancel, action: { | |
| print("Cancel") | |
| }) | |
| }, message: { | |
| Text("Care some operations are none reversable.") | |
| }) | |
| } | |
| } |
SwiftUI Alert iOS15
As you can see, it evolved with SwiftUI. Only what I would highlight now is that now Alerts are more customisable than the UIKit ones.
Outro
We have learned a couple of ways how to interact modally with users. Alert, Action Sheets, Activity Views, and Popover.
If you got to this point, thanks for reading. You deserve a coffee ☕️. 🙂 If you like the content please 👏, share, subscribe, buy a coffee, it means to me. If you have some suggestions or questions please feel free to comment.