Как я могу создать вид в стиле Йосемити с полупрозрачным/размытым фоном?
В боковых панелях 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];
- Теперь вам нужно узнать, как добавить код, чтобы предоставить другие элементы в вашем окне, а также само окно полупрозрачность. Эта прозрачность позволит этому эффекту проявляться в ваших оконных компонентах по мере необходимости. Это объяснено здесь.
Теперь чистый эффект заключается в том, что либо все окно под заголовком, либо только части, которые вы хотите (например, боковая панель), покажут этот эффект вибрации.
Ответ 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