Setting a background color to an NSView

Christoffer Winterkvist
hyperoslo
Published in
3 min readFeb 19, 2018
Nolan Issachttps://unsplash.com/photos/It0DCaCBr40

macOS (formerly known as OS X) development has always been a passion project for me; it is what made get into app development in the first place. I never really wanted to make applications for the iPhone, I wanted to great apps for macOS that helped me help others. Unfortunately for me, the market for macOS developers in Oslo is, as far as I know, non-existent. Don’t get me wrong I thoroughly enjoy making apps for the iPhone, iPad and the AppleTV, but I’ve never forgotten my roots and how it all got started. I’ve tried to keep it going through hobby projects and adding support macOS for all the frameworks I contribute to if it makes sense that is.

You might wonder why I would spend my time on this when rumors point to Apple unifying the API’s, making macOS more similar to the iOS/tvOS counter-part. Well, we don’t live in that future yet, and I enjoy it. It is just as simple as that.

A lost art

After going back to macOS over a longer period of iOS/tvOS development, I can see how “spoiled.” mobile developers are with convenience. iOS has its roots in macOS, but Apple has done a tremendous job with making day to day operations a lot easier for us developers. Because I feel that macOS development is slowly becoming a lost art-form, I’m going to start to share some tips, tricks, notes about what I’ve stumbled over when programming for the Mac.

We will start off with something simple, setting a background color to a regular view. Even if this might seem obvious to a lot of people, it might not be that straight-forward to some, especially if you are already spoiled with convenience.

First, let’s take a look and how this is done on iOS and tvOS.

It is super straight-forward, we create a UIView with a frame and set the background color using UIColor.

So let’s do the equivalent for macOS.

Creating the view is “same same but different,” instead of a UIView we create an NSView, but you probably knew this already. So let’s take a look further down to see where the two views deviate.

UIView as a property for setting the background color whereas NSView lacks one. Instead, you have to set the background color on the views layer. To make things a tiny bit more inconvenient, by default an NSView does not have a layer attached to it. To get one you have to set wantsLayer to true. This would create a layer and assign it to the optional layer property on the view. This will make your view layer-backed. Last but not least, because we set the background color to the layer, we cannot use NSColor directly but have to use a CGColor, this, of course, is easy to do but again not super convenient in comparison to the iOS counterpart.

So why is layer optional on NSView, the documentation helps to shed some light on this:

Setting the value of this property to true turns the view into a layer-backed view — that is, the view uses a CALayer object to manage its rendered content. Creating a layer-backed view implicitly causes the entire view hierarchy under that view to become layer-backed. Thus, the view and all of its subviews (including subviews of subviews) become layer-backed. The default value of this property is false.

https://developer.apple.com/documentation/appkit/nsview/1483695-wantslayer

That was it, that’s how we set a background color to an NSView.
I’m aiming to share more of my findings both trivial and non-trivial tasks, trying to keep it short and sweet.

--

--

Christoffer Winterkvist
hyperoslo

random hero at @fink-oslo by day, cocoa vigilante by night, dad at dawn. my life is awesome. Previously @hyperoslo