iOS Action Sheet using Alert Controller

Filed Under: iOS

In this tutorial, we’ll be implementing Action Sheet in our iOS Application using Swift.

iOS Action Sheet

UIActionSheet class has now been deprecated. In order to implement ActionSheets we use UIAlertController now.

ActionSheets are like BottomSheet Dialogs in Android. They slide up from the bottom of the screen. You must select one of the options present in it. An ActionSheet doesn’t close otherwise.

An ActionSheet can have buttons of three styles:

  • default: The normal options. Default color is blue.
  • destructive: Default color is red and is generally used for Delete options.
  • cancel: This comes at the bottom of the ActionSheet and is used to close it.

Creating an ActionSheet in Swift:


let alertController = UIAlertController(title: "Question", message: "Will India ever win a FIFA World Cup?", preferredStyle: .actionSheet)
        
        let yesAction = UIAlertAction(title: "Yes", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("Yes")
        })
        
        alertController.addAction(yesAction)
      
        self.present(alertController, animated: true, completion: nil)

We’ve used UIAlertController with the preferred style set to actionSheet. The default style is alert which is used for displaying alert dialogs.

addAction is used to add a UIAlertAction option into the ActionSheet.

In the UIAlertAction, we define the style as default in the above code. We could use destructive or cancel as well which we will do in the XCode project below.

present displays the ActionSheet instance in our View.

Let’s create a new XCode project. We will create a single view application.

iOS Action Sheet Example Storyboard

The Main.Storyboard is empty by default.
We’ll add three Buttons for each of the ActionSheets types. Set the Auto-layout constraints as well.
Following is how our Main.storyboard looks :

ios action sheet storyboard

Each of the Buttons IBActions is linked to the ViewController.swift using the assistant editor.

The code for the ViewController.swift is given below.


import UIKit

class ViewController: UIViewController {

    @IBAction func showColored(_ sender: Any) {
        
        let alertController = UIAlertController(title: nil, message: "Colored options exists", preferredStyle: .actionSheet)
        
        let action1 = UIAlertAction(title: "Option 1", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("Action 1")
        })
        
        let action2 = UIAlertAction(title: "Option 2", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("Action 2")
        })
        
        
        let maybeAction = UIAlertAction(title: "Maybe", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("Maybe")
        })
        
        action1.setValue(UIColor.purple, forKey: "titleTextColor")
        action2.setValue(UIColor.green, forKey: "titleTextColor")
        maybeAction.setValue(UIColor.black, forKey: "titleTextColor")
        
        alertController.addAction(action1)
        alertController.addAction(action2)
        alertController.addAction(maybeAction)
        
        self.present(alertController, animated: true, completion: nil)
        
    }
    
    @IBAction func showDeleteAndCancel(_ sender: Any) {
        
        let alertController = UIAlertController(title: "Title", message: "Delete And Cancel option exists", preferredStyle: .actionSheet)
        
        let deleteAction = UIAlertAction(title: "Delete", style: .destructive, handler: { (alert: UIAlertAction!) -> Void in
            print("delete")
        })
        
        let cancelAction = UIAlertAction(title: "Cancel", style: .cancel, handler: { (alert: UIAlertAction!) -> Void in
            print("Cancel")
        })
        
        let noAction = UIAlertAction(title: "No", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("No")
        })
        
        let maybeAction = UIAlertAction(title: "Maybe", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("Maybe")
        })
        
        alertController.addAction(deleteAction)
        alertController.addAction(cancelAction)
        alertController.addAction(noAction)
        alertController.addAction(maybeAction)
        
        self.present(alertController, animated: true, completion: nil)
        
        
    }
    
    @IBAction func showNormal(_ sender: Any) {
        
        let alertController = UIAlertController(title: "Question", message: "Will India ever win a FIFA World Cup?", preferredStyle: .actionSheet)
        
        let yesAction = UIAlertAction(title: "Yes", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("Yes")
        })
        
        let noAction = UIAlertAction(title: "No", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("No")
        })
        
        let maybeAction = UIAlertAction(title: "Maybe", style: .default, handler: { (alert: UIAlertAction!) -> Void in
            print("Maybe")
        })
        
        alertController.addAction(yesAction)
        alertController.addAction(noAction)
        alertController.addAction(maybeAction)
        
        self.present(alertController, animated: true, completion: nil)

    }
    
    @IBOutlet weak var showNormal: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view, typically from a nib.
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    }


}

showNormal function displays an ActionSheet with buttons of the default style.

To change the text color of the options in the ActionSheet from the default color blue, we use the setValue method and pass the UIColor for the standard key of the text color:


action1.setValue(UIColor.purple, forKey: "titleTextColor")

On every UIAlertAction we have a handler set which is basically a Swift closure. Inside the closure, we can add the logic for the action. Here we’ve just printed the name of the action.

showDeleteAndCancel function displays the ActionSheet with delete and cancel buttons.

The output of the above application in action is given below:

ios action sheet alert controller output

This brings an end to this tutorial. You can download the XCode iOSActionSheets Project from the link below:

Comments

  1. Tatiana says:

    Please help me :{

    I created an actionSheet but I want one of the optionMenu to open another actionSheet when pressed!

  2. Humberto says:

    Hi Anupam.

    That was a really nice article. I was trying to change ActionSheet text so I found out your post.

    It’s so interesting the way you solve it. How can I know what other changeable keys action sheet has?

    I mean, in your project you changed “titleTextColor” how can I know what other I can change?

Leave a Reply

Your email address will not be published. Required fields are marked *

close
Generic selectors
Exact matches only
Search in title
Search in content
Search in posts
Search in pages