macos - 如何创建具有半透明/模糊背景的优胜美地风格的视图？

Question

在优胜美地侧边栏有一个半透明的“充满活力”的背景。如何在 10.10/Xcode 6 中创建这样的视图？

我可以给出这样的背景吗？我发现NSOutlineView当你给它“源列表”突出显示样式时，它会默认为这样的背景，但是 Calendar.app 中的侧边栏似乎不是 NSOutlineView，所以我想知道是否有一个通用的解决方案。

Answer 1

w00t！我找到了使用尚未记录的视图类型的示例代码：

1. 将 XIB 的部署目标设置为 10.10
2. 嵌入您的视图NSVisualEffectView
3. 在 Interface Builder 的视图设置中，将外观设置为“Vibrant Light/Dark”。还有其他选项，例如混合“Behind Window”或“Within Window”（后者需要图层）。

还有NSView一种方法allowsVibrancy可以覆盖为 return YES，但由于我还不明白的原因，这在我的情况下并没有启用活力。

Answer 2

随着 OSX 操作系统 Yosemite 版本的推出，Apple 为 Cocoa 窗口和窗口组件引入了一种名为vibrancy的新模式，即光漫射模糊。这有点像透过淋浴门看，并使用NSVisualEffectView. Apple在这里解释了这种效果。

我在 NSView 上使用这个类别。只需调用您想要使其充满活力的视图。它还向后兼容 pre-Yosemite。（如果你有pre-Yosemite，你不会看到效果）

@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

来自@Volomike 的详细说明如下……</p>

如何使用

1. 将AppKit.framework添加到您的项目设置 > 构建阶段 > 将二进制文件与库链接，以便它可以识别 NSVisualEffectView。

2. 为您的AppDelegate.m 或 AppDelegate.mm 文件制作主窗口默认视图的出口代表，而不是窗口本身。（如果您是新手，请阅读本教程。）出于此处的目的，我们假设您将其命名为，然后在代码中可寻址为。mainview_mainview

3. 在您的项目中包含该类别。如果您是新手，请在AppDelegate.m 或 AppDelegate.mm 文件@implementation中的任何行之前添加类别。

4. 在您的AppDelegate.m 或 AppDelegate.mm 文件中，在@implementation AppDelegate您的applicationDidFinishLaunching类方法中，添加以下代码行：

[_mainview insertVibrancyViewBlendingMode:NSVisualEffectBlendingModeBehindWindow];

5. 现在您需要学习如何添加一些代码来为窗口上的其他元素以及窗口本身赋予半透明性。这种半透明性将允许这种效果根据您的需要显示到您的窗口组件中。这是解释here。

现在的最终效果是，标题栏下方的整个窗口或仅您想要的部分（例如侧边栏）将显示这种活力效果。

Answer 3

只需使用NSVisualEffectView. 您可以使用其字段进一步调整它，如下所示：

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
    }
}

观看 Apple 官方视频了解更多信息：WWDC 2014 Session 220