Swift : OverlayView that appears at the bottom of the screen

Question

I'd like to create a very common effect as in the picture below :

Explanation : the effect I'd like to accomplish consists in a view that appears (slides in) at the bottom of the screen when user clicks a button : you can still see the screen behind this view, but it applies a "dark layer" (black view with let's say 60% opacity) on the top of it. When user clicks on Block or Report absue (as for this example) it would perform the respective actions. Now when user clicks on cancel, and also when he clicks anywhere on the "dark layer" it would bring him back to the screen.

What I tried : presenting a new view controller (but it would use more data than necessary), using a overlay layer but I even didnt get close to that effect that we're usually seeing on apps. I'm not sure but I'd say that the best way to get that effect is using views ?

Does anyone have an idea please ?

Thanks and have a good day,

J

Offprint

Answer 1

You are looking for a native element called UIActionSheet. It has become the part of UIAlertController, and does exactly what you are looking for.

Here is a little help how to set up one:

 // Create you actionsheet - preferredStyle: .actionSheet
        let actionSheet = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)

        // Create your actions - take a look at different style attributes
        let reportAction = UIAlertAction(title: "Report abuse", style: .default) { (action) in
            // observe it in the buttons block, what button has been pressed
            print("didPress report abuse")
        }

        let blockAction = UIAlertAction(title: "Block", style: .destructive) { (action) in
            print("didPress block")
        }

        let cancelAction = UIAlertAction(title: "Cancel", style: .cancel) { (action) in
            print("didPress cancel")
        }

        // Add the actions to your actionSheet
        actionSheet.addAction(reportAction)
        actionSheet.addAction(blockAction)
        actionSheet.addAction(cancelAction)
        // Present the controller
        self.present(actionSheet, animated: true, completion: nil)

It should produce the following output:

Nieberg

Thank you so much it's perfect and exactly what I was searching for ! I'll try that code :) Cheers ! J. – Offprint

@SebastianWeiß I have added extra tags for the question – Nieberg