How can I create Yosemite-style view with translucent/blurry background?

macos interface-builder nsview osx-yosemite
Kornel picture Kornel · Jun 3, 2014 · Viewed 23k times · Source

In Yosemite sidebars have a semitransparent "vibrant" background. How can I create a view like that in 10.10/Xcode 6?

Can I give any view such background? I've found that NSOutlineView will default to such background when you give it "Source list" highlight style, but the sidebar in the Calendar.app doesn't appear to be an NSOutlineView, so I wonder if there's a generic solution for this.

enter image description here

Answer

Kornel picture Kornel · Jun 4, 2014

w00t! I've found example code that uses not-yet-documented view type:

  1. Set XIB's deployment target to 10.10
  2. Embed your view in NSVisualEffectView
  3. In Interface Builder's settings for the view set appearance to "Vibrant Light/Dark". There are other options, like blending "Behind Window" or "Within Window" (the latter requires layers).

There's also NSView method allowsVibrancy that you can override to return YES, but for reasons I don't yet understand this didn't enable vibrancy in my case.

Related questions

Xcode - How to fix 'NSUnknownKeyException', reason: … this class is not key value coding-compliant for the key X" error?

I'm trying to link a UILabel with an IBOutlet created in my class. My application is crashing with the following error. What does this mean? How can I fix it? *** Terminating app due to uncaught exception 'NSUnknownKeyException', reason: '[<…

Read More
Remove autolayout (constraints) in Interface Builder

I'm trying to make my project compatible with Snow Leopard and I am not able to remove the autolayout in the nibs using Interface builder (XCode 4.3 on Lion). Is it possible to remove the constraints and the autolayout in a …

Read More
What is the File's Owner (in Interface builder)?

I am new to Cocoa and I don't understand the concept of File's Owner of a .nib file. Here is the way I would see things : Consider a file myNibFile.nib file that describes how a window looks. Now, I …

Read More