Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/lukakerr/NSWindowStyles

A showcase of the many different styles of windows possible with NSWindow on macOS
https://github.com/lukakerr/NSWindowStyles

cocoa design macos nswindow osx swift swift-4

Last synced: about 1 month ago
JSON representation

A showcase of the many different styles of windows possible with NSWindow on macOS

Host: GitHub
URL: https://github.com/lukakerr/NSWindowStyles
Owner: lukakerr
License: apache-2.0
Created: 2018-03-04T03:24:10.000Z (over 6 years ago)
Default Branch: master
Last Pushed: 2021-05-30T23:29:35.000Z (over 3 years ago)
Last Synced: 2024-04-04T18:32:51.073Z (6 months ago)
Topics: cocoa, design, macos, nswindow, osx, swift, swift-4
Language: Swift
Homepage: https://lukakerr.github.io/swift/nswindow-styles
Size: 925 KB
Stars: 1,087
Watchers: 15
Forks: 40
Open Issues: 2
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # Swift NSWindow Style Showcase

[![Swift 5](https://img.shields.io/badge/swift-5-orange.svg?style=flat)](https://github.com/apple/swift)

[![Platform](http://img.shields.io/badge/platform-macOS-red.svg?style=flat)](https://developer.apple.com/macos/)

[![Github](http://img.shields.io/badge/github-lukakerr-green.svg?style=flat)](https://github.com/lukakerr)

A showcase of many of the different styles of windows possible with NSWindow on MacOS. In some examples, NSToolbar, and NSVisualEffectView are used. No private API's are used.

To test each style, clone the project, open it in Xcode, uncomment each block of code in `WindowController.swift` and run. The numbers above each block correspond to each style below.

All code is in `WindowController.swift` in the `windowDidLoad` function. You should just be able to place each block inside that function to get the exact same result.

If you have a style to add, please make a pull request.

### 1. Hide title

Don't show the title text in the titlebar.



  



```swift

window?.titleVisibility = .hidden

```

### 2. Hide titlebar

Hide the titlebar completely.



  



```swift

window?.styleMask.remove(.titled)

```

### 3. Vibrant background

Create a vibrant background where whatever is behind the window can be slightly seen. This uses `NSVisualEffectView`.



  



```swift

let visualEffect = NSVisualEffectView()

visualEffect.blendingMode = .behindWindow

visualEffect.state = .active

visualEffect.material = .dark

window?.contentView = visualEffect

```

`visualEffect.material` can take multiple values including:

- `.appearanceBased`: based on the views appearance

- `.dark`: dark appearance

- `.ultraDark`: ultra dark appearance

- `.light`: light appearance

- `.mediumLight`: medium light appearance

- others such as `.menu`, `.popover`, `.selection`, `.sidebar` and `.titlebar`

### 4. Vibrant background with transparent titlebar

Same as above, with a transparent titlebar.



  



```swift

let visualEffect = NSVisualEffectView()

visualEffect.blendingMode = .behindWindow

visualEffect.state = .active

visualEffect.material = .dark

window?.contentView = visualEffect

window?.titlebarAppearsTransparent = true

window?.styleMask.insert(.fullSizeContentView)

```

### 5. Vibrant background without titlebar

Same as above, without the titlebar.



  



```swift

let visualEffect = NSVisualEffectView()

visualEffect.blendingMode = .behindWindow

visualEffect.state = .active

visualEffect.material = .dark

window?.contentView = visualEffect

window?.styleMask.remove(.titled)

window?.isMovableByWindowBackground = true

```

### 6. Vibrant background with custom border radius and no titlebar

A vibrant window with a custom border radius. The border radius value can be changed at `visualEffect.layer?.cornerRadius = 16.0`.



  



```swift

let visualEffect = NSVisualEffectView()

visualEffect.translatesAutoresizingMaskIntoConstraints = false

visualEffect.material = .dark

visualEffect.state = .active

visualEffect.wantsLayer = true

visualEffect.layer?.cornerRadius = 16.0

window?.titleVisibility = .hidden

window?.styleMask.remove(.titled)

window?.backgroundColor = .clear

window?.isMovableByWindowBackground = true

window?.contentView?.addSubview(visualEffect)

guard let constraints = window?.contentView else {

  return

}

visualEffect.leadingAnchor.constraint(equalTo: constraints.leadingAnchor).isActive = true

visualEffect.trailingAnchor.constraint(equalTo: constraints.trailingAnchor).isActive = true

visualEffect.topAnchor.constraint(equalTo: constraints.topAnchor).isActive = true

visualEffect.bottomAnchor.constraint(equalTo: constraints.bottomAnchor).isActive = true

```

### 7. Vibrant background with transparent titlebar and no window controls

A vibrant window with a standard border radius and no window controls or title.



    



```swift

let visualEffect = NSVisualEffectView()

visualEffect.blendingMode = .behindWindow

visualEffect.state = .active

visualEffect.material = .dark

window?.contentView = visualEffect

window?.styleMask.insert(.titled)

window?.titlebarAppearsTransparent = true

window?.titleVisibility = .hidden

window?.standardWindowButton(.miniaturizeButton)?.isHidden = true

window?.standardWindowButton(.closeButton)?.isHidden = true

window?.standardWindowButton(.zoomButton)?.isHidden = true

window?.isMovableByWindowBackground = true

```

### 8. Transparent titlebar

A window with a transparent titlebar.



  



```swift

window?.titlebarAppearsTransparent = true

```

### 9. Transparent titlebar with background color

Same as above with a background color.



  



```swift

window?.titlebarAppearsTransparent = true

window?.backgroundColor = .red

```

### 10. Toolbar

A window with a toolbar.



  



```swift

let customToolbar = NSToolbar()

window?.titleVisibility = .hidden

window?.toolbar = customToolbar

```

### 11. Transparent toolbar

Same as above, with the toolbar transparent.



  



```swift

let customToolbar = NSToolbar()

window?.titlebarAppearsTransparent = true

window?.titleVisibility = .hidden

window?.toolbar = customToolbar

```

### 12. Transparent toolbar without seperator

Same as above, without the toolbar seperator.



  



```swift

let customToolbar = NSToolbar()

customToolbar.showsBaselineSeparator = false

window?.titlebarAppearsTransparent = true

window?.titleVisibility = .hidden

window?.toolbar = customToolbar

```

### 13. Transparent toolbar with background color and without seperator

Same as above, with a background color.



  



```swift

let customToolbar = NSToolbar()

customToolbar.showsBaselineSeparator = false

window?.titlebarAppearsTransparent = true

window?.titleVisibility = .hidden

window?.backgroundColor = .red

window?.toolbar = customToolbar

```

### 14. Translucent toolbar

A translucent toolbar allowing for content behind the toolbar to be slightly seen.



  



```swift

let customToolbar = NSToolbar()

window?.titleVisibility = .hidden

window?.styleMask.insert(.fullSizeContentView)

window?.contentView?.wantsLayer = true

window?.contentView?.layer?.contents = NSImage(named: NSImage.Name("Background"))

window?.toolbar = customToolbar

```

### 15. Translucent titlebar

Same as above with a titlebar instead of a toolbar.



  



```swift

window?.titleVisibility = .hidden

window?.styleMask.insert(.fullSizeContentView)

window?.contentView?.wantsLayer = true

window?.contentView?.layer?.contents = NSImage(named: NSImage.Name("Background"))

```

### 16. Transparent titlebar without title

Same as above with a transparent titlebar.



  



```swift

window?.titleVisibility = .hidden

window?.styleMask.insert(.fullSizeContentView)

window?.titlebarAppearsTransparent = true

window?.contentView?.wantsLayer = true

window?.contentView?.layer?.contents = NSImage(named: NSImage.Name("Background"))

```

### 17. macOS Mojave dark mode

The macOS Mojave dark mode appearance.







```swift

if #available(OSX 10.14, *) {

  window?.appearance = NSAppearance(named: .darkAqua)

}

```