I have an NSOutlineView with custom NSTableViewRows used throughout.
I have overridden the draw method on the NSTableViewRow:
override func draw(_ dirtyRect: NSRect) {}
...so it should never draw anything. However, rows are occasionally solid black, and occasionally clear. I can't work out a pattern to when.
If I do put something in the draw function, it will be drawing over the black when it occurs, I can't seem to clear the black in the draw function, other than by filling with a solid colour.
To clear I have tried:
let context = NSGraphicsContext.current?.cgContext
context?.clear(dirtyRect)
and
NSColor.clear.setFill()
dirtyRect.fill(using: .copy)
If I look in the Debug View Hierarchy I can clearly see that it is the NSTableViewRow itself that is black.
I have tried setting wantsLayer and setting the backgroundColor of the layer in the draw function but that has no effect.
Can anyone explain where this black fill may be coming from and where it lives!
The only way I managed to ensure it wasn't there was to use:
override var wantsUpdateLayer: Bool { get { return true } }
...which suggests that NSTableViewRow is doing something a little weird.
(copied from comments now that we've discovered a workaround)
The documentation for NSTableRowView states that it "is responsible for displaying attributes associated with the row, including the selection highlight, and group row look." So the base row view class is clearly doing something, and the table view probably makes assumptions about it, and I would image it's tricky and highly optimized. :(
A workaround would be to call super.draw(dirtyRect) in your draw(_:NSRect) just to let the base NSTableRowView class do whatever internal magic it needs to do, and then erase whatever it has drawn and draw over that.
I actually thought of a possibly-less-hacky solution: Add an opaque subview to NSTableRowView that completely fills its bounds and draw whatever you're trying to draw in that subview.
Subclass NSTableRowView add override isOpaque
Swift:
override var isOpaque: Bool {
get {
return false
}
set {
}
}
Obj-C:
- (BOOL)isOpaque {
return NO;
}
Take in a consideration that there are a lot of drawings. Like:
override func drawBackground(in dirtyRect: NSRect) {
override func drawSelection(in dirtyRect: NSRect) {
override func drawSeparator(in dirtyRect: NSRect) {
and more...
Related
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!
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.
I setup UILabel appearance in my app delegate using:
UILabel.appearance().textColor = UIColor.white
I also have a custom UIView subclass that contains a UILabel along with some other elements (omitted here):
#IBDesignable
class CustomView: UIView {
private let descriptionLabel = HCLabel()
override init(frame: CGRect) {
super.init(frame: frame)
setup()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
override func awakeFromNib() {
super.awakeFromNib()
self.setup()
}
private func setup() {
self.descriptionLabel.textColor = UIColor.black
// ... other things not related to descriptionLabel
}
}
If I instantiate CustomView in a storyboard, everything works just fine. If, however, I instantiate it in code, the descriptionLabel is white (appearance color), not black (the color I set). What's going on here? The way I understood it was that if I set a custom color, the appearance color will not be used.
What you're experiencing is simply a matter of the exact timing with which the UIAppearance proxy applies its settings to a new UIView. When are we to suppose it does this? It can't possibly do it before init, because init is the first thing that happens in the life of the UIView. Thus, the order of events is like this:
override init(frame: CGRect) {
super.init(frame: frame)
setup() // black
}
// and some time later, UIAppearance proxy comes along and sets it to white
So your goal is to call setup pretty early in the life of the label — and certainly before the user ever has a chance to see it — but not so early that the UIAppearance proxy acts later. Let's move the call to setup to a bit later in the life of the label:
// some time earlier, UIAppearance proxy sets it to white
override func didMoveToSuperview() {
setup() // black
}
Now we're acting after the appearance proxy has had a chance to act, and so your settings are the last to operate, and they win the day.
We remain in ignorance of how early we could move the call to setup and still come along after the appearance proxy setting has been obeyed. If you have time, you might like to experiment with that. For example, willMoveToSuperview is earlier; if you call setup there (and not in didMoveToSuperview), does that work? Play around and find out!
I've used Storyboard to set up the NSScrollView and I cannot find any option where I can disable the scroller's background. Any ideas on how to make this happen?
Basically idea behind this is subclass the NSScroller and then make changes accordingly.
I had the same requirement so I subclassed it and did the changes as shown.
objective c code is converted with help of online tool so apologies for mistakes
and have look.
this may help.
// Converted to Swift 4 by Swiftify v4.1.6766 - https://objectivec2swift.com/
// GridScroller.h
// Created by Vikram on 08/09/16.
import Cocoa
class OpaqGridScroller: NSScroller {
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
NSColor.clear.setFill()
dirtyRect.fill()
// whatever style you want here for knob if you want
knobStyle = .dark
}
}
You can try override draw scroller rect
override func draw(_ dirtyRect: NSRect) {
NSDrawWindowBackground(bounds);
self.drawKnob()
}
You always can draw custom rect color by setting it before
override func draw(_ dirtyRect: NSRect) {
NSColor.clear.set()
__NSRectFill(dirtyRect)
self.drawKnob()
}
This solution worked for me.
class OpaqueGridScroller: NSScroller {
override func draw(_ dirtyRect: NSRect) {
// NSColor.clear.set()
// dirtyRect.fill()
self.drawKnob()
}
}
The foregoing answers that call self.drawKnob() are only partially correct. The problem is that the knob should usually not be drawn at all if there's nothing to scroll in that direction.
For my solution, I sub-classed the vertical NSScroller (scroll bar) in a scrolling NSTextView, in order to override the scroll bar's draw() method, as above. But when there was nothing to scroll, this draws a knob that has a length that's not correct.
So I added
#IBOutlet var myScroller : NSScrollView!
as a property of the sub-classed NSScroller and wired it up in the storyboard, so that the scroller bar can know the NSScrollView that uses it, and then draw the scroll bar with
override draw(_ dirtyRect: NSRect)
{
if myScroller.contentSize.height < myScroller.documentView!.bounds.height {
self.drawKnob()
}
}
The knob disappears when the NSScrollView is resized enough that there's nothing vertical to scroll, and re-appears when there is, while at the same time allowing whatever's in the background below it to show through.
I'm not sure if this is a hack, or the correct solution, but it seems to work as expected.
I have a custom table row view that lets me set the background colour of the selected row:
import Cocoa
class MyRowView: NSTableRowView {
override func drawSelection(in dirtyRect: NSRect) {
NSColor.black.setFill()
dirtyRect.fill()
}
}
This works fine for any columns containing NSTextFields, where I have been able to set the background colour to transparent in the storyboard but for columns where I have an NSButton or an NSProgessIndicator, the background of those objects show the same as for unhighlighted rows. You can see in the image below that unselected rows are vibrant dark, showing what is underneath the window. Selected rows should be black, but the checkbox still has a vibrant dark look to it.
I have managed to solve this issue for the button with this answer, but this doesn't work for the progress indicator. i've tried subclassing NSProgressIndicator and just calling the superclass's init and draw methods, but it doesn't work:
class MyProgInd: NSProgressIndicator {
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
}
required init?(coder decoder: NSCoder) {
super.init(coder: decoder)
}
}
This is kind of a duplicate of this question. Because everything I know about Swift is Swift3, I`m wondering if someone could "translate" the suggested solution in this answer.
Also:
I made a NSSearchfield without border, put it in a framed view, and it still shows the gray border. I would be curious of how to disable the animated gray border and maybe even how to change the color of the gray "search" line.
My ugly result now looks like this:
It would be a big help if someone could tell me how to manage this difficult NSSearchfield.
//UPDATE
According to firstinq´s answer, the icon now disappeared, which is great. But still, there is this disturbing animated gray border. Which I can´t understand: The NSSearchFielt is inside a NSView (blue border). So everything outside the NSView should be hidden, right?. So why am I still seeing the gray border? cell.isBordered = falsehas no effect.
Any advice how to handle that?
This is how I draw the border of the NSView:
class SearchFieldBorder: NSView {
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
self.layer?.borderWidth = 1
self.layer?.borderColor = NSColor.blue.cgColor
}
}
To hide the icon: cast the cell to NSSearchFieldCell and set the cell's searchButtonCell to transparent. Possible swift3 version:
if let cell = self.searchField.cell as? NSSearchFieldCell {
cell.searchButtonCell?.isTransparent = true
}
Here searchField is an NSSearchField
To remove the focus border:
searchField.focusRingType = .none
To change grey line/cursor it would be better to subclass the NSSearchField and override the methods.
You can get an idea from here.
I'll supplement the answer above.
To hide the search icon, assign a nil to the SearchButtonCell property
if let cell = searchField.cell as? NSSearchFieldCell {
cell.searchButtonCell = nil
}