Как я могу создать вид в стиле Йосемити с полупрозрачным/размытым фоном?

В боковых панелях Yosemite есть полупрозрачный "яркий" фон. Как создать такой вид в 10.10/Xcode 6?

Можно ли представить такой фон? Я обнаружил, что NSOutlineView будет по умолчанию использовать такой фон, когда вы дадите ему стиль выделения списка источников, но боковая панель в Calendar.app не выглядит NSOutlineView, поэтому я задаюсь вопросом, существует ли общее решение для это.

enter image description here

Ответ 1

С введением версии операционной системы OSX в Yosemite Apple представила новый режим, называемый vibrancy, который является размытием света, к компонентам окна и окна Cocoa. Это похоже на просмотр двери для душа и использует 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 следуют...

Как использовать

  • Добавьте AppKit.framework в свои настройки проектa > Фазы сборки > Связать двоичные файлы с библиотеками, чтобы он мог распознавать NSVisualEffectView.

  • Сделайте делегат вашего основного окна по умолчанию, а не самого окна, в ваш файл AppDelegate.m или AppDelegate.mm. (Если вы новичок в этом, прочитайте этот учебник.) Для целей здесь позвольте предположить, что вы назвали это как mainview, который затем адресуется в коде как _mainview.

  • Включить категорию в свой проект. Если вы новичок в этом, добавьте категорию перед любой строкой @implementation в файле AppDelegate.m или AppDelegate.mm.

  • В файле AppDelegate.m или AppDelegate.mm, в @implementation AppDelegate, внутри вашего метода класса applicationDidFinishLaunching, добавить эту строку кода

[_mainview insertVibrancyViewBlendingMode:NSVisualEffectBlendingModeBehindWindow];
  1. Теперь вам нужно узнать, как добавить код, чтобы предоставить другие элементы в вашем окне, а также само окно полупрозрачность. Эта прозрачность позволит этому эффекту проявляться в ваших оконных компонентах по мере необходимости. Это объяснено здесь.

Теперь чистый эффект заключается в том, что либо все окно под заголовком, либо только части, которые вы хотите (например, боковая панель), покажут этот эффект вибрации.

Ответ 2

w00t! Я нашел пример кода, который использует не документированный тип вида:

  • Установите цель развертывания XIB в 10.10
  • Вставьте свое представление в NSVisualEffectView
  • В настройках Interface Builder для вида, отображаемого в представлении, "Яркий свет/Темный". Существуют и другие варианты, такие как смешивание "За окном" или "Внутри окна" (для последнего требуются слои).

Там также NSView метод allowsVibrancy, который вы можете переопределить для возврата YES, но по причинам, которые я еще не понял, это не позволило включить в моем случае вибрацию.

Ответ 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 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