Rounded NSView in a Transparent Window - objective-c

I'm trying to make a transparent NSWindow with a rounded view in there.
I'm trying to have a rounded view with a transparent window.
This is what it looks like now: (see the little dots in the corners)
Here's another example with the border radius set to 10px (set in NSView drawRect):
I am using code from this Apple sample: https://developer.apple.com/library/mac/#samplecode/RoundTransparentWindow/Introduction/Intro.html
Specifically this method in my NSWindow subclass:
- (id)initWithContentRect:(NSRect)contentRect
styleMask:(NSUInteger)aStyle
backing:(NSBackingStoreType)bufferingType
defer:(BOOL)flag {
// Using NSBorderlessWindowMask results in a window without a title bar.
self = [super initWithContentRect:contentRect styleMask:NSBorderlessWindowMask backing:NSBackingStoreBuffered defer:NO];
if (self != nil) {
// Start with no transparency for all drawing into the window
[self setAlphaValue:1.0];
// Turn off opacity so that the parts of the window that are not drawn into are transparent.
[self setOpaque:NO];
[self setBackgroundColor:[NSColor clearColor]];
}
return self;
}
And this in my NSView subclass:
- (void)drawRect:(NSRect)dirtyRect
{
[[NSColor redColor] set];
NSBezierPath* thePath = [NSBezierPath bezierPath];
[thePath appendBezierPathWithRoundedRect:dirtyRect xRadius:3 yRadius:3];
[thePath fill];
}
Can anyone tell me what I'm missing here?
Thanks.

Are you looking for something like the following, where there's a red outline (stroke), but the center area is transparent?
If so, to achieve that, I used the following code:
- (void)drawRect:(NSRect)frame {
frame = NSInsetRect(self.frame, 3.0, 3.0);
[NSBezierPath setDefaultLineWidth:6.0];
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:frame
xRadius:6.0 yRadius:6.0];
[[NSColor redColor] set];
[path stroke];
}
If that's what you're looking for, you can probably use that as a starting point. You'll want to make sure that you inset the frame rect one half of the stroke line width, so as to avoid the problem with clipping the corners like you were seeing.

Not sure if this is what you are looking for but there is a great class by Matt Gemmell called MAAttachedWindow and can be found here: http://mattgemmell.com/2007/10/03/maattachedwindow-nswindow-subclass/
It's a little older but still works great for me when I need to do a 'floating' popup window and configure transparency, border radii, and even add a small arrow for context if desired. I use it all the time.

Related

NSComboBox - problems with background when selected

