NSTextField with rounded corners?
I am trying to make rounded corners around an NSTextField.
I subclassed NSTextField
, tried the code below, but without any result ...
Any ideas?
- (void)drawRect:(NSRect)dirtyRect
{
// black outline
NSRect blackOutlineFrame = NSMakeRect(0.0, 0.0, [self bounds].size.width, [self bounds].size.height-1.0);
NSGradient *gradient = nil;
if ([NSApp isActive]) {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.24 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.374 alpha:1.0]];
}
else {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.55 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.558 alpha:1.0]];
}
[gradient drawInBezierPath:[NSBezierPath bezierPathWithRoundedRect:blackOutlineFrame xRadius:5 yRadius:5] angle:90];
}
source to share
You are doing almost everything right. You just need to change the cell's textField and radius to match. Take a look at this:
-(void)awakeFromNib {
[[self cell] setBezelStyle: NSTextFieldRoundedBezel];
}
- (void)drawRect:(NSRect)dirtyRect
{
NSRect blackOutlineFrame = NSMakeRect(0.0, 0.0, [self bounds].size.width, [self bounds].size.height-1.0);
NSGradient *gradient = nil;
if ([NSApp isActive]) {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.24 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.374 alpha:1.0]];
}
else {
gradient = [[NSGradient alloc] initWithStartingColor:[NSColor colorWithCalibratedWhite:0.55 alpha:1.0] endingColor:[NSColor colorWithCalibratedWhite:0.558 alpha:1.0]];
}
[gradient drawInBezierPath:[NSBezierPath bezierPathWithRoundedRect:blackOutlineFrame xRadius:10 yRadius:10] angle:90];
}
This works well for me.
source to share
It is better to subclass NSTextFieldCell
to draw rounded corners to maintain functionality NSTextField
, e.g .:
- (void)drawWithFrame:(NSRect)cellFrame inView:(NSView *)controlView {
NSBezierPath *betterBounds = [NSBezierPath bezierPathWithRoundedRect:cellFrame xRadius:CORNER_RADIUS yRadius:CORNER_RADIUS];
[betterBounds addClip];
[super drawWithFrame:cellFrame inView:controlView];
if (self.isBezeled) {
[betterBounds setLineWidth:2];
[[NSColor colorWithCalibratedRed:0.510 green:0.643 blue:0.804 alpha:1] setStroke];
[betterBounds stroke];
}
}
Sets a nice rounded text box, which works great (assuming you've set it to draw the rectangle frame in the first place, at least):
source to share
Swift 3 version @ Variable codes with properties editable in Interface Builder:
class RoundedTextFieldCell: NSTextFieldCell {
@IBInspectable var borderColor: NSColor = .clear
@IBInspectable var cornerRadius: CGFloat = 3
override func draw(withFrame cellFrame: NSRect, in controlView: NSView) {
let bounds = NSBezierPath(roundedRect: cellFrame, xRadius: cornerRadius, yRadius: cornerRadius)
bounds.addClip()
super.draw(withFrame: cellFrame, in: controlView)
if borderColor != .clear {
bounds.lineWidth = 2
borderColor.setStroke()
bounds.stroke()
}
}
}
source to share
Include a QuartzCore framework project in your project. Import <QuartzCore/QuartzCore.h>
and use something like the following code (just above):
UITextField *textField = [[UITextField alloc] initWithFrame:CGRectMake(0.0f, 0.0f, 100.0f, 20.0f)];
textField.layer.cornerRadius = 5.0f;
textField.layer.masksToBounds = YES;
Voilà, a text box with rounded corners :)
Edit : just realized this question is related to Mac OS X. Please check the following link: http://cocoatricks.com/2010/06/a-better-looking-text-field/
Edit 2: Created an example project with a rounded text field: http://dl.dropbox.com/u/6487838/RoundedTextField.zip
source to share
