如何使用

Question

在优胜美地侧边栏上有半透明的＆＃34;充满活力的＆＃34;背景。如何在10.10 / Xcode 6中创建类似的视图？

我可以提供任何观点这样的背景吗？我发现NSOutlineView默认为这样的背景，当你提供它时，＃34;来源列表＆＃34;突出显示样式，但Calendar.app中的侧边栏似乎不是NSOutlineView，所以我想知道是否有一个通用的解决方案。

enter image description here

Answer 1

w00t！我发现example code使用了尚未记录的视图类型：

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

还有NSView方法allowsVibrancy您可以覆盖以返回YES，但由于我还不了解的原因，我的情况并没有启用活力。

Answer 2

随着Yosemite版本的OSX操作系统的推出，Apple向Cocoa窗口和窗口组件引入了一种名为 vibrancy 的新模式，这是一种光扩散模糊。这有点像透过淋浴门看，并使用NSVisualEffectView。 Apple explains this effect here。

我在NSView上使用此类别。只需打电话给您想要充满活力的视图。它也与优胜美地前向兼容。（如果你有一个前优胜美地，你就不会看到效果）

@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的详细说明请关注......

如何使用

将 AppKit.framework 添加到您的项目设置＆gt;构建阶段＆gt; 将二进制文件链接到库，以便它可以识别NSVisualEffectView。
将主窗口的默认视图的插座代理，而非窗口本身设置为 AppDelegate.m或AppDelegate .mm文件。（如果你是新手，read this tutorial。）为了达到此目的，我们假设你将其命名为mainview，然后在代码中可以_mainview进行寻址
在项目中包含类别。如果您是新用户，请在 AppDelegate.m或AppDelegate.mm文件中的任意@implementation行之前添加类别。
在 AppDelegate.m或AppDelegate.mm文件中，在@implementation AppDelegate内applicationDidFinishLaunching类方法中，添加此行代码：

[_mainview insertVibrancyViewBlendingMode:NSVisualEffectBlendingModeBehindWindow];

现在您需要了解如何添加一些代码以在窗口上提供其他元素，以及窗口本身半透明。这种半透明效果将允许此效果显示在您需要的窗口组件中。这是explained 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

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

3 个答案:

如何使用