Context Menus in iOS 18 - #30DaysOfSwift

Day 14: Enhancing Interactions with Context ⚙️

Welcome back to the #30DaysOfSwift series!

Today, let's look at Context Menus. A powerful way to offer additional actions when users long-press or right-click on UI elements.

By integrating context menus into your SwiftUI app, you can create a smooth, intuitive experience for users when interacting with different elements.

What are Context Menus?

• Context Menus provide additional actions that a user can perform on an element.

• They are revealed via a long press or right-click, making it easy for users to access additional options without cluttering the UI.

Code Example: Context Menus in Action

struct ContextMenuExample: View {
    @State private var favorite: Bool = false

    var body: some View {
        VStack {
            HStack {
                Text("Long-press me!")
                    .font(.title2)
                    .padding()
                Spacer()
                if favorite {
                    Image(systemName: "heart.fill")
                        .foregroundColor(.red) // Customization: Heart icon if marked as favorite
                }
            }
            .frame(maxWidth: .infinity)
            .padding()
            .background(Color.blue.opacity(0.2)) // Custom background color
            .cornerRadius(10) // Rounded corners for aesthetic touch
            .contextMenu { // Adding the context menu
                Button(action: {
                    favorite.toggle()
                }) {
                    Label("Favorite", systemImage: favorite ? "heart.fill" : "heart")
                }

                Button(action: {
                    print("Shared!")
                }) {
                    Label("Share", systemImage: "square.and.arrow.up")
                }

                Button(action: {
                    print("Deleted!")
                }) {
                    Label("Delete", systemImage: "trash")
                        .foregroundColor(.red) // Custom color for danger actions
                }
            }
        }
        .padding()
    }
}

Now, it's your turn! Try adding context menus to elements in your app to make your interactions more intuitive and user-friendly!

The full series is available on my profile, and the components can also be found at shipios.app/components.

Happy Coding! 🎨