Thursday, August 23, 2018

ActionSheet as PopOver View

Recently, I have been working on my app update. In some cases, some actions could not be performed. I need to present a view to explain the reason. Alert view is a very common method to do that. Alert view is good to present the information, however, it is a modal view. User have to tap on OK or Cancel button to dismiss the alert view. I prefer the method of a popover view as alternative.

It is very easy to do that by using the same UIActionControler, and set the style as .actionSheet. This is well explained in Nick Meehan's post. Still there some thing missing is his post.

I would like to support both iPhon and iPad. For iPhone case, an action button should be added to dismiss the view. By default, the view is still a model view. You need a way to dismiss the alert view.

It is very interesting to find out that an action with .cancel style will change the modal view into a popover view. Further investigation, there is no need to add action handler to dismiss the view. The actionSheet will behaviour like a popover in iPhone.

Here are some codes.

  1. if let popoverController = alertController.popoverPresentationController {
  2.  popoverController.sourceView = view
  3.  popoverController.sourceRect =
  4.    CGRect(x: view.bounds.midX, y: view.bounds.midY, width: 0, height: 0)
  5.  popoverController.permittedArrowDirections = []
  6. } else {
  7.  let cancelAction = UIAlertAction(title: UIHelper.dismissButtonTitle(), style: .cancel)
  8.  alertController.addAction(cancelAction)
  9. }

Another interesting thing is that the cancel style action button will be displayed as an separate button on the bottom. You can specify any title to the button. I like it. This is the UI as in some Apple apps, such as deleting a message in message app.

Here is what I achieved in my update: