How can I round the corners of only one side of an NSButton in Swift 4?

Question

I am new to Swift and Stack Overflow in general, so I hope I'm not asking much to bear with me.

I am trying to achieve a 'grouped' button style that can be found on Finder or in the XCode editor toolbar, like these two button groups. As you can see in the first group of buttons, the left button is only rounded on the left side, the centre button is not rounded at all, and the right button is only rounded on the right side. The same thing applies to the second group of buttons. I want to accomplish something like this, but I'm unsure of how to achieve this.

After searching for a solution online (including iOS tutorials), I tried providing an extension to the NSButton class and manually rounding the two left corners like so:

// Extensions.swift

extension NSButton {
    func roundLeftCorners() {
        self.layer?.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner]
        self.layer?.cornerRadius = 20.0   // Some arbitrary number, just wanted to make the rounded corner visible
        self.layer?.masksToBounds = true
    }
}

Then, on my view controller's viewDidLoad() function, I tried calling this member:

// MyViewController.swift

class MyViewController: NSViewController {
    @IBOutlet weak var leftButton: NSButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        leftButton.roundLeftCorners()
    }

    // ...
}

...but that didn't work for me. Some simple debugging showed that the Optional values of self.layer were nil, so I'm not sure what's going on there.

Next, I tried creating my own custom class and overriding the draw(_ dirtyRect:) function with the same code above, like so:

// LeftButton.swift

class LeftButton: NSButton {
    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)

        self.layer?.maskedCorners = [.layerMinXMinYCorner, .layerMinXMaxYCorner]
        self.layer?.cornerRadius = 20.0
        self.layer?.masksToBounds = true
    }
}

// MyViewController.swift

class MyViewController: NSViewController {
    @IBOulet weak var leftButton: LeftButton!

    // ...
}

...but that didn't remove the rounded corners on the right side. Weirdly enough, the new cornerRadius value is only obvious if the number is around 50.0 or greater; any less and the left corners looks exactly the same as any other NSButton.

Some answers mentioned manually drawing the points in a path with NSBezierPath, but it doesn't achieve what I want. I also can't find any related properties/attributes on the Storyboard editor. Perhaps I've overcomplicated my approach to this seemingly easy problem, or maybe I'm not looking at it the right way, but I hope someone could help me with this. Thanks in advance!

Aren’t the controls in the linked pic some customised segmented controls? — Magnas, Mar 16 '19 at 06:06
@Magnas Ahh, maybe that was what they used! Didn't know that object existed ‍♂️. Though, I would like to know how to customise such a button for future reference (if it's possible) — ta5een, Mar 16 '19 at 06:13
Yes the segmented control is very useful when only one option should be selected at a time. I haven’t had to customise one recently but there are plenty of good tutorials online. — Magnas, Mar 16 '19 at 06:25
In Cocoa it's the cell which is being drawn. In this case it's NSButtonCell (subclass of NSActionCell). Easier is to override drawBezelWithFrame:(NSRect)frame inView:(NSView*)controlView, however if you want to draw everything - (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView; I think it is shown somewhere in shown Paintcode app (find system resources like button) — Marek H, Mar 16 '19 at 09:46
I also forgot if you change drawing geometry you should adapt focus ring and it's drawing e.g focusRingMaskBoundsForFrame for geometry — Marek H, Mar 16 '19 at 09:55

score 0 · Accepted Answer · answered Mar 17 '19 at 16:54

1) The images you showed are using a simple NSSegmentedControl. Nothing needs customized.

2) What you tried to do wouldn't work anyway; If it could mechanically work, what it would end up doing is merely clipping the drawn content on the left corners. It wouldn't magically fill in drawing on the right, and create appropriate control borders etc.

AppKit controls are not merely CALayers with filled in properties like border, background, etc. They are almost all entirely drawn using Core Graphics via the classic drawRect: method one way or another. The fact that views have a layer is due to layer-backing. There are very few things you can end up doing with the layer of an existing control. To customize them properly, you would override the standard drawing routines in NSView, NSControl, NSCell, etc as appropriate.

It wil be better if you can explain or at least point to some reference on how to draw such a rectangle with two rounded corners using NSBezierPath and then put in insdie the draw method of the button. — imthath, Mar 09 '21 at 03:38

How can I round the corners of only one side of an NSButton in Swift 4?

1 Answers1