Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Cocoa Mac Sheet Rounded Corners (Like Xcode 4)

Does anyone know how you can make a cocoa sheet with rounded corners like the image below?

Xcode 4 Rounded Sheet

Xcode 4 Sheet - Rounded Corners

I've looked all over but I cannot seem to find anything on it. I'm not sure if I'm looking in the wrong places, or if this just isn't a common practice. Any ideas?

like image 815
Hunter Dolan Avatar asked Apr 04 '12 01:04

Hunter Dolan


1 Answers

Edit: it turns out that this behavior is even easier if you're targeting OS X Lion or later - simply calling [sheet setOpaque:NO] is enough to enable rounded corners.


This behavior is pretty easy to reproduce. Initialize your sheet to be a transparent borderless window:

self.sheet = [[NSWindow alloc] initWithContentRect:NSMakeRect(0, 0, 300, 300) styleMask:NSBorderlessWindowMask backing:NSBackingStoreBuffered | NSTitledWindowMask defer:YES];
[self.sheet setOpaque:NO];
[self.sheet setBackgroundColor:[NSColor clearColor]];

Add as a subview a custom view:

[[self.sheet contentView] addSubview:[[IFWindowView alloc] initWithFrame:[[self.sheet contentView] frame]]];

That custom view should do its drawing as follows:

#define RADIUS 5.0
NSBezierPath *bezierPath = [NSBezierPath bezierPathWithRoundedRect:NSMakeRect(self.bounds.origin.x, self.bounds.origin.y + RADIUS, self.bounds.size.width, self.bounds.size.height) xRadius:RADIUS yRadius:RADIUS];
[[NSColor windowBackgroundColor] set]; // In production, use the appropriate color with alpha for transparency.
[bezierPath fill];

Here is some sample code to demonstrate this in action: http://d.pr/l9DB

like image 154
Itai Ferber Avatar answered Nov 09 '22 14:11

Itai Ferber