Context Menu, Alert and ActionSheet in SwiftUI

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

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 are preparing for your technical coding interview or you want to learn recursion to improve your problem-solving skills then you should definitely check this free udemy course Master the Recursion from Beginner to Advance Level

If you want to learn ARKit 3 from beginner to expert level then click here to get the course and also you will get 97% 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. Click here to get the course and also you will get 97% discount.

Learn SwiftUI from Scratch click here to get the course because in this course we are going to build many apps using SwiftUI such as Facebook clone, News app, Notes app and much more.

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 = false
var 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 = false
var 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.

If you are preparing for your technical coding interview or you want to learn recursion to improve your problem-solving skills then you should definitely check this free udemy course Master the Recursion from Beginner to Advance Level

Additional Resources

If you want to learn ARKit 3 from beginner to expert level then click here to get the course and also you will get 97% 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. Click here to get the course and also you will get 97% discount.

Learn SwiftUI from Scratch click here to get the course because in this course we are going to build many apps using SwiftUI such as Facebook clone, News app, Notes app and much more.