I want to change its color, but I'm not sure wether to subclass NSScrollView or NSClipView. Or if the corner can be inserted as a regular NSView.
(source: flickr.com)
I don't need code. Just a hint at how to do it.
Already answered elsewhere on stackoverflow by mekentosj. The class to subclass is NSScrollView.
#interface MyScrollView : NSScrollView {
}
#end
#implementation MyScrollView
- (void)drawRect:(NSRect)rect{
[super drawRect: rect];
if([self hasVerticalScroller] && [self hasHorizontalScroller]){
NSRect vframe = [[self verticalScroller]frame];
NSRect hframe = [[self horizontalScroller]frame];
NSRect corner;
corner.origin.x = NSMaxX(hframe);
corner.origin.y = NSMinY(hframe);
corner.size.width = NSWidth(vframe);
corner.size.height = NSHeight(hframe);
// your custom drawing in the corner rect here
[[NSColor redColor] set];
NSRectFill(corner);
}
}
#end
Kind of odd but just subclassing NSScrollView and overriding draw with super.drawRect() made my NSScrollView (not) fill in that corner with white. I tested it 2x to make sure, since it doesn't make much sense.
import Cocoa
class ThemedScrollView: NSScrollView {
override func drawRect(dirtyRect: NSRect) {
super.drawRect(dirtyRect)
}
}
Here's a Swift variation of the original answer as well:
import Cocoa
class ThemedScrollView: NSScrollView {
override func drawRect(dirtyRect: NSRect) {
super.drawRect(dirtyRect)
if hasVerticalScroller && hasHorizontalScroller {
guard verticalScroller != nil && horizontalScroller != nil else { return }
let vFrame = verticalScroller!.frame
let hFrame = horizontalScroller!.frame
let square = NSRect(origin: CGPoint(x: hFrame.maxX, y: vFrame.maxY), size: CGSize(width: vFrame.width, height: hFrame.height))
let path = NSBezierPath(rect: square)
let fillColor = NSColor.redColor()
fillColor.set()
path.fill()
}
}
}
Updated Swift 5.2 version of Austin's answer
class Themed: NSScrollView {
override func draw(_ dirtyRect: NSRect) {
super.draw(dirtyRect)
if hasVerticalScroller && hasHorizontalScroller {
guard verticalScroller != nil && horizontalScroller != nil else { return }
let vFrame = verticalScroller!.frame
let hFrame = horizontalScroller!.frame
let square = NSRect(origin: CGPoint(x: hFrame.maxX, y: vFrame.maxY), size: CGSize(width: vFrame.width, height: hFrame.height))
let path = NSBezierPath(rect: square)
let fillColor = NSColor.red
fillColor.set()
path.fill()
}
}
}
Related
I have NSPopupButton inside NSToolbar that has borderder = false which is having some color burn blend when highlighted. If I use bordered = true the image is drawn with nice dark overlay.
I am trying to achieve to draw highlighted state the same way as it is in bordered=true
PS: NSButtonCell with bordered = false works out of the box.
I can achieve the behaviour by having bordered = true and overriding drawBezel and do nothing there but I want to know
Things I tried:
highlightsBy
interiorBackgroundStyle
setCellAttribute
-
class ToolbarPopUpButtonCell : NSPopUpButtonCell {
override var isHighlighted: Bool {
get { return true }
set { super.isHighlighted = newValue }
}
override func drawImage(withFrame cellFrame: NSRect, in controlView: NSView) {
super.drawImage(withFrame: cellFrame, in: controlView)
}
//used in case bordered = true so we do nothing
override func drawBezel(withFrame frame: NSRect, in controlView: NSView) {
}
//doesn't work
override var interiorBackgroundStyle: NSView.BackgroundStyle
{
return .raised
}
}
class ToolbarPopUpButton: NSPopUpButton {
override func awakeFromNib() {
cell?.setCellAttribute(.cellLightsByBackground, to: 1)
}
override var intrinsicContentSize: NSSize {
return NSMakeSize(32 + 5, 32)
}
}
Notice the image on right which works for bordered = false (NSButtonCell)
The only hack I found is to draw a subsitute cell. Still seeking a better solution.
- (void)drawImageWithFrame:(NSRect)cellFrame inView:(NSView *)controlView
{
NSImage *image = [self image];
NSButtonCell *swapCell = [[NSButtonCell alloc] initImageCell:image];
[swapCell setHighlighted:[self isHighlighted]];
[swapCell drawImage:image withFrame:cellFrame inView:controlView];
}
There does not seem to be any standard AppKit control for creating a tab bar similar to the ones found in Xcode.
Any idea on whether this is possible or would I need to use a custom control of some sort, and if so any suggestions on whether any are available.
OK I figured it out by subclassing NSSegementedControl to get the desired behaviours.
import Cocoa
class OSSegmentedCell: NSSegmentedCell {
override func draw(withFrame cellFrame: NSRect, in controlView: NSView) {
// Do not call super to prevent the border from being draw
//super.draw(withFrame: cellFrame, in: controlView)
// Call this to ensure the overridden drawSegment() method gets called for each segment
super.drawInterior(withFrame: cellFrame, in: controlView)
}
override func drawSegment(_ segment: Int, inFrame frame: NSRect, with controlView: NSView) {
// Resize the view to leave a small gap
let d:CGFloat = 0.0
let width = frame.height - 2.0*d
let dx = (frame.width - width) / 2.0
let newRect = NSRect(x: frame.minX+dx, y: frame.minY, width: width, height: width)
if let image = self.image(forSegment: segment) {
if self.selectedSegment == segment {
let tintedImage = image.tintedImageWithColor(color: NSColor.blue)
tintedImage.draw(in: newRect)
} else {
image.draw(in: newRect)
}
}
}
}
extension NSImage {
func tintedImageWithColor(color:NSColor) -> NSImage {
let size = self.size
let imageBounds = NSMakeRect(0, 0, size.width, size.height)
let copiedImage = self.copy() as! NSImage
copiedImage.lockFocus()
color.set()
__NSRectFillUsingOperation(imageBounds, NSCompositingOperation.sourceIn)
copiedImage.unlockFocus()
return copiedImage
}
}
After setting centersPlaceholder = false, the placeholder aligns correctly at the left, but the search button doesn't show its image. The same is true for the cancel button when entering some text. Is that the correct behavior or am I missing something?
This related question sheds some light on how the strange behavior could be (ab)used to force a left-align in the field. Simply subclass NSSearchFieldCell and override draw method:
import Cocoa
class FilterFieldCell: NSSearchFieldCell {
override func draw(withFrame cellFrame: NSRect, in controlView: NSView) {
super.draw(withFrame: cellFrame, in: controlView)
}
}
And then set your search field cell to this class.
#define kSearchButtonWidth 22.f
#import "AMSearchField.h"
#implementation AMSearchField
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
// Drawing code here.
}
- (NSRect)rectForSearchButtonWhenCentered:(BOOL)isCentered
{
CGRect rect = [super rectForSearchButtonWhenCentered:isCentered];
if (rect.size.width < kSearchButtonWidth) {
rect.size.width = kSearchButtonWidth;
}
return rect;
}
- (NSRect)rectForSearchTextWhenCentered:(BOOL)isCentered
{
CGRect rect = [super rectForSearchTextWhenCentered:isCentered];
if (rect.origin.x < kSearchButtonWidth) {
CGFloat delta = kSearchButtonWidth - rect.origin.x;
rect.origin.x = kSearchButtonWidth;
rect.size.width = rect.size.width - delta;
}
return rect;
}
#end
in xib file, set search class to AMSearchField
I've got an NSWindow and an horizontal NSSlider.
I'd like to change the color of the right part of the slider bar when the window background color changes.
Currently, the right part of the bar isn't visible anymore when the window background is dark.
Note: the window background is actually a gradient I'm drawing by overriding drawRect in a subclass of the window's view.
I thought I could change the slider bar fill color by subclassing NSSliderCell and overriding some method like drawBarInside but I don't understand how it works: should I make a little square image and draw it repeatedly in the rect after the knob? Or maybe just draw a colored line? I've never done this before.
I've looked at this question and it's interesting but it's about drawing the knob and I don't need that for now.
I also had a look at this one which seemed very promising, but when I try to mimic this code my slider bar just disappears...
In this question they use drawWithFrame and it looks interesting but again I'm not sure how it works.
I would like to do this with my own code instead of using a library. Could somebody give me a hint about how to do this please? :)
I'm doing this in Swift but I can read/use Objective-C if necessary.
First, I created an image of a slider bar and copied it in my project.
Then I used this image in the drawBarInside method to draw in the bar rect before the normal one, so we'll see only the remainder part (I wanted to keep the blue part intact).
This has to be done in a subclass of NSSliderCell:
class CustomSliderCell: NSSliderCell {
let bar: NSImage
required init(coder aDecoder: NSCoder) {
self.bar = NSImage(named: "bar")!
super.init(coder: aDecoder)
}
override func drawBarInside(aRect: NSRect, flipped: Bool) {
var rect = aRect
rect.size = NSSize(width: rect.width, height: 3)
self.bar.drawInRect(rect)
super.drawBarInside(rect, flipped: flipped)
}
}
Pro: it works. :)
Con: it removes the rounded edges of the bar and I haven't found a way to redraw this yet.
UPDATE:
I made a Swift version of the accepted answer, it works very well:
class CustomSliderCell: NSSliderCell {
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func drawBarInside(aRect: NSRect, flipped: Bool) {
var rect = aRect
rect.size.height = CGFloat(5)
let barRadius = CGFloat(2.5)
let value = CGFloat((self.doubleValue - self.minValue) / (self.maxValue - self.minValue))
let finalWidth = CGFloat(value * (self.controlView!.frame.size.width - 8))
var leftRect = rect
leftRect.size.width = finalWidth
let bg = NSBezierPath(roundedRect: rect, xRadius: barRadius, yRadius: barRadius)
NSColor.orangeColor().setFill()
bg.fill()
let active = NSBezierPath(roundedRect: leftRect, xRadius: barRadius, yRadius: barRadius)
NSColor.purpleColor().setFill()
active.fill()
}
}
This is correct, you have to subclass the NSSliderCell class to redraw the bar or the knob.
NSRect is just a rectangular container, you have to draw inside this container. I made an example based on an custom NSLevelIndicator that I have in one of my program.
First you need to calculate the position of the knob. You must pay attention to the control minimum and maximum value.
Next you draw a NSBezierPath for the background and another for the left part.
#import "MyCustomSlider.h"
#implementation MyCustomSlider
- (void)drawBarInside:(NSRect)rect flipped:(BOOL)flipped {
// [super drawBarInside:rect flipped:flipped];
rect.size.height = 5.0;
// Bar radius
CGFloat barRadius = 2.5;
// Knob position depending on control min/max value and current control value.
CGFloat value = ([self doubleValue] - [self minValue]) / ([self maxValue] - [self minValue]);
// Final Left Part Width
CGFloat finalWidth = value * ([[self controlView] frame].size.width - 8);
// Left Part Rect
NSRect leftRect = rect;
leftRect.size.width = finalWidth;
NSLog(#"- Current Rect:%# \n- Value:%f \n- Final Width:%f", NSStringFromRect(rect), value, finalWidth);
// Draw Left Part
NSBezierPath* bg = [NSBezierPath bezierPathWithRoundedRect: rect xRadius: barRadius yRadius: barRadius];
[NSColor.orangeColor setFill];
[bg fill];
// Draw Right Part
NSBezierPath* active = [NSBezierPath bezierPathWithRoundedRect: leftRect xRadius: barRadius yRadius: barRadius];
[NSColor.purpleColor setFill];
[active fill];
}
#end
Swift 5
class CustomSliderCell: NSSliderCell {
required init(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override func drawBar(inside aRect: NSRect, flipped: Bool) {
var rect = aRect
rect.size.height = CGFloat(5)
let barRadius = CGFloat(2.5)
let value = CGFloat((self.doubleValue - self.minValue) / (self.maxValue - self.minValue))
let finalWidth = CGFloat(value * (self.controlView!.frame.size.width - 8))
var leftRect = rect
leftRect.size.width = finalWidth
let bg = NSBezierPath(roundedRect: rect, xRadius: barRadius, yRadius: barRadius)
NSColor.orange.setFill()
bg.fill()
let active = NSBezierPath(roundedRect: leftRect, xRadius: barRadius, yRadius: barRadius)
NSColor.purple.setFill()
active.fill()
}
}
I have achieved this without redraw or override cell at all. Using "False color" filter seems work very well and it is only a few codes!
class RLSlider: NSSlider {
init() {
super.init(frame: NSZeroRect)
addFilter()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
addFilter()
}
func addFilter() {
let colorFilter = CIFilter(name: "CIFalseColor")!
colorFilter.setDefaults()
colorFilter.setValue(CIColor(cgColor: NSColor.white.cgColor), forKey: "inputColor0")
colorFilter.setValue(CIColor(cgColor: NSColor.yellow.cgColor), forKey: "inputColor1")
// colorFilter.setValue(CIColor(cgColor: NSColor.yellow.cgColor), forKey: "inputColor0")
// colorFilter.setValue(CIColor(cgColor: NSColor.yellow.cgColor), forKey: "inputColor1")
self.contentFilters = [colorFilter]
}
}
Is there a way to customize the color of a NSPopUpButton arrow? I've looked around but I've not found an answer yet
I really dont think there is an "easy" way to do this. If you look at the API description, it even states that it doesnt respond to the setImage routine. I have done quite a bit of work sub-classing button objects, etc... and I think this is where you would have to go in order to do what you are asking.
Like too many of these controls, I did it by subclassing NSPopupButton(Cell) and then doing all my own drawing in drawRect...I cheated a little though, and used an image do the actual triangle rather than trying to do it via primitives.
- (void)drawRect:(NSRect)dirtyRect
{
//...Insert button draw code here...
//Admittedly the above statement includes more work than we probably want to do.
//Assumes triangleIcon is a cached NSImage...I also make assumptions about location
CGFloat iconSize = 6.0;
CGFloat iconYLoc = (dirtyRect.size.height - iconSize) / 2.0;
CGFloat iconXLoc = (dirtyRect.size.width - (iconSize + 8));
CGRect triRect = {iconXLoc, iconYLoc, iconSize, iconSize};
[triangleIcon drawInRect:triRect];
}
i did this and its worked for me.
(void)drawImageWithFrame:(NSRect)cellFrame inView:(NSView *)controlView
{
NSPopUpButton *temp = (NSPopUpButton*)controlView;
NSString *strtile = temp.title;
AppDelegate *appdel = (AppDelegate*)[NSApplication sharedApplication].delegate;
NSFont *font = [NSFont systemFontOfSize:13.5];
NSSize size = NSMakeSize(40, 10);// string size
CGRect rect = controlView.frame;
rect = CGRectMake((size.width + temp.frame.size.width)/2, rect.origin.y, 8, 17);
[self drawImage:[NSImage imageNamed:#"icon_downArrow_white.png"] withFrame:rect inView:self.
}
I have changed arrow color by using "False Color" filter without using any image. So far it is the easiest way to change cocoa control to me.
class RLPopUpButton: NSPopUpButton {
init() {
super.init(frame: NSZeroRect, pullsDown: false)
addFilter()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
addFilter()
}
func addFilter() {
let colorFilter = CIFilter(name: "CIFalseColor")!
colorFilter.setDefaults()
colorFilter.setValue(CIColor(cgColor: NSColor.black.cgColor), forKey: "inputColor0")
colorFilter.setValue(CIColor(cgColor: NSColor.white.cgColor), forKey: "inputColor1")
// colorFilter.setValue(CIColor(cgColor: NSColor.yellow.cgColor), forKey: "inputColor0")
// colorFilter.setValue(CIColor(cgColor: NSColor.property.cgColor), forKey: "inputColor1")
self.contentFilters = [colorFilter]
}
}
Swift 5
In interface builder, remove default arrow setting.
Then, apply this subclass for cell, which will add an NSImageView to the right side of the NSPopUpButton.
This way you have complete control over what you set as your custom button and how you position it.
import Cocoa
#IBDesignable class NSPopUpButtonCellBase: NSPopUpButtonCell {
let textColor = NSColor(named: "white")!
let leftPadding: CGFloat = 16
let rightPadding: CGFloat = 30
override func awakeFromNib() {
super.awakeFromNib()
let imageView = NSImageView()
imageView.image = NSImage(named: "ic_chevron_down")!
controlView!.addSubview(imageView)
imageView.translatesAutoresizingMaskIntoConstraints = false
imageView.widthAnchor.constraint(equalToConstant: CGFloat(20)).isActive = true
imageView.heightAnchor.constraint(equalToConstant: CGFloat(20)).isActive = true
imageView.trailingAnchor.constraint(equalTo: controlView!.trailingAnchor).isActive = true
imageView.centerYAnchor.constraint(equalTo: controlView!.centerYAnchor).isActive = true
}
// overriding this removes the white container
override func drawBezel(withFrame frame: NSRect, in controlView: NSView) {
}
// overriding this allows us to modify paddings to text
override func titleRect(forBounds cellFrame: NSRect) -> NSRect {
// this gets rect, which has title's height, not the whole control's height
// also, it's origin.y is such that it centers title
let processedTitleFrame = super.titleRect(forBounds: cellFrame)
let paddedFrame = NSRect(
x: cellFrame.origin.x + leftPadding,
y: processedTitleFrame.origin.y,
width: cellFrame.size.width - leftPadding - rightPadding,
height: processedTitleFrame.size.height
)
return paddedFrame
}
// overriding this allows us to style text
override func drawTitle(_ title: NSAttributedString, withFrame frame: NSRect, in controlView: NSView) -> NSRect {
let attributedTitle = NSMutableAttributedString.init(attributedString: title)
let range = NSMakeRange(0, attributedTitle.length)
attributedTitle.addAttributes([NSAttributedString.Key.foregroundColor : textColor], range: range)
return super.drawTitle(attributedTitle, withFrame: frame, in: controlView)
}
}