Colouring buttons

Colouring the background

1) Add the following to viewWillAppear:

for button in allButtons {

button.state = NSOffState
button.isBordered = true

button.wantsLayer = true
let blue = NSColor.blue.cgColor
button.layer?.backgroundColor = blue

}

NSColor.blue.cgColor is the cgColor property of an NSColor, cgLayers cannot deal with NSColor directly.
button.state (the other is NSOffState) and isBordered allow you to quickly loop over the various examples.

Note the layer?: layer! caused a crash when I first ran the app, though it worked ok on subsequent builds. In any case, it’s good form to not force unwrap your optionals.

If you put this code in viewDidLoad you may need to run the app several times before the layer-based changes show up, so I found it vital to override viewWillAppear instead.

a) bordered buttons:

b) bordered buttons in their ‘on’ state

c) unbordered buttons:

The buttonness of buttons does not go away with their unbordered state – they still respond to mouseclicks – but the visual feedback of ‘you have pressed a button’ vanishes, so there’s no point in providing the ‘on’ state here.

1d) For completion’s sake, you can get the same effect by creating a subclass of NSButton and overriding drawRect(dirtyRect: NSRect) instead:

class DrawAnythingButton: NSButton {

override func draw(_ dirtyRect: NSRect) {
NSColor.yellow.set()
NSBezierPath.fill(self.bounds)
super.draw(dirtyRect)
}

}

Note that the order of calls becomes extremely important here – if you call super.draw(dirtyRect) first – as the template suggests – you will overpaint all of the nice button-ness of your buttons and get the following:

borderColor

Return all buttons back to the NSButton class.

2) The first example uses the ‘backgroundColor’ property of the button’s layer; this example uses borderColor

button.layer?.borderColor = red
button.layer?.borderWidth = 2

a) bordered buttons

b) bordered buttons, all in their ‘on’ state:

c) unbordered buttons

3) Apple is making various noises about depleting, soft or otherwise, NSCell and its derivatives. They are already strongly discouraging cell-based tables (these still work but should not be used in production code); they have depleted NSMatrix (it still works, but you’re not supposed to use it because they haven’t fully deprecated it _yet_). So use the following NSButtonCell based code with extreme care:

let myCell = button.cell as! NSButtonCell
myCell.backgroundColor = NSColor.green

a) mostly bordered buttons with button.wantsLayer = true

If I hadn’t known this code was working, I would have discarded it as an option out of hand.

b) unbordered buttons and wantsLayer set to false

For comparison, this is what the same settings looked like in the previous version:

b) bordered, NSOnState

c) unbordered (off/on)

(I’m giving up on this branch: with layers, unbordered obviously does not work for the majority of buttons. Check boxes and radio buttons, on the other hand, may not be a hundred percent useful yet – there’s a considerable deviation from the colour I’ve used to the colour displayed – but I can see myself using a layer-based filter effect at some point.)

5a) And since the backing layer is almost there, here’s one with a white balance filter (‘WhitePoint adjust’); and the balance colour set to tangerine:

b) whitePoint Adjust, bordered buttons, all on

set each button’s image to purple, the alternate image to purpleHighlight, and the scaling to .scaleAxesIndependently (you can do that in IB, but this is quicker; layer or not makes no visible difference):

6a) bordered buttons

b) bordered buttons, NSOnState

Apple? This ‘famous for graphical interfaces’ thing? I think we need to talk.

Remove those images. You do not want those images. Those images do not improve your interface.

7) We still want purple buttons. Obviously, the way to go is a PurpleButton class

class PurpleButton: NSButton {

override func updateLayer() {
if self.state == NSOnState{
self.layer?.contents = NSImage(named: "purpleHighlight")
}
else {
self.layer?.contents =NSImage(named: "purple") }
}
}

(Here’s a cool thing: when I copied my code with image literals, the system pasted self.layer?.contents = #imageLiteral(resourceName: "purple"), which remains human-readable even in a plain text environment. Bravo Apple.)

This is a subclass of NSButton that updates its layer (and thus you must set wantsLayer to true; I do this in the same place as before, but you could also override wantsUpdateLayer, only it needs to have a getter _and_ a setter, otherwise the compiler complains and I was too lazy to implement this properly.) Set the class of all your buttons to PurpleButton.

7a) PurpleButtons, bordered

b) bordered, NSOnState