web-dev-qa-db-ja.com

ウィンドウのタイトルバーでNSVisualEffectViewを使用するにはどうすればよいですか？

OS X Yosemiteでは、Appleは新しいクラスNSVisualEffectViewを導入しました。現在、このクラスは文書化されていませんが、InterfaceBuilderで使用できます。

ウィンドウのタイトルバーでNSVisualEffectViewを使用するにはどうすればよいですか？

次に例を示します。Safariでは、スクロールすると、コンテンツがツールバーとタイトルバーの下に表示され、鮮やかでぼかし効果があります。

enter image description here

macososx-yosemitetitlebar
14
Nikolai Nagornyi

@sgonzalezの回答により、titlebarAppearsTransparentプロパティが見つかったNSWindow.hファイルを探索する必要がありました。

したがって、次のようになります。

class BluredWindow: NSWindow {

    override func awakeFromNib() {

    let visualEffectView = NSVisualEffectView(frame: NSMakeRect(0, 0, 300, 180))
    visualEffectView.material = NSVisualEffectView.Material.dark
    visualEffectView.blendingMode = NSVisualEffectView.BlendingMode.behindWindow
    visualEffectView.state = NSVisualEffectView.State.active

    self.styleMask = self.styleMask | NSFullSizeContentViewWindowMask
    self.titlebarAppearsTransparent = true
    //self.appearance = NSAppearance(named: NSAppearanceNameVibrantDark)



    self.contentView.addSubview(visualEffectView)

    self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "V:|-0-[visualEffectView]-0-|", 
                                                                   options: NSLayoutConstraint.FormatOptions.directionLeadingToTrailing,
                                                                   metrics: nil, 
                                                                   views: ["visualEffectView":visualEffectView]))

    self.contentView.addConstraints(NSLayoutConstraint.constraints(withVisualFormat: "H:|-0-[visualEffectView]-0-|",
                                                                   options: NSLayoutConstraint.FormatOptions.directionLeadingToTrailing, 
                                                                   metrics: nil, 
                                                                   views: ["visualEffectView":visualEffectView]))

また、IBでNSVisualEffectViewを設定することもできます。これは、タイトルバーで展開されます。

19
Nikolai Nagornyi

ウィンドウのスタイルマスクを変更してNSFullSizeContentViewWindowMaskを含め、コンテンツビューがウィンドウに「オーバーフロー」できるようにする必要があります。

この行をAppDelegateに追加することで、これを簡単に実現できます。

self.window.styleMask = self.window.styleMask | NSFullSizeContentViewWindowMask;

FaceTimeのように暗く表示したい場合は、次のコード行も追加する必要があります。

self.window.appearance = NSAppearance(named: NSAppearanceNameVibrantDark)
17
sgonzalez

例を含むステップバイステップのチュートリアル：

http://eon.codes/blog/2016/01/23/Chromeless-window/

半透明の設定：

  1. NSWindowサブクラスのstyleMaskをNSFullSizeContentViewWindowMaskに設定します（半透明性がタイトルバー領域にも表示されるように、これを省略してタイトルバー領域を空白にします）
  2. をセットする self.titlebarAppearsTransparent = true（タイトルバーのデフォルトのグラフィックを非表示にします）
  3. 以下のコードをNSWindowサブクラスに追加します:(これで半透明のウィンドウができたはずです）

。

let visualEffectView = NSVisualEffectView(frame: NSMakeRect(0, 0, 0, 0))//<---the width and height is set to 0, as this doesn't matter. 
visualEffectView.material = NSVisualEffectMaterial.AppearanceBased//Dark,MediumLight,PopOver,UltraDark,AppearanceBased,Titlebar,Menu
visualEffectView.blendingMode = NSVisualEffectBlendingMode.BehindWindow//I think if you set this to WithinWindow you get the effect safari has in its TitleBar. It should have an Opaque background behind it or else it will not work well
visualEffectView.state = NSVisualEffectState.Active//FollowsWindowActiveState,Inactive
self.contentView = visualEffectView/*you can also add the visualEffectView to the contentview, just add some width and height to the visualEffectView, you also need to flip the view if you like to work from TopLeft, do this through subclassing*/

enter image description here

また、半透明のクロムのないウィンドウを作成することもできます。

enter image description here

9
eonist