3

I have created a window using NSVisualEffectView to get blur and rounded corners. Like here

The problem is I don't see my button in the window when I have NSVisualEffectView code. If I remove the code, the button is displayed. What is going wrong?

NSVisualEffectView code in AppDelegate.swift:

func applicationDidFinishLaunching(_ aNotification: Notification) {
        // Insert code here to initialize your application
        guard let window = NSApplication.shared().windows.first else { return }
        let effect = NSVisualEffectView(frame: NSRect(x: 0, y: 0, width: 0, height: 0))
        effect.blendingMode = .behindWindow
        effect.state = .active
        effect.material = .dark
        effect.wantsLayer = true
        effect.layer?.cornerRadius = 15.0
        effect.layer?.masksToBounds = true
        window.isOpaque = false
        window.backgroundColor = .clear
        window.contentView = effect
        window.titlebarAppearsTransparent = true
        window.titleVisibility = .hidden
    }

I have added some buttons in storyboard. When I run the project I don't see any buttons.

enter image description here

When I remove everything from applicationDidFinishLaunching(_ aNotification: Notification) i.e., NSVisualEffectView code, I can see the buttons.

enter image description here

Can anyone tell me what is happening?

Community
  • 1
  • 1
ssh
  • 491
  • 1
  • 8
  • 19

2 Answers2

2

I think I should have corrected you in your previous question only but I didn't.

You are using Storyboard so why are you creating NSVisualViewEffect variable in your code?

Search for nsvisualeffectview in the right panel(Utilities panel) where you search for buttons etc. (object library).

enter image description here

Drag it and resize it according to your main view controller.

To add the blur effect and mode, go to "Attribites Inspector" in the "Utilities panel"

enter image description here

and set window.backgroundColor = .clear and window.isOpaque = false

func applicationDidFinishLaunching(_ aNotification: Notification) {
        // Insert code here to initialize your application
        guard let window = NSApplication.shared.windows.first else { return }
        window.isOpaque = false
        window.backgroundColor = .clear
}

Now you can add your buttons, text fields and run the project. You can see all your added elements.

I hope it helps!

SkrewEverything
  • 2,393
  • 1
  • 19
  • 50
-1

window is above the view you are adding buttons to, so the buttons are below the blurred-out window, and are therefore impossible to see. Why not add the visualEffectView to the same view as the buttons? You'd need to insert it below the buttons to make the buttons visible.

creeperspeak
  • 5,403
  • 1
  • 17
  • 38
  • How can I do that? I mean, i'm applying `NSVisualEffectView` to `window` and adding buttons on top of `window` through storyboard. So, how can I bring the button in-front? I have experience with web design and in that I usually have `z-index` to place an element behind or in front. But how to do it in cocoa? I'm new to cocoa. How can I insert that view below the button? – ssh Mar 14 '17 at 00:33
  • You really _shouldn't_ be adding stuff to `window` at all, and tbh I didn't even know it was possible to do that in storyboard at all. You really should be adding the visualEffectView and all buttons to a `UIView`, and the standard place for that is the `view` property of a `UIViewController`. As for setting the "z-index", all subviews of a view in cocoa have an index as well. So you can say `self.view.insertSubview(button, at: 0)` to put something on the very "bottom" of a stack of subviews. – creeperspeak Mar 14 '17 at 00:39
  • I have tried applying the effect to `NSViewController` instead of `window`. Still I can't see the buttons. Can you please show how to do it? I'm new to mac development and I can't get through – ssh Mar 14 '17 at 01:16
  • SkrewEverything's answer solved my problem. Thanks for helping. – ssh Mar 14 '17 at 04:03