Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I create a popup menu in iOS?

Tags:

ios

swift

How can I create a popup menu like the one present in WhatsApp?

Screenshot of the popup menu

Sorry for the dumb question, but I don't even know what to search. I'm pretty sure it's not a UIPickerView.

like image 249
SebaSbs Avatar asked Aug 17 '17 13:08

SebaSbs


People also ask

How do I create a pop-up in iOS?

Creating the Popup Window ViewIn the init(), create an UIView for the window, two UILabel for the title and the message, and an UIButton that close the popup when you press it. Declare a variable of PopUpWindowView() and pass the data from UIViewController's init to the popup view.

What is pop-up menu how it is created?

Android Popup Menu: Android Popup Menu displays a list of items in a vertical list which presents to the view that invoked the menu and useful to provide an overflow of actions that related to specific content.

What is context menu in iOS?

In iOS and iPadOS, a context menu can display a preview of the current content near the list of commands. People can choose a command in the menu or — in some cases — they can tap the preview to open it or drag it to another area. Prefer a graphical preview that clarifies the target of a context menu's commands.


1 Answers

This is an action sheet. Here's the documentation about it in the iOS Human Interface Guidelines.

You can make one like this:

SwiftUI (iOS 15 and above)

Use confirmationDialog(). Here is the official documentation for it and here are some real-world examples, which are partially the source of the example code.

@State private var shouldShowActionSheet = false

<custom view>
.confirmationDialog("", isPresented: $shouldShowActionSheet) {
    Button("Option 1") {
        <handler>
    }

    Button("Option 2") {
        <handler>
    }

    Button("Cancel", role: .cancel) { }
}

SwiftUI (iOS 13 and 14)

@State private var shouldShowActionSheet = false

[...]

<custom view>
.actionSheet(isPresented: $shouldShowActionSheet) {
    ActionSheet(
        title: Text(""),
        buttons: [
            .default(Text("Option 1")) {
                <handler>
            },
            .default(Text("Option 2")) {
                <handler>
            },
            .cancel()
        ]
    )
}

UIKit

let alert = UIAlertController(
    title: nil,
    message: nil, 
    preferredStyle: .actionSheet
)

alert.addAction(
    .init(title: "Action 1", style: .default) { _ in
        <handler>
    }
)

alert.addAction(
    .init(title: "Action 1", style: .default) { _ in
        <handler>
    }
)

present(alert, animated: true)
like image 72
Tamás Sengel Avatar answered Sep 21 '22 22:09

Tamás Sengel