Uialertcontroller - Add Custom Views to Actionsheet

UIAlertController - add custom views to actionsheet

UIAlertController extends UIViewController, which has a view property. You can add subviews to that view to your heart's desire. The only trouble is sizing the alert controller properly. You could do something like this, but this could easily break the next time Apple adjusts the design of UIAlertController.

Swift 3

    let alertController = UIAlertController(title: "\n\n\n\n\n\n", message: nil, preferredStyle: UIAlertControllerStyle.actionSheet)

    let margin:CGFloat = 10.0
    let rect = CGRect(x: margin, y: margin, width: alertController.view.bounds.size.width - margin * 4.0, height: 120)
    let customView = UIView(frame: rect)

    customView.backgroundColor = .green
    alertController.view.addSubview(customView)

    let somethingAction = UIAlertAction(title: "Something", style: .default, handler: {(alert: UIAlertAction!) in print("something")})

    let cancelAction = UIAlertAction(title: "Cancel", style: .cancel, handler: {(alert: UIAlertAction!) in print("cancel")})

    alertController.addAction(somethingAction)
    alertController.addAction(cancelAction)

    DispatchQueue.main.async {
        self.present(alertController, animated: true, completion:{})
    }

Swift

let alertController = UIAlertController(title: "\n\n\n\n\n\n", message: nil, preferredStyle: UIAlertControllerStyle.actionSheet)

let margin:CGFloat = 10.0
let rect = CGRect(x: margin, y: margin, width: alertController.view.bounds.size.width - margin * 4.0, height: 120)
let customView = UIView(frame: rect)

customView.backgroundColor = .green
alertController.view.addSubview(customView)

let somethingAction = UIAlertAction(title: "Something", style: .default, handler: {(alert: UIAlertAction!) in print("something")})

let cancelAction = UIAlertAction(title: "Cancel", style: .cancel, handler: {(alert: UIAlertAction!) in print("cancel")})

alertController.addAction(somethingAction)
alertController.addAction(cancelAction)

self.present(alertController, animated: true, completion:{})

Objective-C

  UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"\n\n\n\n\n\n" message:nil preferredStyle:UIAlertControllerStyleActionSheet];

  CGFloat margin = 8.0F;
  UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(margin, margin, alertController.view.bounds.size.width - margin * 4.0F, 100.0F)];
  customView.backgroundColor = [UIColor greenColor];
  [alertController.view addSubview:customView];

  UIAlertAction *somethingAction = [UIAlertAction actionWithTitle:@"Something" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {}];
  UIAlertAction *cancelAction = [UIAlertAction actionWithTitle:@"Cancel" style:UIAlertActionStyleCancel handler:^(UIAlertAction *action) {}];
  [alertController addAction:somethingAction];
  [alertController addAction:cancelAction];
  [self presentViewController:alertController animated:YES completion:^{}];

That being said, a much less hacky approach would be to make your own view subclass that works similarly to UIAlertController's UIAlertActionStyle layout. In fact, the same code looks slightly different in iOS 8 and iOS 9.

iOS 8

iOS 9

iOS 10

Custom View in UIAlertController

You're not supposed to do that. To quote the docs:

The UIAlertController class is intended to be used as-is and does not support subclassing.

The view hierarchy for this class is private and must not be modified.

If you go against an explicit statement like that from Apple all bets are off, and even if you can get it to work on the current OS version, it could break with any future version.

Customised UIActionSheet

If you really want to do something like that you could give this a go. I can't guarantee it'll be approved by Apple and honestly, it's just not recommended from a UI and Apple HIG perspective.

Keep in mind UIActionSheet has been deprecated and it's recommended to use UIAlertController with a preferredStyle of .ActionSheet so that's what this example is going to use.

import UIKit

class ViewController: UIViewController {

    override func viewDidAppear(animated: Bool) {
        super.viewDidAppear(animated)

        let controller = SwiftDemoAlertController(title: nil, message: nil, preferredStyle: .ActionSheet)
        controller.addAction(UIAlertAction(title: "Reset to default", style: .Destructive, handler: nil))
        controller.addAction(UIAlertAction(title: "Save", style: .Default, handler: nil))

        self.presentViewController(controller, animated: true, completion: nil)
    }

    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.
    }


}

class SwiftDemoAlertController: UIAlertController, UITableViewDataSource {

