uiwindowuivisualeffectviewmac-catalyst

How to create an UIWindow with Vibrant background in MacCatalyst?

We can create this effect easily with NSWindow and NSVisualEffectView in native mac app but how can we do it in app that was built for MacCatalyst?

enter image description here

of course setting alpha = 0 for UIWindow and add an UIVisualEffectView on it won't do the trick, it's not that simple.

Solution

  • You need to add NSVisualEffectView as a subview of NSWindow.contentView.

    NSWindow isn't available for Mac Catalyst apps, so you have to create a macOS plugin as explained here, or use a library like Dynamic (Full disclosure: I'm the author) to do that without a plugin as follows:

    let nsWindow = Dynamic.NSApplication.sharedApplication.delegate.hostWindowForUIWindow(view.window)

let visualEffectView = Dynamic.NSVisualEffectView(frame: NSZeroRect)
nsWindow.contentView.addSubview(visualEffectView, positioned: -1, relativeTo: nil)
visualEffectView.frame = nsWindow.contentView.bounds.asCGRect
visualEffectView.autoresizingMask = 18 /*NSViewWidthSizable | NSViewHeightSizable*/

    The result is something like this:

    enter image description here

    EDIT: Don't forget to also make the controller's view transparent:

    view.backgroundColor = .clear