{"id":1065,"date":"2018-07-15T22:33:25","date_gmt":"2018-07-15T20:33:25","guid":{"rendered":"http:\/\/www.albertopasca.it\/whiletrue\/?p=1065"},"modified":"2018-06-19T20:14:04","modified_gmt":"2018-06-19T18:14:04","slug":"swift-macos-how-to-make-cool-desktop-apps-using-cocoa","status":"publish","type":"post","link":"https:\/\/www.albertopasca.it\/whiletrue\/swift-macos-how-to-make-cool-desktop-apps-using-cocoa\/","title":{"rendered":"Swift | macOS – How to make cool desktop apps using Cocoa"},"content":{"rendered":"

So, what I want to share today is how to make windows with cool UI in a macOS application written in Cocoa\/Swift.<\/p>\n

This an example of what you see when create a new project from scratch in XCode and run it:<\/p>\n

<\/p>\n

\"\"<\/p>\n

If you like this windows… ok, close this page and ignore the rest.<\/p>\n

Personally I don’t like so much, I prefer to customize a little bit also if my app is very simple.<\/p>\n

For instance, we can remove the Title bar, we can change the background color, we can drag clicking everywhere, we can also add a toolbar and much more…<\/p>\n

This is what I want to achieve in this post:<\/p>\n

\"\"<\/p>\n

A NSWindow without title and titlebar, with a full background color and a toolbar that start on the right.<\/p>\n

Better than the first one, no?<\/p>\n

\n
Let’s go!<\/h6>\n

The first thing to do is to create some Swift Extensions because NSWindowController<\/strong> and NSViewController<\/strong> don’t have the backgroundColor<\/em> method for instance.<\/p>\n

Other extensions that we can create are useful things to reuse in our projects, like\u00a0NSWindowController<\/em> styles and addons.<\/p>\n

NSCOLOR EXTENSION<\/h6>\n

just because if useful…<\/p>\n

\/\/ NSColorExtension.swift\r\nextension NSColor<\/span> {<\/span>\r\n\u00a0 \u00a0 <\/span>static<\/span> var<\/span> defaultBackground<\/strong>: NSColor<\/span> {\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>get<\/span> { \r\n          return<\/span> NSColor<\/span>.init<\/span>(\r\n               red: 83<\/span>\/255<\/span>, \r\n               green: 87<\/span>\/255<\/span>, \r\n               blue: 96<\/span>\/255<\/span>, \r\n               alpha: 1<\/span>) \r\n        }\r\n\u00a0 \u00a0 <\/span>}\r\n}<\/pre>\n
NSVIEW BACKGROUND COLOR<\/h6>\n
\/\/ NSViewExtension.swift\r\nextension NSView<\/span> {<\/span>\r\n\r\n\u00a0 \u00a0 <\/span>var<\/span> backgroundColor<\/strong>: NSColor<\/span>? {\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>get<\/span> {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>if<\/span> let<\/span> colorRef = self<\/span>.layer<\/span>?.backgroundColor<\/span> {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>return<\/span> NSColor<\/span>(cgColor: colorRef)\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>} else<\/span> { return<\/span> nil<\/span> }\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>}\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>set<\/span> {\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>self<\/span>.wantsLayer<\/span> = true<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>self<\/span>.layer<\/span>?.backgroundColor<\/span> = newValue?.cgColor<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span>}\r\n\u00a0 \u00a0 <\/span>}\r\n}<\/pre>\n
NSVIEWCONTROLLER extension<\/h6>\n
\/\/ NSViewControllerExtension.swift\r\nextension<\/span> NSViewController {<\/span>\r\n\u00a0 \u00a0 <\/span>func<\/span> darkBackground<\/strong>() {\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>self<\/span>.<\/span>view.<\/span>backgroundColor = <\/span>NSColor<\/span>.<\/span>defaultBackground\r\n\u00a0 \u00a0 <\/span>}\r\n}<\/pre>\n
and the latest one is for NSWindowController,<\/p>\n
NSWINDOWCONTROLLEr styles<\/h6>\n
\/\/NSWindowControllerExtension.swift\r\nextension<\/span> NSWindowController {<\/span>\r\n\u00a0 \u00a0 <\/span>func<\/span> smartWindow<\/strong>() {\r\n\u00a0 \u00a0 \u00a0 \u00a0<\/span><\/span>self<\/span>.<\/span>window?.<\/span>styleMask.<\/span>insert<\/span>(\r\n<\/span>                 NSWindow<\/span>.<\/span>StyleMask<\/span>.<\/span>unifiedTitleAndToolbar)<\/span>\r\n       self<\/span>.<\/span>window?.<\/span>styleMask.<\/span>insert<\/span>(\r\n<\/span>                 NSWindow<\/span>.<\/span>StyleMask<\/span>.<\/span>fullSizeContentView)<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0<\/span><\/span>self<\/span>.<\/span>window?.<\/span>styleMask.<\/span>insert<\/span>(<\/span>NSWindow<\/span>.<\/span>StyleMask<\/span>.<\/span>titled)\r\n<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0<\/span>self<\/span>.window<\/span>?.toolbar<\/span>?.isVisible<\/span> \u00a0 \u00a0 \u00a0 \u00a0 <\/span>= false<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0<\/span>self<\/span>.window<\/span>?.titleVisibility<\/span>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 <\/span>= .hidden<\/span>\r\n\u00a0 \u00a0 \u00a0 \u00a0<\/span><\/span>self<\/span>.<\/span>window?.<\/span>titlebarAppearsTransparent = <\/span>true<\/span>\r\n\u00a0 \u00a0 <\/span>}\r\n\r\n\u00a0 \u00a0 <\/span>func<\/span> activateWindowDrag<\/strong>() {\r\n\u00a0 \u00a0 \u00a0 \u00a0 <\/span><\/span>self<\/span>.<\/span>window?.<\/span>isMovableByWindowBackground = <\/span>true<\/span>\r\n\u00a0 \u00a0 <\/span>}\r\n}<\/pre>\n
This last extension do the biggest cool part!<\/p>\n
Let’s see how to “colorize” this window and next how to add the toolbar on the right:<\/p>\n