web-dev-qa-db-ja.com

半透明/ぼやけた背景でヨセミテスタイルのビューを作成するにはどうすればよいですか？

ヨセミテでは、サイドバーには半透明の「鮮やかな」背景があります。 10.10/Xcode 6でそのようなビューを作成するにはどうすればよいですか？

このような背景を表示できますか？ NSOutlineViewは、「ソースリスト」ハイライトスタイルを指定すると、デフォルトでこのような背景になりますが、Calendar.appのサイドバーはNSOutlineViewに見えないので、このための一般的なソリューション。

enter image description here

macosinterface-buildernsviewosx-yosemite
32
Kornel

OSXオペレーティングシステムのヨセミテバージョンの導入に伴い、Appleはvibrancyと呼ばれる新しいモードを導入しました。これは、Cocoaウィンドウとウィンドウコンポーネント。シャワーのドアを覗くようなもので、NSVisualEffectViewを使用します。 Apple ここでこの効果を説明 。

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の詳細な手順は次のとおりです…

使い方

  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];
  1. 次に、コードを追加する方法を学習して、ウィンドウの他の要素とウィンドウ自体を提供する方法を学ぶ必要があります半透明。この半透明性により、必要に応じてこの効果がウィンドウコンポーネントに透けて見えます。これは ここで説明 です。

現在の最終的な効果は、タイトルバーの下のウィンドウ全体、または必要な部分（サイドバーなど）のみがこの鮮やかな効果を示すことです。

20
Confused Vorlon

w00t！ コード例 まだ文書化されていないビュータイプを使用しています：

  1. XIBの展開ターゲットを10.10に設定します
  2. ビューをNSVisualEffectViewに埋め込みます
  3. Interface Builderのビューの設定で、外観を「Vibrant Light/Dark」に設定します。 「Behind Window」または「Within Window」のブレンドなど、他のオプションがあります（後者にはレイヤーが必要です）。

NSViewを返すためにオーバーライドできるallowsVibrancyメソッドYESもありますが、私の場合、これが活気を有効にしないという理由がまだ理解できていません。

45
Kornel

単に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 22

2
Ben Leggiero