web-dev-qa-db-fra.com

Comment créer une vue de style Yosemite avec un arrière-plan translucide / flou?

Chez Yosemite, les barres latérales ont un fond "vibrant" semi-transparent. Comment puis-je créer une vue comme celle-ci dans 10.10/Xcode 6?

Puis-je donner une vue de ce fond? J'ai trouvé que NSOutlineView par défaut à un tel arrière-plan lorsque vous lui donnez le style de surbrillance "Liste source", mais la barre latérale dans Calendar.app ne semble pas être un NSOutlineView, donc je me demande s'il y a un solution générique pour cela.

enter image description here

macosinterface-buildernsviewosx-yosemite
32
Kornel

Avec l'introduction de la version Yosemite du système d'exploitation OSX, Apple a introduit un nouveau mode appelé vibrance, qui est un flou de diffusion de la lumière, dans la fenêtre Cocoa et composants de fenêtre. C'est un peu comme regarder à travers une porte de douche et utiliser le NSVisualEffectView. Apple explique cet effet ici .

J'utilise cette catégorie sur NSView. Appelez simplement la vue que vous souhaitez rendre vivante. Il est également rétrocompatible avec la pré-Yosemite. (Si vous avez un pré-Yosemite, vous ne verrez pas l'effet)

@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

Les instructions détaillées de @Volomike suivent…

Comment utiliser

  1. Ajoutez AppKit.framework à vos paramètres de projet> Phases de construction> Liez le binaire aux bibliothèques afin qu'il puisse reconnaître NSVisualEffectView.

  2. Faites un délégué de sortie de la vue par défaut de votre fenêtre principale , pas la fenêtre lui-même, dans votre fichier AppDelegate.m ou AppDelegate.mm . (Si vous êtes nouveau dans ce domaine, lisez ce tutoriel .) Pour les besoins ici, supposons que vous l'ayez nommé mainview, qui est alors adressable dans le code comme _mainview.

  3. Incluez la catégorie dans votre projet. Si vous êtes nouveau dans ce domaine, ajoutez la catégorie avant tout @implementation ligne dans votre fichier AppDelegate.m ou AppDelegate.mm .

  4. Dans votre fichier AppDelegate.m ou AppDelegate.mm , dans votre @implementation AppDelegate, dans votre méthode de classe applicationDidFinishLaunching, ajoutez cette ligne de code :

[_mainview insertVibrancyViewBlendingMode:NSVisualEffectBlendingModeBehindWindow];
  1. Maintenant, vous devez apprendre à ajouter du code pour donner les autres éléments de votre fenêtre, ainsi que la fenêtre elle-même, translucidité . Cette translucidité permettra à cet effet de se manifester dans les composants de votre fenêtre selon vos besoins. C'est expliqué ici .

L'effet net est maintenant que soit toute la fenêtre sous la barre de titre, ou seulement les parties que vous voulez (comme une barre latérale), affichera cet effet de dynamisme.

20
Confused Vorlon

w00t! J'ai trouvé exemple de code qui utilise un type de vue non encore documenté:

  1. Définissez la cible de déploiement de XIB sur 10,10
  2. Intégrez votre vue dans NSVisualEffectView
  3. Dans les paramètres d'Interface Builder pour la vue, définissez l'apparence sur "Vibrant Light/Dark". Il existe d'autres options, comme le mélange de "Derrière la fenêtre" ou "Dans la fenêtre" (ce dernier nécessite des couches).

Il y a aussi la méthode NSViewallowsVibrancy que vous pouvez remplacer pour retourner YES, mais pour des raisons que je ne comprends pas encore, cela n'a pas activé le dynamisme dans mon cas.

45
Kornel

Utilisez simplement un NSVisualEffectView. Vous pouvez le peaufiner avec ses champs comme ceci:

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

En savoir plus en regardant la vidéo officielle Apple Apple: WWDC 2014 Session 22

2
Ben Leggiero