How can I use NSVisualEffectView in window's title bar?

问题:

In OS X Yosemite, Apple introduced a new class NSVisualEffectView. Currently, this class is undocumented, but we can use it in Interface Builder.

How can I use NSVisualEffectView in the window's title bar?

Here's example: in Safari, when you scroll, the content appears under the toolbar and titlebar with a vibrance and blur effect.

回答1:

@sgonzalez's answer forced me to explore NSWindow.h file where i found titlebarAppearsTransparent property.

So we get:

class BluredWindow: NSWindow {      override func awakeFromNib() {      let visualEffectView = NSVisualEffectView(frame: NSMakeRect(0, 0, 300, 180))     visualEffectView.material = NSVisualEffectView.Material.dark     visualEffectView.blendingMode = NSVisualEffectView.BlendingMode.behindWindow     visualEffectView.state = NSVisualEffectView.State.active      self.styleMask = self.styleMask | NSFullSizeContentViewWindowMask     self.titlebarAppearsTransparent = true     //self.appearance = NSAppearance(named: NSAppearanceNameVibrantDark)        self.contentView.addSubview(visualEffectView)      self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[visualEffectView]-0-|",                                                                     options: NSLayoutConstraint.FormatOptions.directionLeadingToTrailing,                                                                    metrics: nil,                                                                     views: ["visualEffectView":visualEffectView]))      self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[visualEffectView]-0-|",                                                                    options: NSLayoutConstraint.FormatOptions.directionLeadingToTrailing,                                                                     metrics: nil,                                                                     views: ["visualEffectView":visualEffectView])) 

Also you can setup NSVisualEffectView in IB it will be expanded on titlebar.

回答2:

You need to modify your window's stylemask to include NSFullSizeContentViewWindowMask so that its content view can "overflow" into it.

You can easily accomplish this by adding this line to your AppDelegate:

self.window.styleMask = self.window.styleMask | NSFullSizeContentViewWindowMask; 

If you want it to appear dark, like in FaceTime, you need to also add this line of code:

self.window.appearance = NSAppearance(named: NSAppearanceNameVibrantDark) 

回答3:

Step by step Tutorial with examples:

http://stylekit.org/blog/2016/01/23/Chromeless-window/

Setting up translucency:

1. Set the styleMask of your NSWindow subclass to NSFullSizeContentViewWindowMask (so that the translucency will also be visible in the titlebar area, leave this out and the titlebar area will be blank)
2. Set the self.titlebarAppearsTransparent = true (hides the titlebar default graphics)
3. Add the code bellow to your NSWindow subclass: (you should now have a translucent window)

.

let visualEffectView = NSVisualEffectView(frame: NSMakeRect(0, 0, 0, 0))//

Also allows you to create chrome-less windows that are translucent:

文章来源: How can I use NSVisualEffectView in window's title bar?