SwiftUI Popover Tutorial

In SwiftUI Popover can be attached to a view to display some content. On a iPhone the popover is presented as a Sheet and on an iPad it is presentd like a ContextMenu. In this tutorial a button is displayed which will present a popover when clicked. This tutorial is built for iOS14 and Xcode 12, which can be download at the Apple developer portal.

Open Xcode and either click Create a new Xcode project in Xcode’s startup window, or choose File > New > Project. In the template selector, select iOS as the platform, select App template in the Application section and then click Next.

Enter SwiftUIPopoverTutorial as the Product Name, select SwiftUI as Interface, SwiftUI App as Life Cycle and Swift as Language. Deselect the Include Tests checkbos and click Next. Choose a location to save the project on your Mac.

In the canvas, click Resume to display the preview. If the canvas isn’t visible, select Editor > Editor and Canvas to show it.

In the Project navigator, click to select ContentView.swift. Change the code inside the ContentView struct to

struct ContentView: View {
    // 1.
    @State var isPopoverPresented = false
    
    var body: some View {
        // 2.
        Button(action: {
            self.isPopoverPresented = true
        }) {
            Text("Show Popover")
        }
        // 3.
        .popover(isPresented: $isPopoverPresented) {
            Text("Popover is Presented")
                .font(.largeTitle)
                .frame(width: 500, height: 500)
        }
    }
}

1. The isPopoverPresented State property is a boolean which determines if the popover is presented.

2. When the button is tapped, the isPopoverPresented property is set to true.

3. The popover is displayed with a text with the largeTitle font size.

Go to the Preview and click the Live Preview button. Click the Show Popover button to display the popover.

On an iPad the Popover does not cover the entire screen and an arrow is displayed. Change the ContentView_Previews struct to

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Group {
            ContentView()
                .previewDevice("iPhone 11")
                .previewDisplayName("iPhone 11")
            
            ContentView()
                .previewDevice("iPad (8th generation)")
                .previewDisplayName("iPad")
        }
    }
}

This will add a iPad preview to the Preview pane. Click the Live Preview and click the display Popover button to present the popver on the iPad.

The source code of the SwiftUIPopverTutorial can be downloaded at the ioscreator repository on Github.