I'm a iOS developer, and recently I'm programming a desktop APP for MAC OSX. I still don't have much experience with the View's components of OSX, so maybe it's a silly or easy question, but I have made a little research about this problem and haven't found any solution yet.
Here's the problem:
I have a custom specialization of a NSView, that is used as the view of a Content ViewController used in my NSPopover.
Inside this view, that I'm calling "PopoverBackgroundView", I painted inside the drawRect this red background, and calculated another minor rect and painted with this gray-like color. Here's the code:
- (void)drawRect:(NSRect)dirtyRect
{
[[NSColor colorWithDeviceRed:174/255.0 green:72/255.0 blue:72/255.0 alpha:1.0] setFill];
NSRectFill(dirtyRect);
[[NSColor colorWithDeviceRed:51/255.0 green:51/255.0 blue:51/255.0 alpha:1.0] setFill];
NSRectFill(NSMakeRect(BORDER_WIDTH, BORDER_WIDTH, dirtyRect.size.width - 2*BORDER_WIDTH, dirtyRect.size.height - 2*BORDER_WIDTH));
}
So, inside the PopoverBackgroundView.m I'm programatically creating a NSComboBox. This comboBox will have the numbers 1 to 10. When I allocate it, everything seems just fine:
The problem is, after I select any options inside the combobox, it's background somehow "goes away" became transparent, I don't know, and become like this:
Please notice the red-like frame (background color of the view) around the NSComboBox, that appeared just AFTER I select something.
Here's the code where I'm allocation the comboBox and initializing it:
- (id)initWithFrame:(NSRect)frame
{
self = [super initWithFrame:frame];
if (self) {
(...)
self.comboBox = [[NSComboBox alloc] initWithFrame:CGRectMake(15, frame.size.height - 55, 90, 25)];
self.comboBox.delegate = self;
[self.comboBox setDrawsBackground:NO];
[self.comboBox setSelectable:YES];
[self.comboBox setEditable:NO];
for (int i = 1; i<=10; i++)
{
NSString *mystr = [NSString stringWithFormat:#"%d", i];
[self.comboBox addItemWithObjectValue:mystr];
}
[self addSubview:self.comboBox];
}
return self;
}
Any idea how can I 'fix' this "selected background"? All that I want it's the selected state to be equals to the normal state, i. e. ,the comboBox should be always like the first image, even after the selection.
Is there something wrong with the allocation code? Something mission? I'm really thinking that just some property that I'm not using or initializing, but I couldn't find yet.
Thanks in advance,
Just to give a feedback, I finally was able to resolve my problem.
I don't know exactly why, but the problem was all caused because the way I was drawing my border in the drawRect. Somehow, these code
[[NSColor colorWithDeviceRed:174/255.0 green:72/255.0 blue:72/255.0 alpha:1.0] setFill];
NSRectFill(dirtyRect);
were been propagated by the subviews, don't know if was the setFill or the NSRectFill. So, the "background" of the NSCombobox was been painted with this color.
After seeing this post :Adding border and Rounded Rect in the NSView I changed my draw rect to this:
- (void)drawRect:(NSRect)dirtyRect
{
NSBezierPath *background = [NSBezierPath bezierPathWithRoundedRect:self.bounds xRadius:10 yRadius:10];
[[NSColor colorWithDeviceRed:174/255.0 green:72/255.0 blue:72/255.0 alpha:1.0] set];
[background setLineWidth:10];
[background stroke];
}
and everything is working fine now, as I wanted. Now, after I select my combobox, no strange background is been drawing.
If someone knows whey this was happening with the previous code, please, let me know.

How to make NSView's background image not repeat?

I want replicate the effect obtained by the following CSS code:
background: white url(./img/background.png) no-repeat;
I've written a subclass of NSView and override drawRect in this way:
- (void)drawRect:(NSRect)dirtyRect
{
dirtyRect = [self bounds];
[[NSColor whiteColor] setFill];
NSRectFill(dirtyRect);
[[NSColor colorWithPatternImage:[NSImage imageNamed:#"background.png"]] setFill];
NSRectFill(dirtyRect);
}
(I apologize for my bad english)
Take a look at NSImage class reference. Image can be drawn with drawInRect:fromRect:operation:fraction: and also with drawAtPoint:fromRect:operation:fraction:.
So You can Use this:
[[NSImage imageNamed:#"background.png"] drawInRect:dirtyRect fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1]; // Passing NSZeroRect causes the entire image to draw.
Instead this:
[[NSColor colorWithPatternImage:[NSImage imageNamed:#"background.png"]] setFill];
NSRectFill(dirtyRect);
Just use NSImage drawInRect:fromRect:operation:fraction: to draw your image in the view instead of filling your rect with a pattern color.

NSWindow Shadow Outline

I am drawing a custom window by setting a custom content view for the window. When I draw the custom view I give it rounded corners and a nice outline to mimic a proper window.
However, I see another 1 px outline around the window which strays from the edge at the corners. I have found that if I turn off the shadow it goes away, but obviously as this wants to act like a window I need the shadow. Here's what I mean about the 1px outline:
How can I prevent this?
EDIT
Code for drawing the custom window's content view:
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:[self bounds] cornerRadius:5];
NSGradient* aGradient = [[[NSGradient alloc] initWithColorsAndLocations:
[NSColor colorWithDeviceRed:0.5569 green:0.5137 blue:0.4588 alpha:1.0000], 0.0,
[NSColor colorWithDeviceRed:0.5569 green:0.5137 blue:0.4588 alpha:1.0000], 1.0,
nil] autorelease];
[aGradient drawInBezierPath:path angle:90];
[path setLineWidth:4];
[[NSColor colorWithDeviceRed:0.4235 green:0.3922 blue:0.3451 alpha:0.9000] setStroke];
[path strokeInside];
[path setLineWidth:3];
[[NSColor colorWithDeviceRed:0.8431 green:0.8314 blue:0.8078 alpha:1.0000] setStroke];
[path strokeInside];
[path setLineWidth:1];
[[NSColor colorWithDeviceRed:0.4235 green:0.3922 blue:0.3451 alpha:0.9000] setStroke];
[path strokeInside];
Don't ask me how I got this, but this will solve your problem.
Define a category for NSWindow with the following content:
#implementation NSWindow(NoShadowRim)
- (id)_shadowRimInfo {
return #{
#"kCUIMeasureWindowFrameRimDensity": [NSNumber numberWithInt:0]
};
}
#end
DISCLAIMER: This overrides the internal method of NSWindow, so use it at your own risk. It may break with any OS X update.
You need to tell the window to recompute its shadow by sending it -invalidateShadow.
Try:
[[self window] display];
[[self window] setHasShadow:NO];
[[self window] setHasShadow:YES];
This line contouring the window area is drawn automatically. I have a window which has this line running accurately around bottom rounded corners. You have to setup the window as non-opaque and the background color to transparent:
[self setOpaque:NO];
[self setBackgroundColor:[NSColor clearColor]];
The somewhere in the contentView -drawRect: you do
[NSGraphicsContext saveGraphicsState];
[pathWithBottomRoundedCorner addClip];
// your drawing here...
[NSGraphicsContext restoreGraphicsState];
That should work.
As I understand correctly, shadows are drawn by windows server. When you draw custom NSWindow with rounded corners or other not rectangular shapes, window server don't count those transparent pixels and dont drop shadow under them.
I developed some hack to avoid such behavior. Just drop additional shadow under your path, something like this:
NSShadow *headShadow = [[NSShadow alloc] init];
[headShadow setShadowColor:[NSColor colorWithSRGBRed:0.0
green:0.0
blue:0.0
alpha:0.16]];
[headShadow setShadowBlurRadius:0.0f];
[headShadow setShadowOffset:NSMakeSize(0.0f, 0.0f)];
[headShadow set];
Ideally for perfect result i fink shadow must be equal to window servers.

Overlay NSScroller over content

Is there any way to overlay the NSScroller over the content of the scroll view (like in iOS)? I've already tried several approaches:
a) setting the frame of the scroll view content view (NSClipView) to extend into the bounds of the scroller
b) adding an NSScroller object as a subview of the scroll view (positioned where I want)
c) creating an entirely custom scroller view and placing it as a subview (this worked, but that would mean that I need to rewrite all the functionality of NSScroller)
Sparrow seems to successfully do this, and it seems to do it through a regular NSScroller subclass (seeing as it responds to the scroll settings set in System Preferences >> Appearance). It's not really drawing the scroller that's the issue, its just making it overlay the content.
Any advice is appreciated :-)
Here's where you can set the custom class of your scrollbars.
After that, by overriding the -tile method of NSScrollView, you'll get them placed properly.
Here is my solution :
Create a MyScroller class that extends NSScroller
In the MyScroller.m :
#import "MyScroller.h"
#implementation MyScroller
+(CGFloat) scrollerWidth{
return 10;
}
+(CGFloat) scrollerWidthForControlSize:(NSControlSize)controlSize{
return 10;
}
- (void) drawBackground:(NSRect) rect{
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:rect xRadius:0 yRadius:0];
[[NSColor whiteColor] set];
[path fill];
}
- (void)drawKnob{
[self drawBackground:[self rectForPart:0]];
[self drawBackground:[self rectForPart:1]];
[self drawBackground:[self rectForPart:2]];
[self drawBackground:[self rectForPart:4]];
[self drawBackground:[self rectForPart:5]];
[self drawBackground:[self rectForPart:6]];
NSRect knobRect = [self rectForPart:NSScrollerKnob];
NSRect newRect = NSMakeRect((knobRect.size.width - [MyScroller scrollerWidth]) / 2, knobRect.origin.y, [MyScroller scrollerWidth], knobRect.size.height);
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:newRect xRadius:5 yRadius:5];
[[NSColor grayColor] set];
[path fill];
}
#end
Then just set the custom class for the Scroller in Interface Builder.
I've recently released RFOverlayScrollView which should solve your problem:
Source: https://github.com/rheinfabrik/RFOverlayScrollView
Blog Post: http://blog.rheinfabrik.de/blog/2013/01/01/introducing-rfoverlayscrollview/
You can change the scrollerStyle over the NSScrollerView control to .overlay to get the desired overlay effect.
This may overrule the system wide setting in System Settings for scroll bar visibility. To 'survive' scroll bar setting changes while your app is running, you must observe the NSScroller.preferredScrollerStyleDidChangeNotification and re-apply the overlay effect.

NSScroller graphical glitches/lag

I have the following NSScroller subclass that creates a scroll bar with a rounded white knob and no arrows/slot (background):
#implementation IGScrollerVertical
- (void)drawKnob
{
NSRect knobRect = [self rectForPart:NSScrollerKnob];
NSRect newRect = NSMakeRect(knobRect.origin.x, knobRect.origin.y, knobRect.size.width - 4, knobRect.size.height);
NSBezierPath *path = [NSBezierPath bezierPathWithRoundedRect:newRect xRadius:7 yRadius:7];
[[NSColor whiteColor] set];
[path fill];
}
- (void)drawArrow:(NSScrollerArrow)arrow highlightPart:(int)flag
{
// We don't want arrows
}
- (void)drawKnobSlotInRect:(NSRect)rect highlight:(BOOL)highlight
{
// Don't want a knob background
}
#end
This all works fine, except there is a noticable lag when I use the scroller. See this video:
http://twitvid.com/70E7C
I'm confused as to what I'm doing wrong, any suggestions?
Fixed the issue, just had to fill the rect in drawKnobSlotInRect: