Search code examples
macoscocoaswift3macos-sierra

Is there a boilerplate somewhere for a MacOS application with a dark sidebar


Trying to learn Swift and MacOS application development. I'm looking for a boilerplate project for a rather 'standard' MacOS application as seen here - dark sidebar and main content window.

I'd appreciate any pointers.

enter image description here


Solution

  • I don't have a boilerplate project to point you at (and requests for “a book, tool, software library, tutorial or other off-site resource” are off-topic anyway). But I can tell you how to get two of the main customizations you see in that screen shot:

    • To get the dark appearance, you set the appearance property of the sidebar's top-level view to NSAppearance(named: NSAppearanceNameVibrantDark). For example, in your sidebar view controller:

      class SidebarController: NSViewController {
      
          override func viewDidLoad() {
              super.viewDidLoad()
              view.appearance = NSAppearance(named: NSAppearanceNameVibrantDark)
          }
      
    • To get the fat titlebar with the search box requires two steps.

      1. Give the window a toolbar. Delete the standard items (Colors, Fonts, Print) from the toolbar and add a search field to it. Set the toolbar's “Display” to “Icon Only”.

      2. In code, set the window's titleVisibility to .hidden. For example, in your window controller:

        class MainWindowController: NSWindowController {
        
            override func windowDidLoad() {
                super.windowDidLoad()
        
                window?.titleVisibility = .hidden
            }
        

        That setting tells AppKit to merge the toolbar into the title bar and not draw the window title. If you want to show the window title, add a label to the toolbar and set its stringValue to your window title.

    Result: demo