UPDATE:
I've added a sample project for testing, see at the bottom of the post.
ORIGINAL QUESTION:
I've got an NSWindow and I change its background when some other parameters change.
The window background is a gradient I'm drawing by overriding drawRect in a subclass of the window's view.
class MainWindowView: NSView {
override func drawRect(dirtyRect: NSRect) {
var rect = dirtyRect
let gradient = NSGradient(startingColor: backgroundColor, endingColor: darkerBackgroundColor)
gradient.drawInRect(rect, relativeCenterPosition: NSPoint(x: 0, y: 0))
super.drawRect(rect)
}
}
And I've got two NSTextFields on this window.
The NSTextFields are both set to drawsBackground = false in awakeFromNib and set to borderless in IB.
I'm not using NSAttributedStrings here, only changing the stringValue of the NSTextFields, and of course their textColor.
Everything is working... except that sometimes, the text fields have an unexpected slightly dark semi-transparent background.
(It's hard to see on some screens but it's there.)
Question: why does this darker background appear?
And of course: what could I do to fix it?
I'm pretty sure it's the gradient that breaks something but I can't find what...
Note: the project is in Swift but I can read an Objective-C answer.
EDIT:
So indeed it seems to be coming from the gradient that's behind, see this other screenshot from a test window. This time the gradient is drawn in a Custom View under an NSTextView, and the same undesired effect happens: parts of the text field background are visible but shouldn't.
UPDATE:
I have made a very simple example in a project for testing, with a gradient that shows the phenomenon more visibly. There's only a window, my gradient class and a text field. You can get it (30ko only) in this ZIP file.
You always draw the gradient in the dirty rect. When the text changes, that rect is only the size of the textfield, not of the whole view. Your drawRect function then draws the full gradient in the textfield's background rect, rather than just the portion of the background-view-wide gradient you'd see through the textfield.
If you redraw using your view's frame, and ignore the dirty rect argument, you should get the desired appearance.
I'm guessing your text field isn't layer-backed. If not, turn on layers (in IB or via -wantsLayer for the view in code) for at least the text field. If that alone doesn't work, try turning on layers for the gradient-hosting view as well.
Related
I have a NSVisualEffectView with vibrancy containing text fields (NSTextField or NSComboBox) and borderless buttons. The buttons are positioned over the text fields and I want to disable the vibrancy effect on the borderless buttons since they're supposed to appear on the white background of the text fields.
What I tried doing, as per recommendation in the NSVisualEffectView class reference, is to wrap my NSButton inside another NSVisualEffectView with its state set to Inactive. What this does is it replaces the "vibrant" background by a light grey background.
The picture below illustrates this. The first field is my attempted solution, the second shows the default behavior of a borderless button as child of a NSVisualEffectView.
I also tried subclassing the NSButton and set its cell background color to white or clear but I always get the grey background.
How can I change the light grey background to a white or clear background?
Thanks
I managed to solve this myself after a few hours of headache. The solution doesn't need the button to be wrapped in a NSVisualEffectView. Simply subclassing NSButton and overriding the allowsVibrancy property and setting it to false was enough.
In Swift:
override var allowsVibrancy: Bool { return false }
I have a window with a custom view in it. This view get's an image drawn as a background in it. Let's assume for now that it's a structured grey background image.
- (void)drawRect:(NSRect)dirtyRect
{
[super drawRect:dirtyRect];
[self.titlebarBGImage drawInRect:dirtyRect fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1];
}
In this custom view I added a square textured button and configured it in IB to have no border. In my AppDelegate I then give this button an image in the applicationDidFinishLaunching method:
// ...
// [[self.minimizeButton cell] setBackgroundColor:[NSColor clearColor]];
[self.minimizeButton setImage:minimizeImage];
// ...
Somehow the same background (titlebarBGImage) is also drawn as the buttons background, so it has a structured grey colored image, but scaled to fit the button size. This looks silly and is not what I want obviously. If I then uncomment the line with setBackgroundColor: the background is cleared, but the custom views background also doesn't shine through where the buttons image is transparent (the button image is a circle) so I get a rectangle where the windows background shines through (i.e. green in the example image), not the background of the view the button is in.
Here's an image to make it clear what happens:
From top to bottom:
What I want to achieve, i.e. views grey structured bg shines through buttons transparent area
What I get with upper code, i.e. without the uncommented line: The custom views background is drawn squeezed into the buttons background
what I get with the clearColor line, i.e. window color (green) shines through, not the bg of the view.
How can I get the top most result?
Edit: I pushed an example project to github so that you can see what I mean.
One way to solve this is using Core Animation Layers. I found out watching this tutorial. For that you got to your MainMenu.xib file, select the Button object and click on the layers tab in the Utilities (see screenshot (1)). Then activate Core Animation Layer for the top most View. With that all subelements also have Core Animation Layer activated (There might be performance issues with that if the project is bigger, so take care).
Next I subclassed the NSButton (calling it BPButtonView in my Github project which I updated now). Select the Button in the xib-file and change the Custom Class to BPButtonView, or whatever you called it.
The code for the new NSButton subclass looks like this:
#implementation BPButtonView
- (BOOL)wantsUpdateLayer {
return YES;
}
- (void)updateLayer {
if ( [self.cell isHighlighted] ) {
self.layer.contents = [NSImage imageNamed:#"buttonbg.png"];
} else {
self.layer.contents = [NSImage imageNamed:#"buttonbg.png"];
}
}
#end
I used the if-statement in the updateLayer method just to show, that depending of the buttons state (pressed vs. unpressed) you can provide a different picture. In the Video tutorial there's also a nice trick how to achieve a clean resize of a buttons picture.
And here's a screenshot of the resulting app. The red circle in the middle is the button and the green textured thing is the views background.
I have an NSView that is drawing a custom background with an image, but whenever I press a button or programmatically edit a label, it seems to draw the background image again inside of the edited subview. I've found that making the view layer-backed in IB solves the issue, but in the larger app I'm creating, making the view layer-backed causes a ton of other issues.
I made this example app to show as clearly as possible what is happening. The second image happens after pressing the button, which programmatically edits the label text. It seems as though the background image is drawing around both the button and label together, starting at the top of the button.
the view is being drawn like this:
- (void) drawRect:(NSRect)dirtyRect {
[[NSImage imageNamed:#"redGreenGradientBG.png"] drawInRect:dirtyRect fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1];
}
Before edit:
After edit:
Is there any way I can fix this without making the view layer-backed?
(Sorry about the gross gradient -- I thought it would illustrate my point clearest)
The dirtyRect parameter that's being passed in to -drawRect: is not the entire bounding rectangle of your view, but rather the rectangle that has been marked as needing an update (ie. the "dirty" rectangle, as the name suggests).
When you press the button or edit the label, its invalidating the display state for only that subview's bounding rectangle and therefore only that rectangle is being passed as dirtyRect. So what you're seeing in those screenshots is the image being drawn into a smaller rectangle inside your view's bounding rectangle.
In your case you should just redraw the entire background in -drawRect: like this (by using self.bounds as the drawing rectangle rather than dirtyRect):
- (void)drawRect:(NSRect)dirtyRect {
[[NSImage imageNamed:#"redGreenGradientBG.png"] drawInRect:self.bounds fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:1];
}
I would like to individually set cell background colors in an NSForm. I thought it would be a matter of subclassing NSForm and overriding -drawCellAtRow:column:. But -drawCellAtRow:column: only gets called when the cell receives focus.
I've experimented with calling -setCellBackgroundColor on the NSForm but that changes the title background, not the value.
Is there an approach I'm not finding?
I think this just isn't possible with NSFormCell.
First thing I tried:
self.form.drawsCellBackground = YES;
self.form.cellBackgroundColor = [NSColor redColor];
This appears to draw the background only behind the label. Some further testing suggested that a single NSFormCell spans both the label and text field, and the background was drawing behind both. When the text field draws on top, its own background covers up the red color.
Next I subclassed NSFormCell. The only method to be called is -drawWithFrame:inView:. The frame, again, spans both the label and text field. The control view is the NSForm. If I draw my own background and then invoke [super drawWithFrame:inView:], it appears just as above, visible behind the label, but not visible behind the text field. If I invoke super and then draw the background, it appears atop both.
NSFormCell's implementation does not invoke -drawInteriorWithFrame:inView: nor does it seem to provide another override point.
I tried setting highlighted, and implementing -highlightColorWithFrame:inView: – same issue.
While I was trying to understand how this all worked I also tried subclassing NSForm. The only drawing-related method called is -drawRect:. These methods are never invoked: -drawCellAtIndex:, -drawCellAtRow:column:, -drawCell:, -drawCellInside:.
Apart from getting Apple to fix this, the only solutions I see are trying to use NSForm's superclass NSMatrix, or just using labels and text fields.
I'm trying to get NSClipView to either draw a clear background (set the color to clear results in a black box), or no background at all. Drawing no background results in ghosting artifacts. Anyway to get this to draw no background without the artifacts???
The NSClipView is contained inside an NSBox subclass. An NSTextView is contained inside the NSClipView. It's basically an attempt at rolling my own NSTextField. I need to be able to draw a custom background and included subviews such as buttons.
The trails behavior is noted in the documentation of NSClipView. If the clip view is contained in a NSScrollView the documentation suggests calling setDrawsBackground: on the scroll view instead.
You could also try setting the background color of the scroll view to the clear color, assuming that the clip view is in a scroll view.
If the clip view is not in a scroll view then you might want to explain what the view hierarchy is like, and any code relavent to its construction.