    private var controller : UITableViewController

    override init(nibName nibNameOrNil: String?, bundle nibBundleOrNil: NSBundle?) {
        controller = UITableViewController(style: .Plain)
        super.init(nibName: nibNameOrNil, bundle: nibBundleOrNil)
        controller.tableView.registerClass(UITableViewCell.self, forCellReuseIdentifier: "cell")
        controller.tableView.dataSource = self
        controller.tableView.addObserver(self, forKeyPath: "contentSize", options: [.Initial, .New], context: nil)
        self.setValue(controller, forKey: "contentViewController")
    }

    override func observeValueForKeyPath(keyPath: String?, ofObject object: AnyObject?, change: [String : AnyObject]?, context: UnsafeMutablePointer<Void>) {
        guard keyPath == "contentSize" else {
            return
        }

        controller.preferredContentSize = controller.tableView.contentSize
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    deinit {
        controller.tableView.removeObserver(self, forKeyPath: "contentSize")
    }

    func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return 6
    }

    func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCellWithIdentifier("cell")!

        switch(indexPath.row) {
        case 0:
            cell.textLabel?.text = "Upcoming activities"
            let switchView = UISwitch(frame: CGRectZero)
            cell.accessoryView = switchView
            switchView.setOn(true, animated: false)
            break
        case 1:
            cell.textLabel?.text = "Past activities"
            let switchView = UISwitch(frame: CGRectZero)
            cell.accessoryView = switchView
            switchView.setOn(false, animated: false)
            break
        case 2:
            cell.textLabel?.text = "Activities where I am admin"
            let switchView = UISwitch(frame: CGRectZero)
            cell.accessoryView = switchView
            switchView.setOn(true, animated: false)
            break
        case 3:
            cell.textLabel?.text = "Attending"
            let switchView = UISwitch(frame: CGRectZero)
            cell.accessoryView = switchView
            switchView.setOn(true, animated: false)
            break
        case 4:
            cell.textLabel?.text = "Declined"
            let switchView = UISwitch(frame: CGRectZero)
            cell.accessoryView = switchView
            switchView.setOn(true, animated: false)
            break
        case 5:
            cell.textLabel?.text = "Not responded"
            let switchView = UISwitch(frame: CGRectZero)
            cell.accessoryView = switchView
            switchView.setOn(true, animated: false)
            break
        default:
            fatalError()
        }

        return cell
    }
}

Custom Action controller, Swift

Here is an example:

@IBAction func show() {
    let actionSheet = UIAlertController(title: "\n\n\n\n\n\n", message: nil, preferredStyle: .ActionSheet)

    let view = UIView(frame: CGRect(x: 8.0, y: 8.0, width: actionSheet.view.bounds.size.width - 8.0 * 4.5, height: 120.0))
    view.backgroundColor = UIColor.greenColor()
    actionSheet.view.addSubview(view)

    actionSheet.addAction(UIAlertAction(title: "Add to a Playlist", style: .Default, handler: nil))
    actionSheet.addAction(UIAlertAction(title: "Create Playlist", style: .Default, handler: nil))
    actionSheet.addAction(UIAlertAction(title: "Remove from this Playlist", style: .Default, handler: nil))

    actionSheet.addAction(UIAlertAction(title: "Cancel", style: .Cancel, handler: nil))
    presentViewController(actionSheet, animated: true, completion: nil)
}

Presenting UIAlertController (in actionsheet style) caused mysterious autolayout warning

This is a bug which is not fixed by Apple team this bug is related to alerts and action sheets related to animation. You may follow these links to verify this:-

UIAlertController's actionSheet gives constraint error on iOS 12.2 / 12.3

Swift default AlertViewController breaking constraints

The solution for this is to pass animation value as false like:-

controller.present(alertController, animated: false, completion: nil)

I have present the UIAlertController without animation and warning got vanished.

or you may try this solution mentioned in the one of the links of stackoverflow:-

@IBAction func buttonTapped(_ sender: UIButton) {
 ...
self.present(alertController,animated: true,completion: nil)



alertController.view.subviews.flatMap({$0.constraints}).filter{ (one: NSLayoutConstraint)-> (Bool)  in
  return (one.constant < 0) && (one.secondItem == nil) &&  (one.firstAttribute == .width)


}.first?.isActive = false

  }

---

Related Topics