SwiftUIOverlayContainer — A SwiftUI Library for Creating Customized Popup Views

Published on

Get weekly handpicked updates on Swift and SwiftUI!

SwiftUI currently offers popup views such as sheet, fullScreenCover, alert, action sheet, etc. to enrich UI interactions. However, the variety is somewhat limited. To write code for various popup windows more conveniently, I created a simple SwiftUI library — SwiftUIOverlayContainer.

SwiftUIOverlayContainer has been updated to version 2.0, for details, please see SwiftUIOverlayContainer 2.0

SwiftUIOverlayContainer does not provide any predefined view styles, but it gives you full freedom to implement the visual effects you need. The main purpose of OverlayContainer is to help you complete the basic work of animations, interactions, and style customization, allowing developers to focus their time and energy solely on the code of the view itself.

SwiftUIOverlayContainer

The library code has been modified for direct use in Xcode 11

The code philosophy is greatly influenced by PartialSheet, and some of its code has been utilized.

How to Use

  • Add an OverlayContainerManager instance as an environment object to your Root View in your SceneDelegate or App
Swift
@main
struct Test: App {
    let manager = OverlayContainerManager()
    var body: some Scene {
        WindowGroup {
            ContentView()
                .environmentObject(manager)
        }
    }
}
  • Add the OverlayView to your Root View, and if you want, give it a style. In your RootView file at the end of the builder add the following modifier:
Swift
struct ContentView: View {

    var body: some View {
       ...
       .addOverlayContainer(style: <OverlayContainerStyle>)
    }
}
  • In any one of your views, add a reference to the environment object and then just call the showOverlayView<T>(_ onDismiss: (() -> Void)? = nil, @ViewBuilder content: @escaping () -> T) where T: View function whenever you want like this:
Swift
@EnvironmentObject var manager: OverlayContainerManager

...

Button(action: {
    self.manager.showOverlayView({
        print("dismissed")
    }) {
         VStack{
            Text("This is Overlay View")
         }
    }
}, label: {
    Text("Show overlayView")
})

Style Explanation

Swift
let style2 = OverlayContainerStyle(
                                   alignment: .leading,  // Container alignment position
                                   coverColor: Color.gray.opacity(0.3), // Overlay color
                                   shadow:.init (color: Color.black.opacity(0.3), radius: 20, x: 2, y: 0), // Shadow style
                                   blur: nil,  // Blur style
                                   animation: .easeInOut,  // Animation curve
                                   transition:.move(edge:.leading),  // Entrance/exit animation effect
                                   animatable: true,  // Whether to display animation
                                   autoHide: nil,  // Whether to auto-hide, settable by seconds
                                   enableDrag: true,  // Whether to allow swipe to dismiss, currently supports .leading, .trailing, .bottom, .top
                                   clickDismiss: true) // Whether to support dismissing by clicking elsewhere on the screen after display

For more specific applications, please refer to the code DEMO.

Weekly Swift & SwiftUI insights, delivered every Monday night. Join developers worldwide.
Easy unsubscribe, zero spam guaranteed