We all know the iOS alert dialog is a modal dialog that will prompt at the iOS device screen center as usual, but it can also slide out from the iOS screen bottom. This example will show you how to slide out alert action sheet dialog from screen bottom in iOS app use swift.
1. Slide Out Alert Action Sheet From iOS Device Screen Bottom Example.
If you can not watch the above video, you can see it on URL https://youtu.be/_CgSMnid9UA
- There is a green button at the iOS app top area. When you click it, it will slide out the alert action sheet dialog from the screen bottom.
- There are three alert action buttons in the alert action sheet. When you press each action button, it will show a short text in the UILabel object below the green button.
2. Slide Out Alert Action Sheet Example Source Code.
- First, create an Xcode project using the Single View App template. You can refer article How To Create A Swift Project In Xcode.
- If you want to make the iOS alert dialog slide out as an action sheet, you need to specify the preferredStyle parameter value to UIAlertController.Style.actionSheet when create the UIAlertController object.
let alertActionSheetController: UIAlertController = UIAlertController(title: "Alert Action Sheet", message: "This is an alert action sheet. It slide out from bottom.", preferredStyle: UIAlertController.Style.actionSheet)
- Then you just need to edit the ViewController.swift file use below swift source code.
// // ViewController.swift // iOSAlertActionSheetExample // // Copyright © 2019 dev2qa.com. All rights reserved. // import UIKit class ViewController: UIViewController { // This label will display the alert action result. let alertResultLabel: UILabel = UILabel() // When touch this button, it will prompt the iOS alert with action sheet style from screen bottom. let btnAlertActionSheet:UIButton = UIButton() override func viewDidLoad() { super.viewDidLoad() self.createButton() self.createLabel() } /* This fucntion will create a button and layout it, when click this button, it will prompt an alert action sheet from screen bottom. */ func createButton(){ // Set button title. btnAlertActionSheet.setTitle("Prompt Alert Action Sheet", for: UIControl.State.normal) // Set button title color. btnAlertActionSheet.setTitleColor(UIColor.red, for: UIControl.State.normal) // Set button background color. btnAlertActionSheet.backgroundColor = UIColor.green // Set button corner radius. btnAlertActionSheet.layer.cornerRadius = 5 // Set button border width. btnAlertActionSheet.layer.borderWidth = 1 // Set this property value to false to make change button layout constraints programmatically. btnAlertActionSheet.translatesAutoresizingMaskIntoConstraints = false // Set button title text break mode. btnAlertActionSheet.titleLabel?.lineBreakMode = NSLineBreakMode.byWordWrapping // Add this button to the app root view. self.view.addSubview(btnAlertActionSheet) let btnTopAnchor = btnAlertActionSheet.topAnchor.constraint(equalTo: self.view.topAnchor, constant: 100) btnTopAnchor.isActive = true // Layout this button at horizontal center. let btnCenterXAnchor = btnAlertActionSheet.centerXAnchor.constraint(equalTo: self.view.centerXAnchor) btnCenterXAnchor.isActive = true // Layout this button's width as the device width minus 200. let btnWidthAnchor = btnAlertActionSheet.widthAnchor.constraint(equalTo: self.view.widthAnchor, constant: -100) btnWidthAnchor.isActive = true // Set button touch down event process function. btnAlertActionSheet.addTarget(self, action: #selector(processBtnEvent), for: UIControl.Event.touchDown) } /* This fucntion will create a label, this label is used to display user pressed alert action in the alert action sheet. **/ func createLabel(){ // First add the label object to the app root view. self.view.addSubview(alertResultLabel) // Set this proprty value to false to avoid error when make layout constraints to this label object later. alertResultLabel.translatesAutoresizingMaskIntoConstraints = false // Set this label 30 distance from the button bottom. let labelTopAnchor = alertResultLabel.topAnchor.constraint(equalTo: btnAlertActionSheet.bottomAnchor, constant: 30) labelTopAnchor.isActive = true // Set this label dispayed at the horizontal center in the screen. let labelCenterXAnchor = alertResultLabel.centerXAnchor.constraint(equalTo: self.view.centerXAnchor) labelCenterXAnchor.isActive = true } /* This function will process button touch down event. */ @objc func processBtnEvent(src:UIButton, event:UIControl.Event){ // Create the UIAlertController object with UIAlertController.Style.actionSheet style, this style will create the alert dialog with action sheet. let alertActionSheetController: UIAlertController = UIAlertController(title: "Alert Action Sheet", message: "This is an alert action sheet. It slide out from bottom.", preferredStyle: UIAlertController.Style.actionSheet) // Create a cancel style alert action. let cancelAction: UIAlertAction = UIAlertAction(title: "Cancel", style: UIAlertAction.Style.cancel) { (cancelAction) in self.alertResultLabel.text = "Cancel action button is clicked." } // Create a destructive style alert action. let reminderAction:UIAlertAction = UIAlertAction(title: "Reminder me later", style: UIAlertAction.Style.destructive) { (reminderAction) in self.alertResultLabel.text = "Remind me later action button is clicked." } // Create a default style alert action. let okAction:UIAlertAction = UIAlertAction(title: "Ok", style: UIAlertAction.Style.default) { (okAction) in self.alertResultLabel.text = "Ok action button is clicked." } // Add above actions to the alert controller. alertActionSheetController.addAction(cancelAction) alertActionSheetController.addAction(reminderAction) alertActionSheetController.addAction(okAction) // Present the alert action sheet. You can see it slide up from the screen bottom. self.present(alertActionSheetController, animated: true) { self.alertResultLabel.text = "" } } }
Reference