How to have a button which is projected outside the NSView? - objective-c

Question

I want to implement a button which is projected outside the NSView. The similar button is shown in below image.

Answer 1

If you have to have a view overflowing the window, you can't do that using the masksToBound property of CALayer. You need to use a child borderless window and position it correctly.
Here's an example (in ObjC):
- (void)applicationDidFinishLaunching:(NSNotification *)aNotification {
// Insert code here to initialize your application
NSRect windowFrame = self.window.frame;
NSRect childWindowFrame = {
.origin.x = CGRectGetMidX(windowFrame) - 25,
.origin.y = CGRectGetMinY(windowFrame) - 25,
.size.width = 50,
.size.height = 50,
};
NSWindow *childWindow = [[NSWindow alloc] initWithContentRect:childWindowFrame
styleMask:NSWindowStyleMaskBorderless
backing:NSBackingStoreBuffered
defer:YES];
childWindow.backgroundColor = [NSColor clearColor];
childWindow.contentView.wantsLayer = YES;
childWindow.contentView.layer.backgroundColor = [NSColor redColor].CGColor;
childWindow.contentView.layer.cornerRadius = 25.0;
[self.window addChildWindow:childWindow ordered:NSWindowAbove];
}
The red circle in this screenshot is the child window.

Answer 2

You can do this by making sure your parent view is layer backed and setting the masksToBounds property of its layer to false.
Here's an AppKit playground showing this in action:
//: A Cocoa based Playground to present user interface
import AppKit
import PlaygroundSupport
let nibFile = NSNib.Name("MyView")
var topLevelObjects : NSArray?
Bundle.main.loadNibNamed(nibFile, owner:nil, topLevelObjects: &topLevelObjects)
let views = (topLevelObjects as! Array<Any>).filter { $0 is NSView }
let rootView = views.first as! NSView
// create parent
let parentView = NSView()
rootView.addSubview(parentView)
parentView.wantsLayer = true
parentView.layer?.masksToBounds = false
parentView.layer?.backgroundColor = NSColor.red.cgColor
parentView.translatesAutoresizingMaskIntoConstraints = false
parentView.centerXAnchor.constraint(equalTo: rootView.centerXAnchor).isActive = true
parentView.centerYAnchor.constraint(equalTo: rootView.centerYAnchor).isActive = true
parentView.widthAnchor.constraint(equalToConstant: 200).isActive = true
parentView.heightAnchor.constraint(equalToConstant: 200).isActive = true
let childView = NSView()
parentView.addSubview(childView)
childView.wantsLayer = true
childView.layer?.backgroundColor = NSColor.green.cgColor
childView.translatesAutoresizingMaskIntoConstraints = false
childView.centerXAnchor.constraint(equalTo: parentView.leadingAnchor).isActive = true
childView.centerYAnchor.constraint(equalTo: parentView.centerYAnchor).isActive = true
childView.widthAnchor.constraint(equalToConstant: 100).isActive = true
childView.heightAnchor.constraint(equalToConstant: 100).isActive = true
// Present the view in Playground
PlaygroundPage.current.liveView = views[0] as! NSView
This will draw:
The green view is a child of the red view.