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

Question

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.

Answer 1

With the introduction of the Yosemite version of the OSX operating system, Apple introduced a new mode called vibrancy, which is a light diffusion blur, to Cocoa window and window components. It's sort of like looking through a shower door, and uses the NSVisualEffectView. Apple explains this effect here.

I use this category on NSView. Simply call on the view you want to make vibrant. It is also backwards compatible with pre-Yosemite. (If you have a pre-Yosemite, you won't see the effect)

@implementation NSView (HS)

-(instancetype)insertVibrancyViewBlendingMode:(NSVisualEffectBlendingMode)mode
{
    Class vibrantClass=NSClassFromString(@"NSVisualEffectView");
    if (vibrantClass)
    {
        NSVisualEffectView *vibrant=[[vibrantClass alloc] initWithFrame:self.bounds];
        [vibrant setAutoresizingMask:NSViewWidthSizable|NSViewHeightSizable];
        // uncomment for dark mode instead of light mode
        // [vibrant setAppearance:[NSAppearance appearanceNamed:NSAppearanceNameVibrantDark]];
        [vibrant setBlendingMode:mode];
        [self addSubview:vibrant positioned:NSWindowBelow relativeTo:nil];

        return vibrant;
    }

    return nil;
}

@end

Detailed instructions from @Volomike follow…

How To Use

1. Add AppKit.framework to your Project Settings > Build Phases > Link Binary with Libraries so that it can recognize NSVisualEffectView.

2. Make an outlet delegate of your main window's default view, not the window itself, to your AppDelegate.m or AppDelegate.mm file. (If you're new at that, read this tutorial.) For purposes here, let's assume you named this as mainview, which then is addressable in code as _mainview.

3. Include the category in your project. If you're new at that, add the category before any @implementation line in your AppDelegate.m or AppDelegate.mm file.

4. In your AppDelegate.m or AppDelegate.mm file, in your @implementation AppDelegate, inside your applicationDidFinishLaunching class method, add this line of code:

[_mainview insertVibrancyViewBlendingMode:NSVisualEffectBlendingModeBehindWindow];

5. Now you need to learn how to add some code to give the other elements on your window, as well as the window itself, translucency. That translucency will allow this effect to show through into your window components as you require. This is explained here.

The net effect now is that either the entire window below the titlebar, or only parts you want (such as a sidebar), will show this vibrancy effect.

Answer 2

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.

Answer 3

Simply use an NSVisualEffectView. You can further tweak it with its fields like so:

class MyFancyView: NSVisualEffectView {
    func myConfigureFunc() {

        // Use blendingMode to specify what exactly is blurred

        blendingMode = .behindWindow // [DEFAULT] ignores in-window content and only blurs content behind the window
        blendingMode = .withinWindow // ignores content behind the window and only blurs in-window content behind this view


        // Use material to specify how the blur draws (light/dark/etc.)

        material = .light           // The Vibrant Light look we see in countless Apple apps' sidebars, Sierra notification center, etc.
        material = .dark            // The Vibrant Dark look we all know and love from HUDs, Launchpad, Yosemite & El Capitan notification center, etc.

        material = .appearanceBased // [DEFAULT] Automatically uses .light or .dark, depending on the view's appearance field

        material = .titlebar        // The material the system uses in titlebars. Designed to be used with blendingMode = .withinWindow
        material = .selection       // A special material for selection. The material will vary depending on the effectiveAppearance, active state, and emphasized state.

        if #available(OSX 10.11, *) {

            // Materials introduced in 10.11 (El Capitan)

            material = .mediumLight // Not quite as light as .light
            material = .ultraDark   // Much darker than .dark

            material = .menu        // The material the system uses for menus
            material = .popover     // The material the system uses for popovers
            material = .sidebar     // The material the system uses for sidebars
        }


        // Use state to specify when the visual effect appears

        state = .active                   // Always show the visual effect
        state = .inactive                 // Never show the visual effect (behaves like a normal view)
        state = .followsWindowActiveState // [DEFAULT] Active when window is active, not when window is not
    }
}

Learn more by watching the official Apple video: WWDC 2014 Session 220