Context Menu, Alert and ActionSheet in SwiftUI

Replacing a 3D touch with peek and pop, alert and action sheet

Amol Rai
Amol Rai
Dec 17, 2019 · 5 min read

SwiftUI is here to stay since it was launched during Apple WWDC 2019 using SwiftUI to build user interfaces for any Apple device using just one set of tools and APIs.

With a declarative Swift syntax that’s easy to read and natural to write, SwiftUI works seamlessly with new Xcode design tools to keep your code and design perfectly in sync.

SwiftUI uses a declarative syntax so you can simply state what your user interface should do.


If you want to learn ARKit 3 from beginner to expert level or if you are a intermediate level then this course is for you follow the below link to get 50% discount.

If you are passionate about learning mobile development for iOS and looking to take your iOS development skills to the next level, Core Data with CloudKit framework should be at the top of your list. Follow the below link to get 50% discount.

Subscribe to my Youtube Channel to learn more about Swift, SwiftUI and iOS Development. I upload daily videos about Swift and iOS Development.


Plan of Action

We are going to build a context menu and alert using the SwiftUI framework in our sample iOS application.


Getting Started

Open up Xcode and create a new Xcode project.Choose Single View App in the iOS template section and click next.

Enter your product name and select SwiftUI as the user interface click next, and create it on your desktop. Here’s what you see once you are done with the setup.

By default, SwiftUI view files declare two structures. The first structure conforms to the View protocol and describes the view’s content and layout. The second structure declares a preview for that view.

Context Menu in SwiftUI

SwiftUI context menu modifier for creating popup menus in our apps. In iOS this is usually triggered using long press gesture. A context menu is built from a collection of buttons, each with their own action, text, and icon.

So, if we wanted a context menu to be attached to some image, we could provide two buttons for the menu like this.

struct ContentView: View {var body: some View {Image("turtlerock")
.clipShape(Circle())
.contextMenu {Button(action: {
// Action will goes here
}) {
Text("Delete")
Image(systemName: "trash")
}
Button(action: {
// Action will goes here
}) {
Text("ADD")
Image(systemName: "plus")
} } }}struct ContentView_Previews: PreviewProvider {static var previews: some View {
ContentView()
}
}

Build and Run!

The result looks like this

Showing the context menu on the basis of a long press on image.

Alert in SwiftUI

Before we implement alert first take a look at what is property wrapper.

What is State Property wrapper?

SwiftUI uses the @State property wrapper to allow us to modify values inside a struct, which would normally not be allowed because structs are value types. When we put @State before a property, we effectively move its storage out from our struct and into shared storage managed by SwiftUI. This means SwiftUI can destroy and recreate our struct whenever needed (and this can happen a lot!), without losing the state it was storing.

In UIKit you have done alert controllers many times presenting alert in SwiftUI is very simple than UIKit as shown below.

struct AlertView: View {@State private var showingAlert = falsevar body: some View {Button(action: {
self.showingAlert = true
}) {
Text("Show Alert")
.font(.title)
.foregroundColor(Color.white)
}
.alert(isPresented: $showingAlert) {Alert(title: Text("Alert in SwiftUI"), message: Text("How was that"), primaryButton: .default(Text("Awesome")), secondaryButton: .destructive(Text("Cancel"))) }
}
}
struct AlertView_Previews: PreviewProvider {static var previews: some View {
AlertView()
}
}

Build and Run!

Result look like this

Presenting alert using property wrappers on the basis of a button click.

ActionSheet in SwiftUI

In SwiftUI action sheet have not any style they have similar syntax as an alert controller. Here is the code to present an action sheet on the basis of a button click.

struct ActionSheetView: View {@State private var showingActionSheet = falsevar body: some View {Button(action: {self.showingActionSheet = true}) {Text("Show ActionSheet").font(.title).foregroundColor(Color.white)}.actionSheet(isPresented: $showingActionSheet) {ActionSheet(title: Text("SwiftUI ActionSheet"), message: Text("How was that"), buttons: [.default(Text("Awesome")), .cancel()])     }
}
}
struct ActionSheetView_Previews: PreviewProvider {static var previews: some View {
ActionSheetView()
}
}

Build and Run!

Result look like this

Conclusion

That’s it for this piece covering the context menu, alert controller and action sheet in SwiftUI. I hope you have enjoyed learning SwiftUI.

SwiftUI is here to stay.


Additional Resources

If you want to learn ARKit 3 from beginner to expert level or if you are a intermediate level then this course is for you follow the below link to get 50% discount.

If you are passionate about learning mobile development for iOS and looking to take your iOS development skills to the next level, Core Data with CloudKit framework should be at the top of your list. Follow the below link to get 50% discount.

Subscribe to my Youtube Channel to learn more about Swift, SwiftUI and iOS Development. I upload daily videos about Swift and iOS Development.

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Amol Rai

Written by

Amol Rai

iOS App Developer: Swift |  lover | #swift #ios #apple. Making amazing things in AR. Machine learning enthusiast. https://amolrai.github.io/apps/

Flawless iOS

🍏 Community around iOS development, mobile design, and marketing

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade