Cocoa: Make a CurrencyX-like Window

Published in

Get Schwifty

3 min readJul 4, 2016

Feature of CurrencyX-like window：

* No Title Bar

* Full Size Content

* Resizable Vertical Only

* Blur Effect

No Title Bar

Expected:

We can configure appearance of window using attribute inspector in storyboard, the first checkbox is Title Bar，if we uncheck it, our window will look like below:

The problem is, the default round corner and traffic lights are missing. Moreover, window is undraggable. That’s not what we want.

NoTitleBarWindowController

All we need can be easily achieved by inheriting NSWindowController.

import Cocoa
class NoTitleBarWindowController: NSWindowController {override func windowDidLoad() {
        super.windowDidLoad()
    
        if let window = self.window {
            window.titleVisibility = .Hidden
            window.titlebarAppearsTransparent = true
        }
    }
}

Then set NoTitleBarWindowController as the class of window controller in storyboard. We do two little things:

* Hide Title

* Set Title Bar Appears Transparent

Full Size Content

It’s a simple trick, all we need is select Full Size Content View in storyboard. The image below shows the difference of before and after.

Resizable Vertical Only

CurrencyX window has a fixed width while it’s height is resizable which enables as much entries of currency display within the window as our user want. We can implement fixed width by constraint the max and min value of width in content to be the same. Hence the cursor will be resize icon only if it hovers over window’s vertical edge.

Configure content size of window in size inspector of storyboard:

Content Size
 Width: 370 Height: 500
Max Content Size
 Width: 370 Height: 9999
Min Content Size
 Width: 370 Height: 200

Blur Effect

Like iOS, Adding a blur effect is achieved by dragging a NSVisualEffectView as subview of content view controller’s view owned by window controller.

Final Result: